@font-face {
  font-family: "Jersey 10";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/jersey-10-400.woff2") format("woff2");
}

:root {
  --hit-cycle: 3s;
  --hit-delay: 2.8s;
  color-scheme: dark;
  font-family: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #080a09;
  color: #f6f3ed;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  overflow: hidden;
  background: #080a09;
}

.teaser {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  isolation: isolate;
  overflow: hidden;
  transform-origin: center;
  will-change: filter, transform;
  animation: shell-hit var(--hit-cycle) var(--hit-delay) linear infinite;
}

.teaser::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(255 244 234 / 10%) 0,
    rgb(242 74 29 / 4%) 15%,
    transparent 42%
  );
  opacity: 0;
  pointer-events: none;
  content: "";
  animation: frame-flash var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.teaser::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid rgb(246 243 237 / 8%);
  margin: clamp(0.6rem, 1.3vw, 1rem);
  pointer-events: none;
  content: "";
}

.atmosphere,
.atmosphere__glow,
.atmosphere__mesh,
.atmosphere__beam,
.atmosphere__dust,
.atmosphere__scratches,
.atmosphere__glitch,
.atmosphere__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmosphere {
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgb(28 31 29 / 12%) 0 30%, transparent 65%),
    linear-gradient(145deg, #080a09 0%, #0b0d0c 48%, #070807 100%);
}

.atmosphere::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 42%), transparent 18% 82%, rgb(0 0 0 / 42%)),
    radial-gradient(circle at center, transparent 35%, rgb(0 0 0 / 36%) 78%, rgb(0 0 0 / 72%) 120%);
  pointer-events: none;
  content: "";
}

