/* story-field.css: the WebGL gateway field behind the story reel, and the kinetic chapter titles.
   Loaded after site.css; overrides use equal-or-higher specificity. .reel--gl = field on, .reel--nogl = DOM-only fallback. */

/* ---------------------------------------------------------------- stage, field canvas, scene offset */
.reel__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.reel__gl[hidden] { display: none; }
.reel--gl .reel__stage { background: var(--bg); }
/* the design canvas scales into the stage below the title band (--ty = half the band, set by story.js) */
.reel__canvas { transform: translate(-50%, calc(-50% + var(--ty, 0px))) scale(var(--k, 1)); }

/* ---------------------------------------------------------------- kinetic chapter titles */
.reel__kt { position: absolute; left: 24px; right: 24px; top: 0; height: var(--kt-band, 72px); pointer-events: none; z-index: 2; }
.kt { position: absolute; left: 0; top: 16px; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 46px; line-height: 1.04;
  letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; transform-origin: 0 0;
  transition: transform .8s var(--ease-x), opacity .8s var(--ease-x); }
.kt__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.kt__l { display: inline-block; transform: translateY(105%); transition: transform .5s var(--ease-x); transition-delay: calc(var(--i, 0) * var(--st, 30ms)); }
.kt.is-in .kt__l { transform: none; }
.kt.is-set { transform: scale(.66); opacity: .58; }
.kt.is-out { transform: translateY(-40%) scale(.66); opacity: 0; transition: transform .28s var(--ease-x), opacity .2s linear; }
.kt.is-static, .kt.is-static .kt__l { transition: none; }
/* phone: no band; a full-stage card wipes in from below, holds ~1.5 s, wipes off upward */
.reel--phone .reel__kt { left: 0; right: 0; top: 0; bottom: 0; height: auto; background: var(--bg); transform: translateY(101%);
  transition: transform .45s var(--ease-x); }
.reel--phone .reel__kt.kt-on { transform: none; }
.reel--phone .reel__kt.kt-off { transform: translateY(-101%); transition-duration: .5s; }
.reel--phone .reel__kt.kt-reset { transition: none; }
.reel--phone .kt { left: 18px; right: 18px; top: 50%; margin-top: -1.1em; font-size: 28px; line-height: 1.08; letter-spacing: -0.03em; white-space: normal; }
.reel--phone .kt.is-set { transform: none; opacity: 1; }
.reel--phone .kt.is-out { transform: none; opacity: 0; transition: opacity .15s linear; }

/* ---------------------------------------------------------------- the DOM scene on the field */
/* pipeline: the field draws the gates; the DOM keeps crisp mono labels under each gate bar */
.reel--gl .pl { top: 8px; height: 176px; }
.reel--gl .pl[style*="top"] { height: 140px; }
.reel--gl.reel--phone .pl, .reel--gl.reel--phone .pl[style*="top"] { height: 116px; }
.reel--gl .pl__line, .reel--gl .pl__chip, .reel--gl .st-shard, .reel--gl .st-path { display: none; }
.reel--gl .pl__g, .reel--gl .pl__g.is-hold, .reel--gl .pl__g.is-fail { background: none; border: 0; border-radius: 0; padding: 0;
  justify-content: flex-end; align-items: center; text-align: center; gap: 2px; }
.reel--gl .pl__g b { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0; white-space: nowrap; }
.reel--gl .pl__g small { font: 400 11px/1.3 var(--font-mono); opacity: .8; white-space: nowrap; }
.reel--gl .pl__g.is-skip { opacity: .45; }
.reel--gl.reel--phone .pl__g b { font-size: 19px; line-height: 1.2; }

/* text cards stay crisp panels above the packets */
.reel--gl .sc-call { background: var(--raise); border-color: var(--hair-2); }
.reel--gl .ch__b { background: var(--raise); }
.reel--gl .ch__b.is-bad { background: color-mix(in srgb, var(--bad) 12%, var(--raise)); }
.reel--gl .st-tray { background: color-mix(in srgb, var(--hold) 6%, var(--raise)); }
.reel--gl .st-tray.is-done { background: color-mix(in srgb, var(--ok) 7%, var(--raise)); }
.reel--gl .shd__t { background: var(--raise); }
.reel--gl .st-banner { background: var(--bg); }

/* red team: packets replace the flying name pills; the list fills row by row as each attack is stopped */
.reel--gl .rt__shot, .reel--gl .rt__stamp, .reel--gl .rt__wall { display: none; }
.reel--gl .rt__grid { top: 24px; padding: 6px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--raise); }
.reel--gl .rt__grid span { opacity: .22; transition: opacity .35s var(--ease-x); }
.reel--gl .rt__grid span.is-in { opacity: 1; }
.reel--gl .rt__grid span:nth-last-child(-n+2) { border-bottom: 0; }
.reel--gl .reel__canvas.is-instant .rt__grid span { transition: none; }

/* shadow: the DOM lanes become hairline rails the packets run along; labels sit on small panels */
.reel--gl .shd__dot { display: none; }
.reel--gl .shd__lane { border-color: var(--hair); background: none; }
.reel--gl .shd__lane b { background: var(--raise); border: 1px solid var(--hair-2); border-radius: 4px; padding: 0 8px; top: 11px; }
.reel--gl.reel--phone .shd__lane b { top: 7px; }

/* kill switch: the call names become fixed lane labels; the packets carry the motion */
.reel--gl .kl__call { transform: none !important; left: 0; background: var(--raise); color: var(--ink); border: 1px solid var(--hair-2); line-height: 24px; }
.reel--gl .kl.is-on .kl__call { background: var(--raise); color: var(--muted); }
.reel--gl .kl__lane { border-bottom-color: transparent; }
.reel--gl.reel--phone .kl__call { line-height: 32px; }

@media (prefers-reduced-motion: reduce) {
  .kt, .kt__l, .reel--gl .rt__grid span { transition: none !important; }
}