/* ═══════════════════════════════════════════════════════════
   BLUE DESCENT — a scroll-scrubbed descent to 3,800 m
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibmplexmono-300-latin.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibmplexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --cyan: #38e8ff;
  --cyan-dim: rgba(56, 232, 255, .55);
  --ink: #e6f4f8;
  --ink-dim: rgba(230, 244, 248, .62);
  --hud-line: rgba(56, 232, 255, .28);
  --navy: #061421;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#track { position: relative; width: 100%; height: 12000px; }

#dive {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
  z-index: 0;
  background: var(--navy);
}

/* Depth grade laid over the film — deep navy → pure black, driven by --depth01 */
#grade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: #000;
  opacity: calc(var(--depth01, 0) * 0.28);
}

/* ══ HUD chrome ══════════════════════════════════════════ */

.hud { position: fixed; z-index: 10; pointer-events: none; }
.hud__mono {
  font-family: var(--mono); font-weight: 400;
  font-size: 10px; letter-spacing: .18em;
  color: rgba(56, 232, 255, .72);
  text-shadow: 0 1px 2px rgba(0, 4, 9, .85);
}
.hud__mono b { font-weight: 400; color: var(--ink); float: right; margin-left: 1.4em; }

.hud--top {
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  background: linear-gradient(rgba(2, 8, 14, .55), transparent);
}
.hud__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 13px; letter-spacing: .42em; color: var(--ink);
}
.hud__ring {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 12px rgba(56, 232, 255, .8);
}

/* Depth meter — left rail */
.hud--depth { left: 28px; top: 50%; transform: translateY(-50%); }
.depth__label { margin-bottom: 6px; }
.depth__value {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(38px, 5vw, 64px); line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(56, 232, 255, .35);
  font-variant-numeric: tabular-nums;
}
.depth__unit { font-size: .38em; color: var(--cyan); margin-left: 8px; letter-spacing: .2em; }
.depth__zone { margin-top: 10px; color: var(--cyan); }
.depth__gauge {
  margin-top: 16px; width: 2px; height: 26vh; min-height: 120px;
  background: var(--hud-line); position: relative;
}
.depth__gauge-fill {
  position: absolute; top: 0; left: -1px; width: 4px; height: 0%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(56, 232, 255, .9);
}

/* Telemetry — right rail */
.hud--telemetry {
  right: 28px; top: 50%; transform: translateY(-50%);
  display: grid; gap: 10px; min-width: 190px;
  border-left: 1px solid var(--hud-line);
  padding-left: 16px;
}
.hud--telemetry div { overflow: hidden; }

/* Zone index — bottom */
.hud--zones {
  bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 26px;
}
.hud--zones span { opacity: .35; transition: opacity .4s, color .4s; }
.hud--zones span.on { opacity: 1; color: var(--cyan); }

/* ══ Panels ══════════════════════════════════════════════ */

.panel {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 8vw;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  /* legibility scrim — rides the panel's own opacity, so it fades in with the text */
  background: radial-gradient(ellipse 85% 62% at 50% 50%,
    rgba(2, 9, 16, .62) 0%, rgba(2, 9, 16, .34) 46%, rgba(2, 9, 16, 0) 74%);
}
.panel.live { opacity: 1; visibility: visible; }

.panel--hero .hero__word {
  font-weight: 200; font-size: clamp(40px, 9vw, 128px);
  letter-spacing: .28em; margin-left: .28em; /* optically recenter tracked type */
  text-shadow: 0 1px 4px rgba(0, 8, 16, .75), 0 2px 44px rgba(0, 10, 20, .9);
}
.hero__tag {
  margin-top: 18px; font-weight: 300;
  font-size: clamp(16px, 2.2vw, 24px); letter-spacing: .38em;
  color: var(--ink); text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 4, 9, .9), 0 4px 26px rgba(0, 4, 9, .8);
}
.hero__load { margin-top: 42px; }
.hero__cue { margin-top: 42px; display: none; }
.hero__cue .cue__arrow { display: inline-block; animation: sink 1.6s ease-in-out infinite; }
@keyframes sink { 0%,100% { transform: translateY(0); opacity: 1 } 50% { transform: translateY(7px); opacity: .4 } }

.fact__zone {
  margin-bottom: 26px; color: var(--cyan);
  border: 1px solid var(--hud-line);
  padding: 8px 18px;
  background: rgba(2, 9, 16, .55);
}
.fact__text {
  font-weight: 300; font-size: clamp(20px, 3.2vw, 40px);
  line-height: 1.5; letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0, 4, 9, .9), 0 4px 30px rgba(0, 4, 9, .85);
}

/* Specs */
.specs {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(150px, 220px));
  gap: 1px; background: var(--hud-line);
  border: 1px solid var(--hud-line);
}
.specs li {
  background: rgba(2, 10, 16, .72);
  backdrop-filter: blur(4px);
  padding: 26px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.specs b {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(18px, 2.4vw, 30px); color: var(--cyan);
  letter-spacing: .06em;
}
.specs span {
  font-family: var(--mono); font-weight: 300;
  font-size: 10px; letter-spacing: .16em;
  color: var(--ink-dim); text-transform: uppercase;
}

/* Offer */
.offer__line {
  font-weight: 300; font-size: clamp(26px, 4.4vw, 56px);
  letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0, 4, 9, .9), 0 4px 30px rgba(0, 4, 9, .85);
}
.offer__line b { font-weight: 400; color: var(--ink); }
.offer__sub { margin-top: 26px; }

/* CTA */
.cta__head {
  font-weight: 300; font-size: clamp(24px, 3.6vw, 46px);
  letter-spacing: .04em; margin-bottom: 40px; line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 4, 9, .9), 0 4px 30px rgba(0, 4, 9, .85);
}
.panel--cta { pointer-events: none; }
.panel--cta.live .cta__form, .panel--cta.live .cta__input, .panel--cta.live .cta__btn { pointer-events: auto; }
.cta__form { display: flex; gap: 0; }
.cta__input {
  background: rgba(2, 10, 16, .7); border: 1px solid var(--hud-line);
  border-right: none; color: var(--ink);
  padding: 16px 20px; font-size: 12px; letter-spacing: .14em;
  width: min(320px, 52vw); outline: none;
}
.cta__input::placeholder { color: rgba(230, 244, 248, .3); }
.cta__input:focus { border-color: var(--cyan); }
.cta__btn {
  background: var(--cyan); color: #02222b; border: 1px solid var(--cyan);
  font-family: var(--mono); font-weight: 400;
  font-size: 12px; letter-spacing: .2em;
  padding: 16px 26px; cursor: pointer;
  transition: box-shadow .3s, transform .15s;
}
.cta__btn:hover { box-shadow: 0 0 34px rgba(56, 232, 255, .55); }
.cta__btn:active { transform: translateY(1px); }
.cta__done { display: none; margin-top: 26px; color: var(--cyan); }
.cta__fine { margin-top: 60px; opacity: .5; font-size: 9px; }

/* ══ Responsive ══════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hud--telemetry { display: none; }
}

@media (max-width: 820px) {
  .hud__coords { display: none; }
  .hud--depth { left: 18px; }
  .hud--zones { gap: 12px; font-size: 8px; }
  .specs { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .cta__form { flex-direction: column; gap: 10px; }
  .cta__input { border-right: 1px solid var(--hud-line); width: 74vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue .cue__arrow { animation: none; }
}