.atmosphere__mesh {
  background-image:
    linear-gradient(rgb(246 243 237 / 2.8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(246 243 237 / 2.8%) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(circle at center, #000 0 27%, transparent 76%);
  opacity: 0.8;
  transform: perspective(36rem) rotateX(64deg) scale(1.5) translateY(8%);
  transform-origin: center 62%;
}

.atmosphere__beam {
  inset: -60%;
  background: conic-gradient(
    from 208deg at center,
    transparent 0 21%,
    rgb(242 74 29 / 3%) 24%,
    rgb(246 243 237 / 3.5%) 26%,
    transparent 29% 100%
  );
  animation: beam-drift 24s linear infinite;
}

.atmosphere__glow {
  inset: 50% auto auto 50%;
  width: min(54rem, 110vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(242 74 29 / 12%) 0,
    rgb(242 74 29 / 4%) 27%,
    transparent 67%
  );
  filter: blur(12px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  animation: glow-in 2.8s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    impact-glow var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.atmosphere__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid rgb(246 243 237 / 8%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  animation: ring-in 2.4s 0.65s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.atmosphere__ring::before,
.atmosphere__ring::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.atmosphere__ring::before {
  inset: -4px;
  border-top: 1px solid rgb(242 74 29 / 52%);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  animation: orbit 16s linear infinite;
}

.atmosphere__ring::after {
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #f24a1d;
  box-shadow: 0 0 18px 2px rgb(242 74 29 / 70%);
}

.atmosphere__ring--outer {
  width: min(47rem, 92vw);
  animation: ring-in 2.4s 0.65s cubic-bezier(0.2, 0.75, 0.2, 1) forwards,
    ring-impact var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.atmosphere__ring--inner {
  width: min(32rem, 63vw);
  border-style: dashed;
  opacity: 0;
  animation: ring-in 2.4s 0.85s cubic-bezier(0.2, 0.75, 0.2, 1) forwards,
    ring-impact var(--hit-cycle) calc(var(--hit-delay) + 0.08s) ease-out infinite;
}

.atmosphere__ring--inner::before {
  animation-direction: reverse;
  animation-duration: 21s;
}

.atmosphere__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 140vh;
  background: linear-gradient(
    transparent,
    rgb(246 243 237 / 7%) 20%,
    rgb(246 243 237 / 7%) 80%,
    transparent
  );
  opacity: 0;
  transform: translate(-50%, -50%) rotate(28deg);
  animation: line-in 2.8s 1s ease-out forwards;
}

.impact {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.impact span {
  position: absolute;
  display: block;
}

.impact__core {
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff8f1;
  box-shadow:
    0 0 1.5rem 0.35rem rgb(255 246 238 / 72%),
    0 0 4.5rem 1.5rem rgb(242 74 29 / 44%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
  animation: impact-core var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.impact__burst {
  top: 0;
  left: 0;
  width: min(64rem, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 3deg,
    rgb(255 246 238 / 34%) 0 0.18deg,
    rgb(242 74 29 / 18%) 0.24deg 0.42deg,
    transparent 0.5deg 8deg
  );
  mask-image: radial-gradient(circle, transparent 0 4%, #000 7%, transparent 48%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25) rotate(-4deg);
  animation: impact-burst var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.impact__wave {
  top: 0;
  left: 0;
  width: min(17rem, 38vw);
  aspect-ratio: 1;
  border: 1px solid rgb(255 244 234 / 64%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.05);
  animation: shockwave var(--hit-cycle) var(--hit-delay) cubic-bezier(0.1, 0.65, 0.2, 1) infinite;
}

.impact__wave--second {
  border-color: rgb(242 74 29 / 52%);
  animation-delay: calc(var(--hit-delay) + 0.12s);
}

.impact__wave--third {
  width: min(25rem, 58vw);
  border-color: rgb(255 116 68 / 30%);
  border-style: dashed;
  animation-delay: calc(var(--hit-delay) + 0.21s);
}

.impact__cross {
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: cross-flash var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.impact__cross--horizontal {
  width: 120vw;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 8%,
    rgb(242 74 29 / 20%) 31%,
    #fff4ea 50%,
    rgb(242 74 29 / 20%) 69%,
    transparent 92%
  );
  box-shadow: 0 0 1.5rem rgb(242 74 29 / 48%);
}

.impact__cross--vertical {
  width: 1px;
  height: 120vh;
  background: linear-gradient(
    transparent 8%,
    rgb(242 74 29 / 16%) 35%,
    #fff4ea 50%,
    rgb(242 74 29 / 16%) 65%,
    transparent 92%
  );
  box-shadow: 0 0 1.5rem rgb(242 74 29 / 38%);
  animation-delay: calc(var(--hit-delay) + 0.04s);
}

.impact__spark {
  top: 0;
  left: 0;
  width: clamp(2rem, 5vw, 4.5rem);
  height: 1px;
  background: linear-gradient(90deg, rgb(242 74 29 / 78%), transparent);
  opacity: 0;
  transform-origin: left center;
  animation: spark var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.impact__spark--one {
  --spark-angle: 18deg;
}

.impact__spark--two {
  --spark-angle: 143deg;
  animation-delay: calc(var(--hit-delay) + 0.04s);
}

.impact__spark--three {
  --spark-angle: 218deg;
  animation-delay: calc(var(--hit-delay) + 0.07s);
}

.impact__spark--four {
  --spark-angle: 326deg;
  animation-delay: calc(var(--hit-delay) + 0.1s);
}

.atmosphere__dust {
  inset: -8%;
  background-image:
    radial-gradient(circle at 11% 22%, rgb(246 243 237 / 35%) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 16%, rgb(246 243 237 / 26%) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 62% 71%, rgb(242 74 29 / 28%) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 27% 83%, rgb(246 243 237 / 24%) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 91% 59%, rgb(246 243 237 / 22%) 0 0.7px, transparent 1.2px);
  background-size: 17rem 19rem, 23rem 21rem, 19rem 25rem, 29rem 23rem, 31rem 27rem;
  opacity: 0.35;
  animation: dust-drift 28s ease-in-out infinite alternate;
}

.atmosphere__scratches {
  background-image:
    repeating-linear-gradient(
      106deg,
      transparent 0 5.8rem,
      rgb(246 243 237 / 2.4%) 5.82rem,
      transparent 5.86rem 12rem
    ),
    repeating-linear-gradient(
      72deg,
      transparent 0 14rem,
      rgb(242 74 29 / 1.8%) 14.03rem,
      transparent 14.08rem 22rem
    );
  opacity: 0.75;
  mix-blend-mode: screen;
}

.atmosphere__glitch {
  z-index: 2;
  inset: -4%;
  background:
    linear-gradient(
      180deg,
      transparent 0 18%,
      rgb(146 224 255 / 8%) 18.1% 18.35%,
      transparent 18.45% 57%,
      rgb(242 74 29 / 12%) 57.1% 57.55%,
      transparent 57.7% 100%
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 3px,
      rgb(255 255 255 / 2.5%) 3px 4px
    );
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(0);
  animation: field-glitch var(--hit-cycle) var(--hit-delay) steps(1, end) infinite;
}

.atmosphere__grain {
  z-index: 3;
  inset: -20%;
  opacity: 0.052;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  animation: grain-shift 0.24s steps(2) infinite;
}

.brand {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(-0.75rem);
  animation: fade-down 1.2s 0.1s ease-out forwards;
}

.brand__logo {
  width: clamp(11rem, 22vw, 16rem);
  height: auto;
  mix-blend-mode: screen;
  animation: logo-hit var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.reveal {
  align-self: center;
  justify-self: center;
  width: min(100%, 56rem);
  text-align: center;
  animation: content-hit var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.reveal__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: rgb(246 243 237 / 55%);
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 1.1s 0.95s ease-out forwards;
}

.reveal__signal {
  width: 0.38rem;
  height: 0.38rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f24a1d;
  box-shadow: 0 0 0 0 rgb(242 74 29 / 45%);
  animation: signal var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.reveal__title {
  display: flex;
  margin: 0;
  align-items: center;
  flex-direction: column;
  font-family: "Jersey 10", "Arial Black", sans-serif;
  font-size: clamp(5.2rem, 16vw, 12rem);
  font-stretch: condensed;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.68;
  text-transform: uppercase;
  animation: title-hit var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.reveal__title span {
  position: relative;
  display: block;
  isolation: isolate;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(2rem) scaleY(0.92);
  animation: title-in 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal__title span::before,
.reveal__title span::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  content: attr(data-text);
  mix-blend-mode: screen;
}

.reveal__title span::before {
  color: #ff3510;
  text-shadow: 5px 0 0 rgb(242 74 29 / 40%);
  animation: text-glitch-red var(--hit-cycle) var(--hit-delay) steps(1, end) infinite;
}

.reveal__title span::after {
  color: #9ce8ff;
  text-shadow: -5px 0 0 rgb(94 206 255 / 28%);
  animation: text-glitch-cyan var(--hit-cycle) var(--hit-delay) steps(1, end) infinite;
}

.reveal__title.is-idle-glitch span {
  translate: var(--idle-main-x, 0) var(--idle-main-y, 0);
}

.reveal__title.is-idle-glitch span::before {
  clip-path: inset(
    var(--idle-red-top, 20%)
    0
    var(--idle-red-bottom, 55%)
    0
  );
  animation: idle-glitch-red var(--idle-glitch-duration, 140ms) steps(2, end) 1;
}

.reveal__title.is-idle-glitch span::after {
  clip-path: inset(
    var(--idle-cyan-top, 58%)
    0
    var(--idle-cyan-bottom, 18%)
    0
  );
  animation: idle-glitch-cyan var(--idle-glitch-duration, 140ms) steps(2, end) 1;
}

.reveal__title span:first-child {
  color: #f5f0e9;
  font-size: 0.72em;
  letter-spacing: -0.015em;
  line-height: 0.78;
  scale: 1.04 1;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 22%),
    0 5px 1rem rgb(0 0 0 / 58%),
    0 0 2.5rem rgb(255 245 235 / 12%);
  animation-delay: 0.65s;
}

.reveal__title span:last-child {
  color: #f24a1d;
  letter-spacing: 0.005em;
  scale: 1.15 1;
  text-shadow:
    0 2px 0 #8d240b,
    0 7px 1.1rem rgb(0 0 0 / 68%),
    0 0 2.2rem rgb(242 74 29 / 26%),
    0 0 5rem rgb(242 74 29 / 11%);
  animation-delay: 0.82s;
}

.reveal__title[data-phrase-size="compact"] {
  font-size: clamp(3.6rem, 11vw, 9rem);
  line-height: 0.73;
}

.reveal__title[data-phrase-size="compact"] span:last-child {
  scale: 1.06 1;
}

.reveal__title[data-phrase-size="long"] {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.8;
}

.reveal__title[data-phrase-size="long"] span:first-child {
  font-size: 0.86em;
  line-height: 0.92;
  scale: 1 1;
}

.reveal__title[data-phrase-size="long"] span:last-child {
  margin-top: 0.14em;
  scale: 1 1;
}

.reveal__beat {
  display: flex;
  width: min(12rem, 38vw);
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  opacity: 0;
  animation: fade-up 1s 1.45s ease-out forwards;
}

.reveal__beat span {
  width: 2px;
  height: 4px;
  background: rgb(246 243 237 / 32%);
  animation: beat var(--hit-cycle) var(--hit-delay) ease-out infinite;
}

.reveal__beat span:nth-child(2) {
  animation-delay: calc(var(--hit-delay) + 0.06s);
}

.reveal__beat span:nth-child(3) {
  background: #f24a1d;
  animation-delay: calc(var(--hit-delay) + 0.12s);
}

.reveal__beat span:nth-child(4) {
  animation-delay: calc(var(--hit-delay) + 0.18s);
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgb(246 243 237 / 34%);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 1s 1.75s ease-out forwards;
}

.footer__rule {
  width: 2.5rem;
  height: 1px;
  background: rgb(246 243 237 / 18%);
}

@keyframes title-in {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scaleY(1);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ring-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes line-in {
  to {
    opacity: 1;
  }
}

@keyframes glow-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shell-hit {
  0%,
  1%,
  100% {
    filter: blur(0);
    transform: translate(0) rotate(0) scale(1);
  }
  1.7% {
    filter: blur(1.8px) contrast(1.12);
    transform: translate(-10px, 4px) rotate(-0.2deg) scale(1.055);
  }
  2.7% {
    filter: blur(7px) contrast(1.32) brightness(1.2);
    transform: translate(16px, -8px) rotate(0.34deg) scale(1.22);
  }
  3.8% {
    filter: blur(4px) contrast(1.2);
    transform: translate(-12px, 6px) rotate(-0.24deg) scale(1.14);
  }
  5% {
    filter: blur(1.8px) contrast(1.1);
    transform: translate(7px, -3px) rotate(0.12deg) scale(1.08);
  }
  7% {
    filter: blur(0.5px);
    transform: translate(-3px, 1.5px) scale(1.03);
  }
  12% {
    filter: blur(0);
    transform: translate(0.5px, -0.25px) rotate(-0.01deg) scale(1.004);
  }
  35% {
    filter: blur(0.08px);
    transform: translate(-1.25px, -0.75px) rotate(-0.025deg) scale(1.002);
  }
  62% {
    filter: blur(0);
    transform: translate(1px, 0.5px) rotate(0.02deg) scale(1.004);
  }
  84% {
    filter: blur(0.06px);
    transform: translate(-0.5px, 0.75px) rotate(-0.012deg) scale(1.001);
  }
}

@keyframes frame-flash {
  0%,
  1%,
  13%,
  100% {
    opacity: 0;
  }
  2% {
    opacity: 1.65;
  }
  4% {
    opacity: 0.55;
  }
}

@keyframes impact-glow {
  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.96);
  }
  2% {
    opacity: 1.35;
    transform: translate(-50%, -50%) scale(1.18);
  }
  12% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.02);
  }
  45% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.96);
  }
  68% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1.015);
  }
  86% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@keyframes ring-impact {
  0%,
  100% {
    filter: brightness(1);
  }
  2% {
    filter: brightness(2.8) drop-shadow(0 0 0.7rem rgb(242 74 29 / 35%));
  }
  16% {
    filter: brightness(1.1);
  }
}

@keyframes impact-core {
  0%,
  1%,
  15%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  2% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.45);
  }
  5% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.25);
  }
  11% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.8);
  }
}

@keyframes impact-burst {
  0%,
  1%,
  16%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25) rotate(-4deg);
  }
  2% {
    opacity: 0.8;
  }
  11% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18) rotate(2deg);
  }
}

