@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/share-tech-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/silkscreen-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/silkscreen-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/silkscreen-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/silkscreen-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/tektur-latin-ext-700-900.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/tektur-latin-700-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --rainbow-cycle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  --blue: #003366;
  --brand-blue-logo: #003366;
  --electric: #62b9ff;
  --pink: #ff396d;
  --orange: #ff9b34;
  --green: #7eff4f;
  --violet: #a96bff;
  --ink: #02030a;
  --panel: #101529;
  --chrome: #f4f8ff;
  --font-logo: "Tektur", "Eurostile Extended", "Arial Black", Impact, sans-serif;
  --font-bitmap: "Silkscreen", "Share Tech Mono", "Courier New", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(150, 35, 72, 0.28), transparent 21rem),
    radial-gradient(circle at 24% 72%, rgba(34, 126, 205, 0.2), transparent 26rem),
    #000;
  font-family: "Trebuchet MS", "Arial Black", Impact, system-ui, sans-serif;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.32;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.16) 0 1px,
      rgba(0, 0, 0, 0.08) 1px 3px
    );
}

body::after {
  opacity: 0.16;
  background:
    linear-gradient(90deg, rgba(255, 0, 0, 0.22), transparent 18%, rgba(0, 255, 255, 0.12) 82%, rgba(0, 0, 255, 0.2)),
    radial-gradient(circle at center, transparent 0 48%, rgba(0, 0, 0, 0.5) 100%);
}

.stage {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(12px, 2.8vw, 36px);
}

.crt-shell {
  position: relative;
  width: min(92vw, 1152px);
  aspect-ratio: 16 / 9;
  min-height: 430px;
  isolation: isolate;
}

.screen {
  position: absolute;
  inset: 7.5% 0 7.5%;
  overflow: hidden;
  border-left: 1px solid rgba(74, 157, 255, 0.26);
  border-right: 1px solid rgba(74, 157, 255, 0.26);
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(31, 112, 255, 0.42),
    0 0 34px rgba(33, 97, 255, 0.28),
    inset 0 0 34px rgba(98, 185, 255, 0.08);
}

#spacefield,
.nebula-wash,
.screen-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#spacefield {
  z-index: 0;
}

.nebula-wash {
  z-index: 1;
  opacity: 0.14;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 13% 72%, rgba(83, 179, 255, 0.42), transparent 26%),
    radial-gradient(ellipse at 45% 22%, rgba(236, 180, 225, 0.34), transparent 28%),
    radial-gradient(ellipse at 75% 64%, rgba(49, 62, 134, 0.48), transparent 32%),
    radial-gradient(ellipse at 93% 36%, rgba(255, 189, 229, 0.42), transparent 20%);
  animation: nebula-pulse 7s ease-in-out infinite alternate;
}

.screen-vignette {
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at 49% 44%, rgba(255, 255, 255, 0.06), transparent 34%),
    radial-gradient(circle at center, transparent 66%, rgba(0, 0, 0, 0.24) 100%);
}

.blue-rail {
  position: absolute;
  left: 0;
  z-index: 7;
  width: 100%;
  height: clamp(4px, 0.5vw, 7px);
  background: linear-gradient(90deg, #00264d, var(--brand-blue-logo), #00457a, var(--brand-blue-logo));
  box-shadow: 0 0 14px rgba(0, 51, 102, 0.95), 0 0 1px rgba(255, 255, 255, 0.88) inset;
}

.rail-top {
  top: 0;
}

.rail-bottom {
  bottom: 11.4%;
}

.intro-copy {
  position: absolute;
  inset: 16% 10% 22%;
  z-index: 4;
  display: grid;
  grid-template-rows: 0.5fr auto auto auto 0.66fr;
  align-items: center;
  justify-items: center;
  --caption-gap: clamp(9px, 1.05vw, 18px);
  --title-gap: clamp(16px, 2.5vw, 45px);
  --brand-lift: 4px;
  --caption-optical-lift: 4px;
  transform: skewX(-6deg);
  isolation: isolate;
}

.intro-copy::before {
  position: absolute;
  inset: 18% -4% 4%;
  z-index: -1;
  content: "";
  opacity: 0.38;
  filter: blur(14px);
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0.48) 0 18%, rgba(8, 16, 48, 0.24) 42%, transparent 76%),
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.18) 22%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0.18) 78%, transparent 100%);
}

