:root {
  color-scheme: dark;
  --black: #010304;
  --white: #f4fbff;
  --mist: rgba(220, 247, 255, 0.78);
  --green: #7dffb0;
  --cyan: #7cecff;
  --red: #ff3f68;
  --blue: #2d7dff;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

body {
  min-height: 100vh;
  overflow: hidden;
  color: var(--white);
  font-family: var(--mono);
  letter-spacing: 0;
}

.filter-bank {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
}

.crt-stage {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 50%, rgba(85, 126, 130, 0.22), transparent 31rem),
    #020404;
  animation: crt-power-on 1800ms steps(32, end) both;
  transform-origin: center;
}

.forest-video {
  position: absolute;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.28) contrast(1.24) brightness(0.62) saturate(0.72);
  transform: scale(1.05);
}

.video-overlay {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.46) 52%, rgba(0, 0, 0, 0.72) 100%),
    radial-gradient(circle at 17% 45%, rgba(9, 45, 49, 0.38), transparent 31rem),
    radial-gradient(circle at 67% 72%, rgba(0, 0, 0, 0.18), transparent 28rem),
    rgba(0, 0, 0, 0.36);
}

.scanlines {
  position: absolute;
  inset: -20%;
  z-index: 4;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1) 0,
      rgba(255, 255, 255, 0.1) 1px,
      rgba(0, 0, 0, 0.32) 2px,
      rgba(0, 0, 0, 0.32) 5px
    );
  mix-blend-mode: soft-light;
  opacity: 0.48;
  animation: scanline-roll 7s linear infinite;
}

.signal-noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 22% 31%, rgba(255, 255, 255, 0.95) 0 0.035rem, transparent 0.04rem),
    radial-gradient(circle at 78% 11%, rgba(124, 236, 255, 0.55) 0 0.03rem, transparent 0.035rem),
    radial-gradient(circle at 49% 64%, rgba(255, 255, 255, 0.45) 0 0.03rem, transparent 0.035rem);
  background-size: 0.32rem 0.32rem, 0.52rem 0.52rem, 0.74rem 0.74rem;
  animation: static-snap 850ms steps(2, end) infinite;
}

.signal-loss {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 30%,
      rgba(124, 236, 255, 0.22) 32%,
      rgba(255, 63, 104, 0.18) 34%,
      transparent 36%,
      transparent 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0 1px,
      transparent 1px 7px
    );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18%);
}