@keyframes shockwave {
  0%,
  1%,
  22%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.05);
  }
  2% {
    opacity: 0.9;
  }
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.25);
  }
}

@keyframes cross-flash {
  0%,
  1%,
  11%,
  100% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  5% {
    opacity: 0.42;
  }
}

@keyframes spark {
  0%,
  1%,
  12%,
  100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) scaleX(0.1);
  }
  2% {
    opacity: 0.9;
    transform: rotate(var(--spark-angle)) scaleX(0.35);
  }
  7% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(clamp(3rem, 7vw, 7rem)) scaleX(1);
  }
}

@keyframes content-hit {
  0%,
  1%,
  100% {
    transform: translate(0) scale(1);
  }
  2% {
    transform: translateY(2px) scale(0.975);
  }
  3.5% {
    transform: translateY(-2px) scale(1.022);
  }
  6% {
    transform: translateY(0) scale(1.006);
  }
  22% {
    transform: translate(-0.75px, -1px) scale(1.001);
  }
  52% {
    transform: translate(0.75px, 0.5px) scale(1.002);
  }
  78% {
    transform: translate(-0.4px, 0.9px) scale(0.999);
  }
}

@keyframes title-hit {
  0%,
  1%,
  100% {
    filter: brightness(1);
    transform: translate(0) scale(1);
  }
  2% {
    filter:
      brightness(2)
      drop-shadow(8px 0 0 rgb(242 74 29 / 58%))
      drop-shadow(-6px 0 0 rgb(146 224 255 / 28%))
      drop-shadow(0 0 2.8rem rgb(242 74 29 / 72%));
  }
  4% {
    filter:
      brightness(1.35)
      drop-shadow(-3px 0 0 rgb(242 74 29 / 32%))
      drop-shadow(2px 0 0 rgb(146 224 255 / 16%));
  }
  16% {
    filter: brightness(1.01);
    transform: translate(-0.5px, -0.75px) scale(1.001);
  }
  48% {
    filter: brightness(0.98);
    transform: translate(0.8px, 0.35px) scale(0.999);
  }
  76% {
    filter: brightness(1.02);
    transform: translate(-0.35px, 0.8px) scale(1.0015);
  }
}