.intro-copy > * {
  position: relative;
  z-index: 1;
}

.crew-line {
  grid-row: 2;
}

.presents {
  grid-row: 3;
}

.title-line {
  grid-row: 4;
}

.line {
  margin: 0;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.crew-line,
.presents,
.title-line {
  font-family: Impact, "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 900;
  -webkit-text-stroke: clamp(1px, 0.1vw, 1.8px) rgba(1, 5, 22, 0.96);
  text-stroke: clamp(1px, 0.1vw, 1.8px) rgba(1, 5, 22, 0.96);
  filter:
    drop-shadow(0 3px 0 rgba(1, 5, 22, 0.94))
    drop-shadow(0 0 7px rgba(47, 167, 255, 0.3));
  text-shadow:
    1px 0 rgba(76, 222, 255, 0.38),
    -1px 0 rgba(255, 47, 126, 0.28),
    0 3px 0 rgba(2, 8, 32, 0.88);
}

.crew-line {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
  font-size: clamp(2.1rem, 5vw, 5.4rem);
  line-height: 0.8;
}

.presents {
  color: #fff7b8;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
  align-items: center;
  justify-content: center;
  row-gap: clamp(0.28rem, 0.75vw, 0.72rem);
  width: min(96%, 900px);
  font-family: var(--font-bitmap);
  font-style: normal;
  font-weight: 700;
  background: none;
  --line-glow:
    drop-shadow(0 2px 0 rgba(1, 5, 22, 0.94))
    drop-shadow(0 0 8px rgba(117, 244, 255, 0.28));
  filter: var(--line-glow) hue-rotate(0deg);
  text-shadow:
    1px 0 rgba(255, 211, 77, 0.2),
    -1px 0 rgba(82, 163, 255, 0.22);
}

.presents .present-cluster {
  display: inline-flex;
  grid-column: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.35vw, 1.5rem);
  white-space: nowrap;
}

.presents .present-cluster:first-child {
  grid-row: 1;
}

.presents .present-cluster:last-child {
  grid-row: 2;
}

.presents .present-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.075em;
  flex: 0 0 auto;
}

.presents .letter {
  position: relative;
  display: inline-block;
  min-width: 0.64em;
  --wave-low: 0.035em;
  --wave-high: -0.16em;
  --rainbow-start: 181deg;
  --rainbow-step: 27deg;
  --rainbow-base: calc(var(--rainbow-start) + var(--i, 0) * var(--rainbow-step));
  --rainbow-cycle: 0deg;
  color: hsl(calc(var(--rainbow-base) + var(--rainbow-cycle)) 100% 70%);
  transform-origin: 50% 78%;
  text-shadow:
    0 2px 0 rgba(1, 5, 22, 0.92),
    0 0 7px currentColor,
    0 0 14px currentColor;
  animation: presents-rainbow-cycle 5.8s linear infinite;
  animation-delay: calc(var(--i, 0) * -82ms);
}

.presents .letter.fox-w {
  isolation: isolate;
  color: hsl(calc(var(--rainbow-base) + var(--rainbow-cycle)) 100% 66%);
  text-shadow:
    0 2px 0 rgba(1, 5, 22, 0.92),
    0 0 7px currentColor,
    0 0 15px currentColor;
}