.crt-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.56)),
    radial-gradient(ellipse at center, transparent 46%, rgba(0, 0, 0, 0.72) 100%);
  box-shadow:
    inset 0 0 6rem rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.language-toggle {
  position: fixed;
  top: clamp(1.1rem, 3.2vw, 3.5rem);
  right: clamp(1rem, 3.2vw, 3.5rem);
  z-index: 14;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(220, 247, 255, 0.72);
  font-size: clamp(0.76rem, 1vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.language-option {
  border: 0;
  background: transparent;
  color: rgba(220, 247, 255, 0.68);
  padding: 0.25rem 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-shadow:
    0.08em 0 0 rgba(255, 63, 104, 0.14),
    -0.08em 0 0 rgba(124, 236, 255, 0.16);
  transition:
    color 180ms var(--ease-out),
    text-shadow 180ms var(--ease-out);
}

.language-option:hover,
.language-option:focus-visible,
.language-option.is-active {
  color: var(--green);
  outline: 0;
  text-shadow:
    0.08em 0 0 rgba(255, 63, 104, 0.42),
    -0.08em 0 0 rgba(124, 236, 255, 0.46),
    0 0 1rem rgba(125, 255, 176, 0.42);
}

.content-grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(1rem, 0.7fr) minmax(20rem, 54rem) minmax(18rem, 38rem) minmax(1rem, 0.4fr);
  grid-template-rows: minmax(4rem, 13vh) 1fr minmax(5rem, 15vh);
  gap: clamp(1rem, 2vw, 2.4rem);
  padding: clamp(1.1rem, 3.2vw, 3.5rem);
}

.brand-lockup {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: start;
}

.agency {
  display: inline-block;
  margin: 0;
  color: var(--green);
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-copy {
  grid-column: 2 / 3;
  grid-row: 2;
  align-self: center;
  max-width: 58rem;
}

.slogan {
  position: relative;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(4rem, 8.7vw, 9.5rem);
  font-weight: 700;
  line-height: 0.82;
  text-wrap: balance;
  text-transform: uppercase;
  text-shadow:
    0.035em 0 0 rgba(255, 63, 104, 0.58),
    -0.03em 0 0 rgba(45, 125, 255, 0.62),
    0 0 1.25rem rgba(244, 251, 255, 0.2);
}

.launch-line {
  position: relative;
  display: inline-block;
  margin: clamp(1.5rem, 3vw, 2.7rem) 0 0;
  border-bottom: 1px solid rgba(125, 255, 176, 0.52);
  color: var(--green);
  font-size: clamp(0.82rem, 1.4vw, 1.18rem);
  font-weight: 500;
  line-height: 1.7;
  text-transform: uppercase;
}

.countdown {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  position: relative;
  align-self: center;
  justify-self: stretch;
  min-height: clamp(30rem, 62vh, 43rem);
}

.time-unit {
  position: absolute;
  display: grid;
  width: max-content;
  color: var(--white);
  filter: url("#liquid-distortion");
}

.time-unit strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.82;
  text-shadow:
    0.045em 0 0 rgba(255, 63, 104, 0.75),
    -0.04em 0 0 rgba(124, 236, 255, 0.7),
    0 0 1rem rgba(244, 251, 255, 0.22);
  animation: liquid-flicker 3.8s steps(2, end) infinite;
}

.time-unit span {
  color: var(--green);
  font-size: clamp(0.74rem, 1.15vw, 1.03rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.time-unit span::after {
  content: "_";
}

.time-days {
  top: 1%;
  right: 6%;
}

.time-days strong {
  font-size: clamp(8rem, 18vw, 17rem);
}

.time-days span {
  justify-self: end;
  margin-top: -0.2rem;
  margin-right: 0.4rem;
}

.time-hours {
  top: 43%;
  left: 12%;
}

.time-hours strong {
  font-size: clamp(3.4rem, 7vw, 6.8rem);
  font-weight: 400;
}

.time-hours span {
  justify-self: end;
  margin-top: -0.4rem;
  transform: translateX(72%);
}

.time-minutes {
  top: 58%;
  right: 3%;
}

.time-minutes strong {
  font-size: clamp(4.5rem, 9.2vw, 8.4rem);
  font-weight: 500;
}

.time-minutes span {
  justify-self: start;
  margin-left: 100%;
  margin-top: -1.3rem;
}

.time-seconds {
  right: 18%;
  bottom: 3%;
}

.time-seconds strong {
  font-size: clamp(2.8rem, 6.1vw, 5.8rem);
  font-weight: 300;
}

.time-seconds span {
  justify-self: end;
  margin-top: -0.25rem;
  transform: translateX(78%);
}

.time-unit.tick strong {
  animation:
    tick-warp 420ms steps(3, end),
    liquid-flicker 3.8s steps(2, end) infinite;
}

.glitch-heavy,
.glitch-lite {
  position: relative;
}

.glitch-heavy::before,
.glitch-heavy::after,
.glitch-lite::before,
.glitch-lite::after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  content: attr(data-text);
  pointer-events: none;
}

.glitch-heavy::before {
  color: var(--red);
  transform: translate(0.035em, 0);
  clip-path: inset(0 0 58% 0);
  mix-blend-mode: screen;
  animation: glitch-slice-a 4.7s infinite steps(1, end);
}

.glitch-heavy::after {
  color: var(--cyan);
  transform: translate(-0.035em, 0);
  clip-path: inset(48% 0 0 0);
  mix-blend-mode: screen;
  animation: glitch-slice-b 5.9s infinite steps(1, end);
}

.glitch-lite::before {
  color: var(--red);
  transform: translate(0.07rem, 0);
  opacity: 0.48;
  animation: micro-jitter 6s infinite steps(1, end);
}

.glitch-lite::after {
  color: var(--cyan);
  transform: translate(-0.06rem, 0);
  opacity: 0.42;
  animation: micro-jitter 7.2s infinite steps(1, end) reverse;
}

.boot-fragment {
  opacity: 0;
  transform: translateY(1rem) skewX(-1deg);
  animation: boot-reveal 1200ms var(--ease-out) forwards;
}

.brand-lockup {
  animation-delay: 1150ms;
}

.hero-copy {
  animation-delay: 1350ms;
}

.countdown {
  animation-delay: 1600ms;
}

.language-toggle {
  animation-delay: 1250ms;
}

.heavy-glitch .signal-loss {
  animation: signal-loss-sweep 760ms steps(5, end);
}

.heavy-glitch .scanlines {
  opacity: 0.86;
  animation-duration: 580ms;
}

.heavy-glitch .signal-noise {
  opacity: 0.56;
  animation-duration: 120ms;
}

.heavy-glitch .forest-video {
  animation: video-tear 760ms steps(3, end);
}

.heavy-glitch .glitch-heavy,
.heavy-glitch .glitch-lite,
.heavy-glitch .time-unit {
  animation: signal-text-crash 760ms steps(2, end);
}

.heavy-glitch .language-option {
  text-shadow:
    0.22em 0 0 rgba(255, 63, 104, 0.82),
    -0.22em 0 0 rgba(124, 236, 255, 0.82),
    0 0 1.5rem rgba(125, 255, 176, 0.42);
}

.heavy-glitch .glitch-heavy::before,
.heavy-glitch .glitch-lite::before {
  transform: translate(0.19em, -0.04em);
  opacity: 0.9;
  clip-path: inset(8% 0 28% 0);
}

.heavy-glitch .glitch-heavy::after,
.heavy-glitch .glitch-lite::after {
  transform: translate(-0.2em, 0.05em);
  opacity: 0.86;
  clip-path: inset(42% 0 6% 0);
}

.heavy-glitch .time-unit strong,
.heavy-glitch .slogan {
  text-shadow:
    0.12em 0 0 rgba(255, 63, 104, 0.92),
    -0.11em 0 0 rgba(124, 236, 255, 0.92),
    0 0 2rem rgba(244, 251, 255, 0.54);
}

@keyframes crt-power-on {
  0% {
    filter: brightness(0);
    transform: scaleY(0.012);
  }
  10% {
    filter: brightness(8);
    transform: scaleY(0.018);
  }
  28% {
    filter: brightness(2.6) contrast(1.8);
    transform: scaleY(0.22);
  }
  52% {
    filter: brightness(1.5) contrast(1.35);
    transform: scaleY(1.04);
  }
  67% {
    filter: brightness(0.7) contrast(1.9);
    transform: scaleY(0.93);
  }
  100% {
    filter: brightness(1) contrast(1);
    transform: scaleY(1);
  }
}

@keyframes signal-loss-sweep {
  0% {
    opacity: 0;
    transform: translateY(-20%) skewX(0deg);
  }
  18% {
    opacity: 0.95;
    transform: translateY(3%) skewX(-12deg);
  }
  38% {
    opacity: 0.72;
    transform: translateY(34%) skewX(8deg);
  }
  58% {
    opacity: 1;
    transform: translateY(57%) skewX(-18deg);
  }
  76% {
    opacity: 0.54;
    transform: translateY(81%) skewX(6deg);
  }
  100% {
    opacity: 0;
    transform: translateY(120%) skewX(0deg);
  }
}

@keyframes video-tear {
  0%,
  100% {
    transform: scale(1.05) translate(0, 0);
    filter: grayscale(0.28) contrast(1.24) brightness(0.62) saturate(0.72);
  }
  20% {
    transform: scale(1.08) translate(-1.4rem, 0.3rem);
    filter: grayscale(0.1) contrast(2.1) brightness(1.12) saturate(0.2);
  }
  42% {
    transform: scale(1.06) translate(1.1rem, -0.4rem);
    filter: grayscale(0.7) contrast(2.4) brightness(0.35) saturate(1.4);
  }
  62% {
    transform: scale(1.1) translate(-0.5rem, 0.8rem);
    filter: grayscale(0.2) contrast(1.9) brightness(0.9) saturate(0.4);
  }
}

@keyframes signal-text-crash {
  0%,
  100% {
    transform: translate(0, 0) skewX(0deg);
    filter: none;
  }
  16% {
    transform: translate(-0.45rem, 0.16rem) skewX(-9deg);
    filter: blur(0.03rem);
  }
  33% {
    transform: translate(0.75rem, -0.1rem) skewX(14deg);
    filter: contrast(2.4);
  }
  48% {
    transform: translate(-0.95rem, 0.3rem) skewX(-18deg);
    filter: blur(0.06rem) contrast(2.8);
  }
  66% {
    transform: translate(0.4rem, -0.18rem) skewX(8deg);
    filter: contrast(1.7);
  }
}

@keyframes boot-reveal {
  0% {
    opacity: 0;
    transform: translateY(1.4rem) skewX(-2deg);
    filter: blur(0.3rem);
  }
  36% {
    opacity: 1;
    transform: translateY(-0.2rem) skewX(6deg);
    filter: blur(0);
  }
  42% {
    transform: translateX(-0.8rem) skewX(-12deg);
  }
  46% {
    transform: translateX(0.35rem) skewX(4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) skewX(0);
    filter: blur(0);
  }
}

@keyframes scanline-roll {
  to {
    transform: translateY(10%);
  }
}

@keyframes static-snap {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-0.22rem, 0.12rem);
  }
}