@keyframes logo-hit {
  0%,
  1%,
  100% {
    filter: brightness(1);
    transform: translate(0) rotate(0);
  }
  2% {
    filter: brightness(1.45) drop-shadow(0 0 0.8rem rgb(242 74 29 / 30%));
  }
  10% {
    filter: brightness(1.02);
    transform: translate(-0.5px, -0.5px) rotate(-0.02deg);
  }
  38% {
    filter: brightness(0.99);
    transform: translate(-1px, 1px) rotate(-0.08deg);
  }
  68% {
    filter: brightness(1.02);
    transform: translate(1px, -1.25px) rotate(0.07deg);
  }
  86% {
    filter: brightness(1);
    transform: translate(0.25px, 0.75px) rotate(-0.025deg);
  }
}

@keyframes beam-drift {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dust-drift {
  to {
    transform: translate3d(2%, -3%, 0) scale(1.04);
  }
}

@keyframes grain-shift {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(3%, -2%);
  }
  50% {
    transform: translate(-2%, 3%);
  }
  75% {
    transform: translate(2%, 2%);
  }
}

@keyframes field-glitch {
  0%,
  1%,
  6%,
  43%,
  45.5%,
  71%,
  73%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  2% {
    opacity: 0.82;
    transform: translate(8px, -3px) scaleX(1.015);
  }
  3% {
    opacity: 0.42;
    transform: translate(-12px, 2px) scaleX(0.99);
  }
  4.5% {
    opacity: 0.18;
    transform: translate(3px, 0);
  }
  44% {
    opacity: 0.12;
    transform: translate(-2px, 1px);
  }
  45% {
    opacity: 0.06;
    transform: translate(1px, 0);
  }
  72% {
    opacity: 0.1;
    transform: translate(2px, -1px);
  }
}