.presents .letter.fox-w::before,
.presents .letter.fox-w::after {
  position: absolute;
  top: calc(0.46em - 1px);
  left: 50%;
  z-index: 2;
  width: max(4px, 0.15em);
  height: max(4px, 0.15em);
  border: max(1px, 0.035em) solid #fff3aa;
  background:
    linear-gradient(135deg, #fff8bc 0 22%, transparent 22%),
    #07030a;
  box-shadow:
    0 0 0 1px rgba(1, 5, 22, 0.88),
    0 0 5px rgba(255, 236, 134, 0.78);
  content: "";
  filter: brightness(1);
  image-rendering: pixelated;
  transform: translateX(var(--eye-x)) scaleY(1);
  transform-origin: 50% 62%;
}

.presents .letter.fox-w::before {
  --eye-x: -0.34em;
  animation: fox-eye-wink 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.presents .letter.fox-w::after {
  --eye-x: 0.08em;
  animation: fox-eye-wink 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.word-brand {
  position: relative;
  display: inline-block;
  min-width: 5.55em;
  padding: 0 0.04em;
  isolation: isolate;
  transform: translateY(-4px) skewX(-4deg);
  font-family: var(--font-logo);
  font-size: 0.76em;
  font-style: normal;
  font-weight: 900;
  line-height: 0.82;
  --brand-loop-duration: 3.4s;
  color: #75f4ff;
  background: none;
  -webkit-text-fill-color: #75f4ff;
  -webkit-text-stroke: clamp(0.8px, 0.09vw, 1.35px) rgba(1, 5, 22, 0.96);
  text-stroke: clamp(0.8px, 0.09vw, 1.35px) rgba(1, 5, 22, 0.96);
  filter:
    drop-shadow(0 3px 0 rgba(1, 5, 22, 0.96))
    drop-shadow(0 0 8px rgba(117, 244, 255, 0.54))
    drop-shadow(0 0 15px rgba(82, 163, 255, 0.5));
  text-transform: none;
  text-shadow:
    1px 0 rgba(117, 244, 255, 0.42),
    -1px 0 rgba(255, 95, 133, 0.34),
    0 0 6px rgba(117, 244, 255, 0.62);
  animation: brand-logo-hit var(--brand-loop-duration) steps(1, end) infinite;
  will-change: transform, filter;
}

.word-brand::before,
.word-brand::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  pointer-events: none;
}

.word-brand::before {
  z-index: -1;
  color: #020617;
  -webkit-text-fill-color: #020617;
  transform: translate3d(3px, 4px, 0);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.95),
    0 0 12px rgba(22, 60, 145, 0.7);
}

.word-brand::after {
  z-index: 1;
  opacity: 0.9;
  color: transparent;
  background:
    linear-gradient(
      180deg,
      #ffffff 0 7%,
      #9ee8ff 7% 14%,
      #b8ff79 14% 21%,
      #fff27a 21% 28%,
      #ffbd69 28% 35%,
      #ff8f93 35% 42%,
      #ff9cff 42% 49%,
      #b7fbff 49% 56%,
      #9dcaff 56% 63%,
      #7fb7ff 63% 70%,
      #87fff2 70% 77%,
      #a6f58e 77% 84%,
      #ffe078 84% 91%,
      #ff9b79 91% 96%,
      #ff88aa 96% 100%
    );
  background-size: 100% 260%;
  background-position: 50% 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: inset(0 0 0 0);
  mix-blend-mode: normal;
  text-shadow:
    2px 0 rgba(255, 95, 133, 0.18),
    -2px 0 rgba(82, 163, 255, 0.18);
  animation: brand-copper-flow var(--brand-loop-duration) linear infinite;
  will-change: background-position;
}

.numbers {
  color: transparent;
  min-width: 2.72em;
  background: linear-gradient(90deg, #59cfff, #2c73ff, #55ff72, #ffe957);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: rainbow-pan 3s linear infinite reverse;
}

.presents {
  margin-top: calc(var(--caption-gap) + var(--title-gap) - var(--brand-lift) - var(--caption-optical-lift));
  margin-bottom: calc(var(--caption-gap) + var(--caption-optical-lift));
  font-size: clamp(1.02rem, 2.25vw, 2.55rem);
  line-height: 0.9;
}

.title-line {
  display: block;
  margin-top: var(--title-gap);
  font-size: clamp(2.35rem, 5.7vw, 6.35rem);
  line-height: 0.78;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  filter: drop-shadow(0 4px 0 rgba(1, 5, 22, 0.94));
  text-shadow: none;
}

.title-line a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.title-line span {
  position: relative;
  display: inline-block;
  isolation: isolate;
  --neon-core: var(--brand-blue-logo);
  --neon-tube: rgba(126, 216, 255, 0.86);
  --neon-glow: rgba(0, 112, 220, 0.62);
  --neon-haze: rgba(0, 51, 153, 0.34);
  --neon-slice: rgba(132, 235, 255, 0.7);
  --neon-delay: -0.2s;
  --glitch-delay: -1.1s;
  color: var(--neon-core);
  background: none;
  -webkit-text-stroke: clamp(0.8px, 0.08vw, 1.35px) rgba(199, 239, 255, 0.58);
  text-stroke: clamp(0.8px, 0.08vw, 1.35px) rgba(199, 239, 255, 0.58);
  filter:
    drop-shadow(0 0 4px var(--neon-glow))
    drop-shadow(0 0 12px var(--neon-glow))
    drop-shadow(0 0 28px var(--neon-haze));
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 3px var(--neon-tube),
    0 0 5px rgba(70, 176, 255, 0.78),
    0 0 10px var(--neon-glow),
    0 0 18px var(--neon-glow),
    0 0 30px var(--neon-haze),
    0 4px 0 rgba(2, 8, 32, 0.9);
  animation: neon-word-flicker 4.9s steps(1, end) infinite, neon-letter-glitch 7.4s steps(1, end) infinite;
  animation-delay: var(--neon-delay), var(--glitch-delay);
  will-change: transform, opacity, filter;
}

.title-line span::before,
.title-line span::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--neon-slice);
  content: attr(data-text);
  pointer-events: none;
  opacity: 0;
  -webkit-text-stroke: inherit;
  text-stroke: inherit;
}

