@font-face {
  font-family: "DSEG7";
  src: url("/assets/fonts/DSEG7Classic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  color-scheme: dark;
  --background: #030b18;
  --green: #49ff8e;
  --text: #e4f5ff;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--background); }
body { color: var(--text); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--green); color: var(--background); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.world { position: fixed; inset: 0; z-index: 0; isolation: isolate; contain: paint; overflow: hidden; pointer-events: none; background: var(--background); }
.city { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.city-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 65%, #00ffa858, transparent 34%), radial-gradient(ellipse at 86% 68%, #ff24c75e, transparent 36%), radial-gradient(ellipse at 58% 95%, #14ddff4d, transparent 42%); mix-blend-mode: screen; opacity: .22; animation: city-pulse 9s ease-in-out infinite alternate; }
#matrix { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 41%, #030b183d 0%, transparent 52%), linear-gradient(0deg, #020712a8, transparent 17%, transparent 88%, #02071224); }
.scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #02051009 3px 4px); }

@keyframes city-pulse {
  0% { opacity: .16; }
  48% { opacity: .36; }
  100% { opacity: .24; }
}

.shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100svh; max-width: 1800px; margin: 0 auto; padding-inline: clamp(24px, 4.2vw, 72px); }
main { flex: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 90px 0 140px; }
.signal { margin: 0; color: #d9ecf3; font: 10px/1.5 var(--mono); letter-spacing: 5px; text-shadow: 0 1px 12px #030b18; }
h1 { font-family: "Michroma", Arial, sans-serif; font-size: clamp(32px, 4.2vw, 68px); font-weight: 400; line-height: 1.25; letter-spacing: -.035em; margin: 26px 0 0; text-shadow: 0 0 24px #a4e9ff38, 0 3px 20px #030b1859; }
h1 em { font-style: normal; color: transparent; background: linear-gradient(110deg, #3a9b64, #24ff66 46%, #35e785); background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 30px #20ff7b24; }
.title-dot { color: #d5f4ff; }

.countdown-panel { width: min(100%, 800px); margin-top: 38px; contain: layout style; }
.countdown { isolation: isolate; display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; align-items: start; gap: clamp(6px, 1vw, 16px); opacity: .65; }
.time-unit { min-width: 0; }
.digits { --digit-glow: 0 0 4px #c7ffffad, 0 0 18px #5bedff80, 0 0 42px #36e6ff4d; position: relative; display: block; font: 400 clamp(40px, 4.6vw, 66px)/1.2 "DSEG7", var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .025em; padding-left: .025em; color: #d6ffff; text-shadow: var(--digit-glow); }
.time-unit:first-child .digits { color: #c6ffe7; }
.seconds .digits { --digit-glow: 0 0 4px #f7eaffad, 0 0 18px #c7a5ff80, 0 0 42px #9c6bff4d; color: #e4ddff; }
.no-script { color: var(--green); font: 12px/1.7 var(--mono); margin: 22px auto 0; max-width: 440px; }

/* Animate only the four digit runs. No masks, transforms or visibility changes. */
.countdown.is-glitching > .time-unit > .digits { animation: digit-signal 880ms steps(1, end) both; }
.countdown.is-glitching > .time-unit:nth-child(3) > .digits { animation-delay: -45ms; }
.countdown.is-glitching > .time-unit:nth-child(4) > .digits { animation-delay: -85ms; }

@keyframes digit-signal {
  0%, 13%, 33%, 52%, 74%, 100% { text-shadow: var(--digit-glow); }
  8%, 46% { text-shadow: -3px 0 #61ffb8cc, 3px 1px #ff70e6b3, 0 0 18px #5bedff80; }
  25%, 63% { text-shadow: 3px 0 #5bedffcc, -2px -1px #ff70e699, 0 0 24px #5bedff66; }
  88% { text-shadow: -1px 0 #61ffb899, 2px 0 #c7a5ff99, 0 0 18px #5bedff80; }
}

.footer { display: flex; justify-content: center; align-items: center; min-height: 72px; padding-block: 16px max(16px, env(safe-area-inset-bottom)); }
.footer-note { margin: 0; color: #c0d4e0; font: 8px/1.5 var(--mono); letter-spacing: 3px; text-shadow: 0 1px 8px #030b18; }

@media (max-width: 760px) {
  .city { object-position: 76% center; }
  main { padding: 70px 0 120px; }
  h1 { font-size: clamp(32px, 5.8vw, 48px); }
  .countdown-panel { margin-top: 34px; }
  .countdown { gap: 9px; }
  .digits { font-size: clamp(36px, 8.4vw, 60px); }
}
@media (max-width: 480px) {
  .shell { padding-inline: 22px; }
  .city { object-position: 80% center; }
  main { padding: 70px 0 130px; }
  .signal { font-size: 8px; letter-spacing: 2.8px; }
  h1 { font-size: clamp(22px, 7.2vw, 32px); margin-top: 24px; }
  .countdown-panel { margin-top: 32px; }
  .countdown { gap: 5px; }
  .digits { font-size: clamp(27px, 8.6vw, 40px); }
  .footer { min-height: 64px; }
  .footer-note { font-size: 6px; letter-spacing: 1.9px; }
  .vignette { background: radial-gradient(ellipse at 50% 39%, #030b1880, #030b181a 55%, transparent 75%), linear-gradient(0deg, #020712cc, transparent 22%, transparent 85%, #0207121a); }
}

@media (prefers-reduced-motion: reduce) {
  .city-glow, .countdown.is-glitching > .time-unit > .digits { animation: none; }
}