.fox-sequence[hidden] {
  display: none !important;
}

.fox-sequence {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

.fox-sequence__actor {
  --fox-reveal: 0;
  --fox-trail-opacity: 0;
  --fox-trail-shift: -22px;
  --fox-glow-strength: 1;
  --fox-glow-scale: 1;
  --fox-sweep-opacity: 0;
  --fox-focus: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(160px, 18vw, 310px);
  aspect-ratio: 16 / 9;
  transform-origin: 50% 82%;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 calc(14px * var(--fox-glow-strength)) rgba(174, 208, 255, 0.28))
    drop-shadow(0 0 calc(28px * var(--fox-glow-strength)) rgba(120, 154, 255, 0.14));
}

.fox-sequence.is-ready .fox-sequence__actor {
  visibility: visible;
}

.fox-sequence__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: inset(0 calc((1 - var(--fox-reveal)) * 100%) 0 0 round 20px);
}

.fox-sequence__viewport::after {
  content: "";
  position: absolute;
  top: -16%;
  bottom: -16%;
  left: calc(var(--fox-reveal) * 100% - 9%);
  width: 14%;
  opacity: var(--fox-sweep-opacity);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0),
      rgba(231, 240, 255, 0.86),
      rgba(255, 255, 255, 0)
    );
  filter: blur(16px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.fox-sequence__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.fox-sequence__frame--main {
  opacity: calc(0.82 + var(--fox-focus) * 0.18);
  filter: brightness(0) invert(1);
}

.fox-sequence__frame--aura {
  opacity: calc(0.22 + var(--fox-glow-strength) * 0.18);
  filter: brightness(0) invert(1) blur(4px);
  mix-blend-mode: screen;
  transform: scale(calc(1 + var(--fox-glow-strength) * 0.04));
}

.fox-sequence__glow {
  position: absolute;
  inset: 18% 18% 10%;
  opacity: calc(0.22 + var(--fox-glow-strength) * 0.22);
  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(232, 241, 255, 0.56) 0%,
      rgba(181, 205, 255, 0.24) 38%,
      rgba(93, 120, 205, 0) 74%
    );
  filter: blur(18px);
  transform: scale(calc(0.94 + var(--fox-glow-scale) * 0.12));
  mix-blend-mode: screen;
}

.fox-sequence__trail {
  position: absolute;
  inset: 36% 44% 18% -18%;
  opacity: var(--fox-trail-opacity);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(225, 237, 255, 0.42),
      rgba(255, 255, 255, 0)
    );
  filter: blur(18px);
  transform: translate3d(var(--fox-trail-shift), 0, 0) scaleX(calc(0.45 + var(--fox-trail-opacity) * 1.45));
  transform-origin: left center;
  mix-blend-mode: screen;
}

.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer__fox-spot {
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 2.8vw, 2.6rem);
  width: clamp(124px, 17vw, 190px);
  height: clamp(26px, 4vw, 38px);
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(205, 224, 255, 0.22) 0%,
      rgba(115, 142, 214, 0.12) 52%,
      rgba(115, 142, 214, 0) 100%
    );
  opacity: 0.68;
  pointer-events: none;
}

.site-footer__fox-spot-glow {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(161, 188, 255, 0.12) 40%,
      rgba(161, 188, 255, 0) 100%
    );
  filter: blur(12px);
}

body.is-high-contrast .fox-sequence__frame--main,
html.is-high-contrast .fox-sequence__frame--main {
  filter: brightness(0) saturate(0);
}

body.is-high-contrast .fox-sequence__frame--aura,
html.is-high-contrast .fox-sequence__frame--aura {
  filter: brightness(0) saturate(0) blur(4px);
  opacity: 0.12;
  mix-blend-mode: multiply;
}

body.is-high-contrast .fox-sequence__glow,
body.is-high-contrast .fox-sequence__trail,
body.is-high-contrast .site-footer__fox-spot,
body.is-high-contrast .site-footer__fox-spot-glow,
html.is-high-contrast .fox-sequence__glow,
html.is-high-contrast .fox-sequence__trail,
html.is-high-contrast .site-footer__fox-spot,
html.is-high-contrast .site-footer__fox-spot-glow {
  mix-blend-mode: multiply;
}

body.is-high-contrast .fox-sequence__actor,
html.is-high-contrast .fox-sequence__actor {
  filter: drop-shadow(0 0 12px rgba(10, 10, 10, 0.1));
}

@media (max-width: 1024px) {
  .fox-sequence__actor {
    width: clamp(126px, 24vw, 224px);
  }

  .site-footer__fox-spot {
    right: 1rem;
    width: 132px;
  }
}

@media (max-width: 720px) {
  .fox-sequence__actor {
    width: clamp(116px, 30vw, 188px);
  }

  .site-footer__fox-spot {
    width: 112px;
    height: 24px;
    right: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fox-sequence__viewport::after,
  .fox-sequence__trail {
    display: none;
  }

  .fox-sequence__actor,
  .fox-sequence__glow,
  .fox-sequence__frame--aura {
    transition: none !important;
    animation: none !important;
  }
}