/* ---------- self-hosted fonts (no third-party requests) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("assets/fonts/jetbrainsmono-var-latin.woff2") format("woff2");
}

:root {
  --cyan: #7fe7ff;
  --gold: #ffd98a;
  --ink: #eaf6ff;
  --hud: rgba(234, 246, 255, 0.92);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: #02060c;
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  overflow-x: hidden;
}

/* ---------- Preload gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(120% 120% at 50% 0%, #0a2c46 0%, #041220 55%, #02060c 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s ease, visibility 0.9s;
}
#gate.hidden { opacity: 0; visibility: hidden; }
.gate-inner { text-align: center; width: min(420px, 80vw); }
.gate-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800; letter-spacing: 0.12em;
}
.gate-title span { font-weight: 200; font-style: italic; color: var(--cyan); }
.gate-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.5em; color: var(--cyan);
  margin: 18px 0 26px; opacity: 0.8;
}
.gate-bar {
  height: 2px; background: rgba(127, 231, 255, 0.15);
  border-radius: 2px; overflow: hidden;
}
#gate-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), #fff);
  transition: width 0.2s ease;
}
.gate-pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; margin-top: 12px; color: rgba(234,246,255,0.6);
}

/* ---------- Film layers ---------- */
#film { position: fixed; inset: 0; z-index: 1; background: #02060c; }
#screen { position: absolute; inset: 0; width: 100%; height: 100%; }
#loopvid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
}
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(1,4,9,0.55) 100%);
}

/* ---------- HUD ---------- */
#hud {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  color: var(--hud);
  transition: opacity 0.4s ease;
}
#hud.dead .hud-corner { opacity: 0; }
#hud.gone { opacity: 0; }
.hud-corner {
  position: absolute; transition: opacity 0.3s;
  text-shadow: 0 0 12px rgba(127,231,255,0.35), 0 1px 2px rgba(0,0,0,0.6);
}
.hud-tl { top: 28px; left: 32px; }
.hud-tr { top: 28px; right: 32px; text-align: right; }
.hud-bl { bottom: 28px; left: 32px; }
.hud-br { bottom: 28px; right: 32px; text-align: right; }
.hud-label {
  font-size: 10px; letter-spacing: 0.42em; font-weight: 300;
  color: var(--cyan); opacity: 0.85; margin-bottom: 4px;
}
.hud-value { font-size: clamp(18px, 2.4vw, 26px); font-weight: 400; }
.hud-value small {
  font-size: 0.5em; font-weight: 300; margin-left: 4px;
  opacity: 0.7; letter-spacing: 0.1em;
}

#hud.glitch .hud-corner {
  animation: glitch 0.09s steps(2) 3;
}
@keyframes glitch {
  0% { transform: translate(0, 0) skewX(0); filter: none; }
  33% { transform: translate(-6px, 2px) skewX(-8deg); filter: hue-rotate(90deg) saturate(3); }
  66% { transform: translate(4px, -3px) skewX(6deg); filter: invert(0.8); }
  100% { transform: translate(0, 0); }
}

#signal-lost {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 1.1s ease;
}
#signal-lost.on { transition: opacity 0.25s ease; }
#signal-lost span {
  font-size: clamp(14px, 2.4vw, 28px);
  letter-spacing: 0.55em; padding-left: 0.55em; font-weight: 300;
  color: #ff5c5c;
  text-shadow: 0 0 24px rgba(255, 60, 60, 0.5);
  animation: blink 1.1s steps(1) infinite;
}
#signal-lost.on { opacity: 1; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- Sound toggle ---------- */
#sound-toggle {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 20; cursor: pointer;
  background: none; border: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.4em; text-indent: 0.4em;
  color: rgba(234, 246, 255, 0.5);
  padding: 8px 14px;
  transition: color 0.3s;
}
#sound-toggle:hover { color: var(--cyan); }
#sound-toggle.on { color: var(--cyan); text-shadow: 0 0 12px rgba(127,231,255,0.4); }