.title-line span::before {
  text-shadow: 2px 0 var(--neon-slice);
  clip-path: inset(0 0 58% 0);
  animation: neon-glitch-red 6.8s steps(1, end) infinite;
}

.title-line span::after {
  color: rgba(117, 244, 255, 0.62);
  text-shadow: -2px 0 rgba(117, 244, 255, 0.62);
  clip-path: inset(48% 0 0 0);
  animation: neon-glitch-cyan 6.8s steps(1, end) infinite;
}

.ticker-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  height: 11.4%;
  padding-inline: clamp(10px, 1.6vw, 22px);
  background: #000;
  border-top: 1px solid rgba(25, 110, 255, 0.35);
  color: #fff;
  font-family: "Courier New", ui-monospace, monospace;
  overflow: hidden;
}

.ticker {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker p {
  display: inline-block;
  min-width: 100%;
  margin: 0;
  color: #fefefe;
  font-size: clamp(0.88rem, 1.65vw, 1.56rem);
  font-style: italic;
  font-weight: 900;
  text-shadow:
    1px 0 #1f77ff,
    -1px 0 #ff315f,
    0 0 7px rgba(255, 255, 255, 0.8);
  animation: scroll-left 58s linear infinite;
}

.controls {
  position: absolute;
  right: clamp(8px, 1.4vw, 18px);
  bottom: calc(-1 * clamp(40px, 4.9vw, 58px));
  z-index: 11;
  display: flex;
  gap: 8px;
}

.controls button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(111, 184, 255, 0.78);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.54);
  color: #e8f4ff;
  cursor: pointer;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 0 12px rgba(36, 116, 255, 0.42), inset 0 0 10px rgba(53, 142, 255, 0.24);
  transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
}

.controls button:hover,
.controls button:focus-visible {
  border-color: #fff;
  color: #fff477;
  transform: translateY(-2px);
  outline: none;
}

.controls button::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 4px 6px;
  border: 1px solid rgba(111, 184, 255, 0.48);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.84);
  color: #fff;
  content: attr(data-tip);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.controls button:hover::after,
.controls button:focus-visible::after {
  opacity: 1;
}

.stage.sound-on #soundBtn,
.stage.boost-on #boostBtn {
  color: #fff477;
  border-color: #fff477;
  box-shadow: 0 0 16px rgba(255, 244, 119, 0.62), inset 0 0 12px rgba(255, 244, 119, 0.2);
}

@keyframes rainbow-pan {
  from { background-position: 0% 50%; }
  to { background-position: 280% 50%; }
}

@keyframes brand-copper-flow {
  from { background-position: 50% 0%; }
  to { background-position: 50% 260%; }
}

