/* ============================================================
   motion.css — PINNED SCROLL DECK

   The frame (fixed header + cream page) stays put and, crucially, so does the
   CONTENT: every non-hero scene is pinned to the viewport (position:fixed) and
   NEVER moves while you scroll. A scroll-track spacer (added by motion.js) gives
   the scroll its length, and motion.js drives each scene's opacity so exactly
   ONE scene is on screen at a time and the next REPLACES it with a quick fade —
   nothing scrolls past, and two scenes are never laid over each other.

   The hero (#scene) keeps its own sticky reveal logic and sits underneath the
   deck until you scroll past it.  Header is position:fixed z-index:100 → above.

   --mp (0 hidden … 1 shown) is namespaced on purpose: the widgets already use
   --p for progress rings/bars, which inherits down.

   prefers-reduced-motion → motion.js leaves the page in normal document flow and
   nothing here applies, so every scene is simply visible and scrollable.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* pre-init (before motion.js pins the deck): hide the non-hero scenes so the page never
     flashes a stack of raw sections on load. motion.js removes .lp-preinit once the deck is
     built — non-hero scenes are then opacity:0 via --mp, so revealing them can't flash. */
  html.lp-preinit .lp > section:not(#scene){ display:none; }

  /* every scene — hero included — is pinned to the viewport and never scrolls.
     EXCEPT the tail (last scene = CTA + footer): it stays in normal flow as a
     scrollable page that slides up OVER the deck. */
  .lp.deck > section:not(.deck-tail){
    position:fixed;
    top:0; left:0; right:0;
    height:100vh;            /* fallback */
    height:100svh;           /* STABLE small-viewport height — the mobile URL bar toggling does NOT
                                resize the scene (no re-centre / overlap / anim jump). The JS clock
                                uses the same 100svh, so everything stays in lockstep. */
    pointer-events:none;   /* only the shown scene is interactive (below) */
    z-index:1;
  }
  .lp.deck > section:not(#scene):not(.deck-tail){
    overflow:hidden;
    opacity:var(--mp, 0);
    /* keep a PERMANENT compositing layer: without it the browser collapses the layer
       the instant --mp hits 1 and re-rasterises at integer px → a 1px "micro-shift" of
       the content when the fade finishes. A 3D transform pins the layer so it never snaps. */
    transform:translateZ(0);
    backface-visibility:hidden;
  }
  .lp.deck > section.deck-tail{ position:relative; z-index:2; opacity:1; background:var(--bg); }
  /* hero: default visible before JS; keep overflow visible so its reveal comets
     can still fly in from beyond the edges */
  .lp.deck > section#scene{ opacity:var(--mp, 1); }

  .lp.deck > section.deck-on{ pointer-events:auto; }

  /* pinned scenes no longer grow with the page, so their content must be
     vertically CENTRED in the viewport instead of sitting at the top. The sphere
     scenes (.rz) already fill the height with their scatter, so they opt out. */
  .lp.deck > section:not(#scene):not(.rz):not(.deck-tail){
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* invisible spacer that carries the scrollbar / scroll length */
  .lp.deck > .deck-track{ position:relative; z-index:0; pointer-events:none; width:1px; }

  /* the deck keeps scrollY > 0, so .scrolled is effectively always on — keep the
     same faint separator shadow as the base header so it doesn't get toggled off. */
  body.deck-mode .site-header.scrolled{ box-shadow:0 5px 14px -8px rgba(43,41,56,.16); }
}