/* stage.css — STRUCTURAL rules for the pinned mountain stage. No colors, no type.
 * Variants layer their world on top. Requires wfi-stage.js, which writes
 * .stage{--t (0..1 hero fade), --p (0..1 whole-stage progress)} and toggles
 * .is-pinned (desktop) / .in-panes (a pane is active) / .pane.is-active. */

html.is-loading { overflow: hidden; }
.preloader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), visibility .8s; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader [data-count] { font-variant-numeric: tabular-nums; }

.stage { position: relative; overflow-x: clip; }          /* clip, NOT hidden: hidden would break sticky */
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }

.stage-bg { position: absolute; inset: 0; z-index: 0; }
.stage-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: translate3d(0, calc(var(--t, 0) * -3%), 0) scale(calc(1.04 + var(--t, 0) * .08)); will-change: transform; }
.stage-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }   /* variants paint the veil here with --t */

.stage-hero { position: absolute; inset: 0; z-index: 2; display: flex;
  opacity: calc(1 - var(--t, 0) * 1.4); transform: translate3d(0, calc(var(--t, 0) * -5vh), 0); will-change: opacity, transform; }
.stage.in-panes .stage-hero { visibility: hidden; }

.stage-hud { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s; }
.stage.in-panes .stage-hud { opacity: 1; }
.stage-rail { display: block; position: relative; overflow: hidden; }
.stage-rail > b { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); }

/* track: desktop = second sticky layer over the pin that slides in X; mobile = normal flow over the sticky pin */
.stage-track { position: relative; z-index: 4; }
.stage.is-pinned .stage-track { position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh;
  display: flex; align-items: center; width: max-content; min-width: 100%; will-change: transform; pointer-events: none; }
.stage.is-pinned .pane { pointer-events: auto; flex: 0 0 auto; }
.stage:not(.is-pinned) .stage-track { display: block; }