#sound-toggle { display: inline-flex; align-items: center; gap: 8px; }
.spk {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.spk .spk-body { fill: currentColor; stroke: none; }
.spk .spk-w1, .spk .spk-w2 { display: none; }
.spk .spk-x { display: block; }
#sound-toggle.on .spk .spk-w1, #sound-toggle.on .spk .spk-w2 { display: block; }
#sound-toggle.on .spk .spk-x { display: none; }

/* ---------- Story panels ---------- */
#story { position: relative; z-index: 5; }
.panel { height: 240vh; position: relative; }
.panel-tall { height: 320vh; }
#p-hero { height: 150vh; }

.copy {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(24px, 7vw, 120px);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.copy.vis { opacity: 1; transform: translateY(0); }
.og-capture .copy { transition: none !important; }
.og-capture #gate.hidden { display: none !important; }
.copy-center { align-items: center; text-align: center; }
.copy-left { align-items: flex-start; text-align: left; max-width: 720px; }
.copy-right { align-items: flex-end; text-align: right; margin-left: auto; }

.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.5em;
  color: var(--cyan); margin-bottom: 18px;
}
.kicker-glow { text-shadow: 0 0 18px rgba(127,231,255,0.6); }

.copy h2 {
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 750; line-height: 1.04; letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(0, 10, 20, 0.55);
}
.copy p {
  margin-top: 20px; max-width: 46ch;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 350; line-height: 1.65;
  color: rgba(234, 246, 255, 0.88);
  text-shadow: 0 1px 14px rgba(0, 10, 20, 0.7);
}
.copy-right p { margin-left: auto; }

.hero-title {
  font-size: clamp(34px, 10vw, 150px);
  font-weight: 850; letter-spacing: 0.04em; line-height: 0.95;
  text-shadow: 0 4px 60px rgba(0, 20, 35, 0.6);
}
.hero-title em {
  font-weight: 150; font-style: italic;
  color: var(--gold); padding: 0 0.12em;
}
.hero-sub {
  margin-top: 26px; font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 350; color: rgba(234,246,255,0.92);
}
.scroll-cue {
  margin-top: 60px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.45em; color: var(--cyan);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cue-mouse {
  width: 30px; height: 30px;
  fill: none; stroke: var(--cyan); stroke-width: 2;
  stroke-miterlimit: 10; overflow: visible;
  animation: cue-tint 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(127, 231, 255, 0.35));
}
.cue-wheel {
  stroke-linecap: round;
  animation: cue-wheel 1.8s ease-in-out infinite;
}
@keyframes cue-wheel {
  0%   { transform: translateY(0);   opacity: 0; }
  25%  { opacity: 1; }
  70%  { transform: translateY(8px); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes cue-tint {
  0%, 100% { stroke: var(--cyan); }
  50% { stroke: #ffffff; }
}

/* ---------- CTA ---------- */
.cta-title {
  font-size: clamp(36px, 5.4vw, 76px) !important;
}
.cta-sub { text-align: center; }
.cta-btn {
  pointer-events: auto;
  margin-top: 38px; display: inline-block;
  padding: 18px 44px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.35em; text-indent: 0.35em;
  color: #04121f; background: linear-gradient(135deg, #bdf1ff, #7fe7ff);
  border-radius: 999px; text-decoration: none; font-weight: 500;
  box-shadow: 0 0 40px rgba(127, 231, 255, 0.35), inset 0 0 0 1px rgba(255,255,255,0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 70px rgba(127, 231, 255, 0.55), inset 0 0 0 1px rgba(255,255,255,0.7);
}
.cta-fine {
  margin-top: 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(234, 246, 255, 0.45);
}

.footer-link {
  pointer-events: auto;
  margin-top: 64px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid rgba(127, 231, 255, 0.35);
  padding-bottom: 6px;
  transition: color 0.25s, border-color 0.25s, text-shadow 0.25s;
}
.footer-link:hover {
  color: #fff; border-color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 18px rgba(127, 231, 255, 0.8);
}
.footer-sub {
  margin-top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.22em;
  color: rgba(234, 246, 255, 0.35);
}
.ai-note { margin-top: 18px; max-width: 60ch; line-height: 1.8; }