@keyframes glitch-slice-a {
  0%,
  82%,
  100% {
    clip-path: inset(0 0 58% 0);
    transform: translate(0.035em, 0);
  }
  83% {
    clip-path: inset(18% 0 70% 0);
    transform: translate(-0.08em, -0.015em);
  }
  84% {
    clip-path: inset(66% 0 18% 0);
    transform: translate(0.12em, 0.02em);
  }
  85% {
    clip-path: inset(9% 0 82% 0);
    transform: translate(0.02em, 0);
  }
}

@keyframes glitch-slice-b {
  0%,
  74%,
  100% {
    clip-path: inset(48% 0 0 0);
    transform: translate(-0.035em, 0);
  }
  75% {
    clip-path: inset(0 0 84% 0);
    transform: translate(0.1em, -0.02em);
  }
  76% {
    clip-path: inset(42% 0 42% 0);
    transform: translate(-0.13em, 0.025em);
  }
  77% {
    clip-path: inset(78% 0 6% 0);
    transform: translate(-0.03em, 0);
  }
}

@keyframes micro-jitter {
  0%,
  88%,
  100% {
    clip-path: inset(0 0 0 0);
  }
  89% {
    clip-path: inset(12% 0 68% 0);
  }
  90% {
    clip-path: inset(73% 0 8% 0);
  }
}