@keyframes text-glitch-red {
  0%,
  1%,
  6%,
  43%,
  45%,
  71%,
  73%,
  100% {
    clip-path: inset(0);
    opacity: 0;
    transform: translate(0);
  }
  2% {
    clip-path: inset(8% 0 62% 0);
    opacity: 0.9;
    transform: translate(11px, -2px);
  }
  3% {
    clip-path: inset(48% 0 18% 0);
    opacity: 0.68;
    transform: translate(-8px, 1px);
  }
  4.5% {
    clip-path: inset(72% 0 4% 0);
    opacity: 0.35;
    transform: translate(5px, 0);
  }
  44% {
    clip-path: inset(24% 0 58% 0);
    opacity: 0.18;
    transform: translate(2px, 0);
  }
  72% {
    clip-path: inset(65% 0 12% 0);
    opacity: 0.14;
    transform: translate(-2px, 0);
  }
}

@keyframes text-glitch-cyan {
  0%,
  1%,
  6%,
  43%,
  45%,
  71%,
  73%,
  100% {
    clip-path: inset(0);
    opacity: 0;
    transform: translate(0);
  }
  2% {
    clip-path: inset(58% 0 10% 0);
    opacity: 0.72;
    transform: translate(-10px, 2px);
  }
  3.2% {
    clip-path: inset(16% 0 66% 0);
    opacity: 0.56;
    transform: translate(7px, -1px);
  }
  4.8% {
    clip-path: inset(38% 0 42% 0);
    opacity: 0.26;
    transform: translate(-4px, 0);
  }
  44% {
    clip-path: inset(70% 0 8% 0);
    opacity: 0.14;
    transform: translate(-2px, 0);
  }
  72% {
    clip-path: inset(18% 0 68% 0);
    opacity: 0.12;
    transform: translate(2px, 0);
  }
}