@keyframes brand-logo-hit {
  0%, 1.2%, 94%, 100% {
    transform: translateY(-4px) skewX(-4deg) translateX(3px);
    filter:
      drop-shadow(3px 0 0 rgba(255, 95, 133, 0.7))
      drop-shadow(-3px 0 0 rgba(82, 163, 255, 0.7))
      drop-shadow(0 0 15px rgba(117, 244, 255, 0.64));
  }
  1.8%, 92.8% {
    transform: translateY(-4px) skewX(-4deg);
    filter:
      drop-shadow(0 3px 0 rgba(1, 5, 22, 0.96))
      drop-shadow(0 0 8px rgba(117, 244, 255, 0.54))
      drop-shadow(0 0 15px rgba(82, 163, 255, 0.5));
  }
  94.7% {
    transform: translateY(-4px) skewX(-4deg) translateX(3px);
    filter:
      drop-shadow(3px 0 0 rgba(255, 95, 133, 0.7))
      drop-shadow(-3px 0 0 rgba(82, 163, 255, 0.7))
      drop-shadow(0 0 15px rgba(117, 244, 255, 0.64));
  }
  96.1% {
    transform: translateY(-4px) skewX(-4deg) translateX(-2px);
    filter:
      drop-shadow(-3px 0 0 rgba(255, 95, 133, 0.58))
      drop-shadow(3px 0 0 rgba(82, 163, 255, 0.58))
      drop-shadow(0 0 10px rgba(117, 244, 255, 0.5));
  }
  97.4% {
    transform: translateY(-5px) skewX(-4deg) translateX(1px);
    filter:
      drop-shadow(0 3px 0 rgba(1, 5, 22, 0.96))
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.46))
      drop-shadow(0 0 20px rgba(117, 244, 255, 0.58));
  }
}

@keyframes chrome-scan {
  0%, 100% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
}

@keyframes presents-rainbow-cycle {
  from {
    --rainbow-cycle: 0deg;
  }
  to {
    --rainbow-cycle: 360deg;
  }
}

@keyframes neon-word-flicker {
  0%, 6%, 8%, 10%, 53%, 55%, 59%, 100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 4px var(--neon-glow))
      drop-shadow(0 0 12px var(--neon-glow))
      drop-shadow(0 0 28px var(--neon-haze));
  }
  7%, 54% {
    opacity: 0.72;
    filter:
      drop-shadow(0 0 2px var(--neon-glow))
      drop-shadow(0 0 7px var(--neon-glow))
      drop-shadow(0 0 16px var(--neon-haze));
  }
  9%, 56% {
    opacity: 0.24;
    filter:
      drop-shadow(0 0 2px var(--neon-glow));
  }
  57% {
    opacity: 0.92;
    filter:
      drop-shadow(0 0 6px var(--neon-glow))
      drop-shadow(0 0 18px var(--neon-glow))
      drop-shadow(0 0 38px var(--neon-haze));
  }
}

@keyframes neon-word-flicker-mobile {
  0%, 6%, 8%, 10%, 53%, 55%, 59%, 100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 3px var(--neon-glow))
      drop-shadow(0 0 9px var(--neon-glow))
      drop-shadow(0 0 18px var(--neon-haze));
  }
  7%, 54% {
    opacity: 0.76;
    filter:
      drop-shadow(0 0 2px var(--neon-glow))
      drop-shadow(0 0 5px var(--neon-glow))
      drop-shadow(0 0 10px var(--neon-haze));
  }
  9%, 56% {
    opacity: 0.32;
    filter:
      drop-shadow(0 0 2px var(--neon-glow));
  }
  57% {
    opacity: 0.9;
    filter:
      drop-shadow(0 0 4px var(--neon-glow))
      drop-shadow(0 0 12px var(--neon-glow))
      drop-shadow(0 0 24px var(--neon-haze));
  }
}

@keyframes neon-letter-glitch {
  0%, 44%, 47%, 71%, 73%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(2px);
    opacity: 0.88;
  }
  46% {
    transform: translateX(-2px);
    opacity: 0.96;
  }
  72% {
    transform: translateX(1px);
    opacity: 0.82;
  }
}

@keyframes neon-glitch-red {
  0%, 43%, 48%, 70%, 74%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  44%, 46% {
    opacity: 0.92;
    transform: translateX(4px);
  }
  71%, 73% {
    opacity: 0.66;
    transform: translateX(3px);
  }
}

@keyframes neon-glitch-cyan {
  0%, 43%, 48%, 70%, 74%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  45%, 47% {
    opacity: 0.72;
    transform: translateX(-4px);
  }
  72% {
    opacity: 0.55;
    transform: translateX(-3px);
  }
}