@keyframes liquid-flicker {
  0%,
  100% {
    transform: skewX(0deg);
  }
  47% {
    transform: skewX(-1deg);
  }
  48% {
    transform: skewX(2deg) translateX(0.12rem);
  }
  49% {
    transform: skewX(0deg);
  }
}

@keyframes tick-warp {
  0% {
    transform: scaleX(1) translateY(0);
    filter: blur(0);
  }
  35% {
    transform: scaleX(1.12) translateY(-0.08em) skewX(9deg);
    filter: blur(0.055rem);
  }
  70% {
    transform: scaleX(0.92) translateX(-0.08em) skewX(-7deg);
  }
  100% {
    transform: scaleX(1) translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 950px) {
  body {
    overflow-y: auto;
  }

  .content-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 100svh;
    padding: 1.35rem;
  }

  .language-toggle {
    top: 1rem;
    right: 1rem;
  }

  .brand-lockup,
  .hero-copy,
  .countdown {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-copy {
    align-self: end;
    padding-top: 14vh;
  }

  .slogan {
    font-size: clamp(3rem, 16vw, 5.75rem);
  }

  .countdown {
    min-height: 21rem;
    margin-top: 1.8rem;
  }

  .time-days {
    top: 0;
    left: 0;
    right: auto;
  }

  .time-days strong {
    font-size: clamp(6rem, 32vw, 9rem);
  }

  .time-hours {
    top: 31%;
    right: 0;
    left: auto;
  }

  .time-minutes {
    top: 56%;
    left: 10%;
    right: auto;
  }

  .time-minutes span,
  .time-hours span,
  .time-seconds span {
    justify-self: start;
    margin-left: 0;
    margin-top: 0.15rem;
    transform: none;
  }

  .time-seconds {
    right: 3%;
    bottom: 0;
  }
}

@media (max-width: 520px) {
  .content-grid {
    padding: 1rem;
  }

  .agency {
    font-size: 0.82rem;
  }

  .launch-line {
    font-size: 0.72rem;
  }

  .countdown {
    min-height: 19rem;
  }

  .time-unit strong {
    text-shadow:
      0.035em 0 0 rgba(255, 63, 104, 0.65),
      -0.03em 0 0 rgba(124, 236, 255, 0.6);
  }

  .time-unit span {
    font-size: 0.68rem;
  }
}

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

  .time-unit {
    filter: none;
  }
}