@keyframes idle-glitch-red {
  0%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  18% {
    opacity: 0.72;
    transform: translate(var(--idle-red-x, 6px), -1px);
  }
  55% {
    opacity: 0.42;
    transform: translate(var(--idle-red-return-x, -3px), 1px);
  }
}

@keyframes idle-glitch-cyan {
  0%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  24% {
    opacity: 0.54;
    transform: translate(var(--idle-cyan-x, -5px), 1px);
  }
  68% {
    opacity: 0.3;
    transform: translate(var(--idle-cyan-return-x, 2px), -1px);
  }
}

@keyframes signal {
  0%,
  1%,
  100% {
    box-shadow: 0 0 0 0 rgb(242 74 29 / 45%);
  }
  2% {
    box-shadow: 0 0 0 0.15rem rgb(242 74 29 / 58%);
  }
  18% {
    box-shadow: 0 0 0 0.55rem transparent;
  }
  25% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes beat {
  0%,
  1%,
  13%,
  100% {
    height: 4px;
    opacity: 0.42;
  }
  2% {
    height: 22px;
    opacity: 1;
  }
  5% {
    height: 9px;
    opacity: 0.68;
  }
}

@media (max-width: 40rem) {
  .teaser {
    padding: 1.4rem;
  }

  .brand__logo {
    width: 10.5rem;
  }

  .reveal__eyebrow {
    letter-spacing: 0.24em;
  }

  .reveal__title {
    font-size: clamp(5rem, 24vw, 6.8rem);
    line-height: 0.72;
  }

  .reveal__title span:last-child {
    scale: 1.08 1;
  }

  .atmosphere__ring--outer {
    width: 118vw;
  }

  .atmosphere__ring--inner {
    width: 80vw;
  }

  .atmosphere__mesh {
    background-size: 2rem 2rem;
    transform: perspective(30rem) rotateX(68deg) scale(1.8) translateY(9%);
  }

  .impact__wave {
    width: 46vw;
  }
}

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