@keyframes fox-eye-wink {
  0%, 58%, 61.2%, 100% {
    filter: brightness(1);
    transform: translateX(var(--eye-x)) scaleY(1);
  }
  59.1% {
    filter: brightness(1.22);
    transform: translateX(var(--eye-x)) translateY(0.025em) scaleY(0.62);
  }
  59.9% {
    filter: brightness(0.94);
    transform: translateX(var(--eye-x)) translateY(0.055em) scaleY(0.14);
  }
  60.7% {
    filter: brightness(1.14);
    transform: translateX(var(--eye-x)) translateY(0.018em) scaleY(0.76);
  }
}

@keyframes scroll-left {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

@keyframes nebula-pulse {
  from {
    opacity: 0.08;
    transform: scale(1);
  }
  to {
    opacity: 0.18;
    transform: scale(1.05) translate3d(-1.5%, 1%, 0);
  }
}

@media (max-width: 780px) {
  .stage {
    padding: 8px;
  }

  .crt-shell {
    width: calc(100vw - 16px);
    min-height: 100svh;
    aspect-ratio: auto;
  }

  .screen {
    inset: 8% 2% 9%;
  }

  .intro-copy {
    inset: 15% 5% 25%;
    --caption-gap: clamp(14px, 4vw, 20px);
    --title-gap: clamp(9px, 2.8vw, 16px);
    --caption-optical-lift: 3px;
    transform: skewX(-3deg);
  }

  .crew-line {
    gap: clamp(8px, 5vw, 28px);
    font-size: clamp(1.6rem, 8.2vw, 2.55rem);
  }

  .word-brand {
    min-width: 5.25em;
    font-size: 0.74em;
  }

  .presents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em clamp(0.55rem, 2.4vw, 0.82rem);
    width: min(96%, 340px);
    margin-top: calc(var(--caption-gap) + var(--title-gap) - var(--brand-lift) - var(--caption-optical-lift));
    margin-bottom: calc(var(--caption-gap) + var(--caption-optical-lift));
    font-size: clamp(0.9rem, 4.6vw, 1.24rem);
  }

  .presents .present-cluster {
    display: contents;
  }

  .presents .present-word {
    gap: 0.055em;
  }

  .presents .letter {
    min-width: 0.58em;
  }

  .title-line {
    width: min(94%, 340px);
    max-width: 94%;
    font-size: clamp(1.28rem, 6.35vw, 2.2rem);
    white-space: normal;
  }

  .controls {
    right: 10px;
    bottom: 10px;
  }

  .controls button {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 780px), (hover: none) and (pointer: coarse) {
  body::before {
    opacity: 0.18;
    mix-blend-mode: normal;
  }

  .screen {
    box-shadow:
      0 0 0 1px rgba(31, 112, 255, 0.36),
      inset 0 0 22px rgba(98, 185, 255, 0.07);
  }

  #spacefield {
    transform: translateZ(0);
  }

  .nebula-wash {
    display: none;
  }

  .intro-copy::before {
    display: none;
  }

  .crew-line,
  .presents,
  .title-line {
    filter: drop-shadow(0 2px 0 rgba(1, 5, 22, 0.94));
  }

  .title-line span {
    animation: neon-word-flicker-mobile 4.9s steps(1, end) infinite, neon-letter-glitch 7.4s steps(1, end) infinite;
    animation-delay: var(--neon-delay), var(--glitch-delay);
    filter:
      drop-shadow(0 0 3px var(--neon-glow))
      drop-shadow(0 0 9px var(--neon-glow))
      drop-shadow(0 0 18px var(--neon-haze));
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.96),
      0 0 2px var(--neon-tube),
      0 0 4px rgba(70, 176, 255, 0.72),
      0 0 8px var(--neon-glow),
      0 0 14px var(--neon-glow),
      0 0 22px var(--neon-haze),
      0 3px 0 rgba(2, 8, 32, 0.9);
  }

  .title-line span::before {
    text-shadow: 1px 0 var(--neon-slice);
  }

  .title-line span::after {
    text-shadow: -1px 0 rgba(117, 244, 255, 0.52);
  }

  .ticker p {
    text-shadow:
      1px 0 #1f77ff,
      -1px 0 #ff315f,
      0 0 4px rgba(255, 255, 255, 0.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}