/* Hazard Alert Engine page — scene styles (the dot→span set piece lives here
   now; the homepage stays EFB-focused and links in). Base type/glass comes
   from home.css. */
.scene-track { position: relative; }
.scene-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center; }
.scene-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(235,235,240,.12); }
.scene-progress i { display: block; height: 100%; background: var(--amber);
  transform: scaleX(0); transform-origin: 0 50%; }
/* ── Scene 02: the dot becomes a span ────────────────────────────────────── */
.dot-track { height: 400vh; height: 400svh; background: var(--scene-ink); }
.dot-stage { background: var(--scene-ink); border-bottom: 1px solid var(--scene-line); }
.dot-head { text-align: center; padding: 0 22px; margin-bottom: clamp(12px, 2.5vh, 28px); }
.dot-head .k { justify-content: center; }
.dot-head h2 { color: var(--scene-txt); }
.dot-head .lead { margin: 0 auto; color: var(--scene-dim); max-width: 700px; font-size: 16px; }
.dot-head .lead b { color: var(--scene-txt); font-weight: 600; }
.dot-panel {
  position: relative; max-width: 900px; margin: 0 auto; width: calc(100% - 44px);
  border: 1px solid var(--scene-line); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #0a0e15, var(--scene-panel));
}
.dot-panel svg { display: block; width: 100%; height: auto; max-height: 52svh; }
.panel-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 54%, rgba(245, 165, 36, .12), transparent 70%);
  opacity: 1;                              /* T0: final frame — span lit */
}
.readout {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px;
  background: linear-gradient(transparent, rgba(4, 6, 10, .88) 40%);
}
.rl { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.5;
  color: var(--scene-dim); max-width: 640px; margin: 0 auto; }
.rl b { color: var(--scene-txt); letter-spacing: .06em; font-family: var(--disp); }
.rl .num { color: var(--amber); font-family: var(--disp); font-weight: 700; }
.rl i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.rl-faa i { background: var(--red); box-shadow: 0 0 8px rgba(255, 92, 92, .8); }
.rl-hh i { background: var(--amber); box-shadow: 0 0 8px rgba(245, 165, 36, .8); }
/* T0 final frame: Soar label visible, FAA label hidden */
.rl-faa { opacity: 0; visibility: hidden; position: absolute; inset: 16px 20px auto; }
.rl-hh { opacity: 1; }


/* ═══ The die: how the engine thinks ══════════════════════════════════════
   T0 (no JS, reduced motion, or a failed script) = the fully lit die with the
   final caption — the finished frame, never an empty one.                  */
.die-head { text-align: center; padding: 110px 22px 0; background: var(--scene-ink); }
.die-head .sub { max-width: 30rem; margin: 14px auto 0; color: var(--scene-dim);
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.5; }
.die-track { height: 220vh; background: var(--scene-ink); }   /* fallback first */
.die-track { height: 220svh; }   /* 14 components, then the open + wire-in */
/* the die is product photography: it stays dark in light mode, like the scenes */
.die-stage { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; padding: 52px 22px 26px;
  background: var(--scene-ink); }
.die-wrap { width: min(70svh, 94vw); max-width: 620px; }
.die { display: block; width: 100%; height: auto; }

