/* THIS SHEET IS NOT RENDER-BLOCKING (index.html loads it media="print" and promotes it after the first frame). Nothing it styles is on screen at t=0 — the story beats, the playback controls and the content overlay all arrive seconds later. ⚠ The wordmark and the size tiers it depends on (--sp, --brand-font, --brand-lock-inset) are therefore authored INLINE in index.html . Adding a .brand-land / .brand-max rule here would apply a frame or more late, so put brand geometry there, not here. Late-stage brand STATES (.brand-locked, .map-open, handoff) are fine below: they never run before this sheet is live. */ :root { --glass: rgba(8, 13, 20, .8); --glass-strong: rgba(8, 14, 22, .95); --line: rgba(243, 246, 248, .16); --shadow: 0 28px 80px rgba(0, 0, 0, .42); } .map-live .maplibregl-canvas { cursor: grab; } .map-live .maplibregl-canvas:active { cursor: grabbing; } html.intro-running #app #map { background: #000; } .maplibregl-ctrl-attrib { background: rgba(0, 0, 0, .72) !important; color: var(--ink); } .maplibregl-ctrl-attrib a { color: var(--ink) !important; } /* No cinematic = no motion. Set before first paint whenever sequencePlan() says the show is off — browser Back, reduced motion, or a non-root URL. (There is no "already seen it" case any more: opening "/" always plays. James 2026-07-27.) This kills TRANSITIONS, and every element below reaches its visible state through a class, never through a transition's end value — so switching motion off SNAPS things into place rather than hiding them. The one that is easy to get wrong: #map `.planet-reveal` carries an 8s transform transition (in index.html's inline