.die .b-dim { stroke: rgba(235,235,240,.13); }
.die .b-lit { stroke: url(#gDie); opacity: var(--l, 1); }
.die .b-n { fill: var(--scene-dim); font-size: 16px; font-weight: 600; text-anchor: end;
  opacity: calc(.35 + .65 * var(--l, 1)); }
.die .b-t { fill: var(--scene-txt); font-size: 27px; font-weight: 600; letter-spacing: -.3px;
  opacity: calc(.3 + .7 * var(--l, 1)); }
.die .b-s { fill: var(--scene-dim); font-size: 13.5px; font-weight: 500;
  opacity: calc(.24 + .76 * var(--l, 1)); }
.die text { font-family: var(--sf); }
.die-b { --l: 1; }
.die-c { stroke: url(#gDie); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; }

.die-captions { position: relative; height: 76px; width: min(46rem, 92vw); }
.die-cap { position: absolute; left: 0; right: 0; text-align: center;
  font-size: clamp(15px, 1.75vw, 18.5px); font-weight: 500; line-height: 1.45;
  color: var(--scene-txt); opacity: 0; }
.die-cap b { color: var(--amber); font-weight: 600; }
.die-cap .r { color: var(--red); }
.die-cap:last-child { opacity: 1; }           /* T0 = final caption */

/* SVG type scales with the viewBox, so a phone shrinks it ~2.7x — the labels
   have to grow in viewBox units to stay legible at that size. */
@media (max-width: 700px) {
  .die-wrap { width: 94vw; }
  .die .b-t { font-size: 44px; }
  .die .b-s { font-size: 23px; }
  .die .b-n { font-size: 26px; }
  .die-captions { height: 132px; }
  .die-captions { height: 104px; }
}

/* the chip's identity: frame and nameplate are always lit, never scroll-gated */
.die-frame { stroke: url(#gDie); stroke-width: 3; }
.die .p-n { fill: var(--scene-txt); font-size: 58px; font-weight: 600; letter-spacing: -1.5px; }
.die .p-s { fill: var(--scene-dim); font-size: 21px; font-weight: 600; letter-spacing: 2.4px; }
@media (max-width: 700px) {
  .die .p-n { font-size: 68px; }
  .die .p-s { font-size: 25px; letter-spacing: 1.6px; }
}

/* ── The die opens and wires into the engine ──────────────────────────────
   Blocks only translate, never scale, so tracery and type stay exact. */
.die-b { transition: none; }               /* scroll-driven; no CSS easing */
.die-w { stroke: url(#gDie); stroke-width: 2.4; stroke-dasharray: 1; opacity: 1; }
.die-chip { opacity: 1; }   /* T0 = the finished, wired frame */
.die-chip .k-die { stroke: #FF8A3D; }
.die-chip .k-sub { font-family: var(--sf); }
.die-plate, .die-c { transition: none; }

/* once every wire has landed, the engine runs. The current rides its own
   overlay so the legs underneath stay solid whether or not it is animating. */
.die-chip .k-flow path { opacity: 0; fill: none; stroke-linecap: round; }
.die-chip.live .k-flow path {
  opacity: 1; stroke: #FFD8A2; stroke-dasharray: 3 9;
  animation: dieCur 1.45s linear infinite;
  animation-delay: calc(var(--i, 0) * -.11s);
}
@keyframes dieCur { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
/* The package outline stays SOLID when powered; the running highlight is a
   separate overlay on top of it. Dashing .k-body itself made the box disappear
   the moment the chip went live. */
.die-chip .k-ring { opacity: 0; }
.die-chip.live .k-ring {
  opacity: 1; stroke: #FFE3B8; stroke-dasharray: .1 .9;
  animation: dieRing 2.6s linear infinite;
}
@keyframes dieRing { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .die-chip.live .k-flow path, .die-chip.live .k-ring { animation: none; }
  .die-chip.live .k-flow path, .die-chip.live .k-ring { opacity: 0; }
}
/* the two layouts are stacked and cross-faded; neither ever transforms */
.die-b.rg { opacity: 1; }   /* the only layout now */

/* ── Powered: everything repaints from the radial gradient centred on the chip,
   so the colour shift and the pulse both originate at the engine. ─────────── */
.die.powered .b-lit,
.die.powered .die-w,
.die.powered .die-frame,
.die.powered .k-body,
.die.powered .k-leg { stroke: url(#gLive); }
.die.powered .k-pin { fill: url(#gLive); }
.die.powered .k-die { stroke: #34D399; }
@media (prefers-reduced-motion: reduce) { .die.powered { /* colour only, no sweep */ } }