/* ============================================================
   SHARED FADE-DECK ENGINE  (css/deck.css)
   Fixed stage. Slides CROSS-FADE. No scroll motion of content —
   scrolling only SELECTS the active slide; the visual is a fade
   through white, never a slide/scroll.
   LOCKED uniform fade envelope (production standard, do not alter
   without an explicit instruction quoting this rule):
     outgoing slide  -> opacity 0 over 0.3s
     incoming slide  -> after 0.15s delay, opacity 1 over 0.7s
   Content slides fade as one unit. Moment (brand interlude) slides
   share the identical envelope, plus their own internal staged
   choreography that triggers on activation and runs on fixed clocks.
   ============================================================ */
:root{--deck-ink:#0c0a07;--deck-bone:#f4edde}

/* driver gives the page its scroll height; JS sets it to N * 100vh */
.deck-driver{position:absolute;top:0;left:0;width:1px;height:100vh;pointer-events:none;opacity:0}

/* the one fixed stage every slide lives inside — warm paper ground everywhere, never pure white */
.deck-stage{position:fixed;inset:0;overflow:hidden;background:var(--paper,#f4edde);z-index:1}

/* a slide: absolutely stacked, invisible until active */
.deck-slide{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;
  transition:opacity .3s ease}                 /* OUTGOING: 0.3s */
.deck-slide.on{opacity:1;pointer-events:auto;
  transition:opacity .7s ease .15s}            /* INCOMING: 0.15s delay + 0.7s */
/* CRITICAL: descendants of an INACTIVE slide (draggable polaroids, stickers, links) explicitly
   re-enable pointer-events, so — since every slide is stacked inset:0 — the LATER moments'
   invisible polaroids sat on top of the active moment and swallowed every drag. Hard-disable
   all pointer interaction inside any slide that isn't currently on. */
.deck-slide:not(.on) *{pointer-events:none!important}

/* content slide interior — one screen, comfortable margins, never scrolls */
.deck-slide-inner{width:100%;max-width:1180px;margin:0 auto;padding:clamp(70px,10vh,120px) 6vw clamp(60px,8vh,100px);
  max-height:100vh;display:flex;flex-direction:column;justify-content:center}
.deck-slide{display:flex;flex-direction:column;justify-content:center}

/* moment slides are full-bleed (their own art fills the stage) */
.deck-slide.moment,.deck-slide.moment .deck-slide-inner{padding:0;max-width:none;margin:0}

/* chrome (header): stays visible through transitions; only hides once a
   moment slide's backdrop is actually up (0.15s delay + short fade),
   and returns immediately when leaving a moment */
.deck-chrome{transition:opacity .3s ease}
.deck-chrome.hide{opacity:0;pointer-events:none;transition:opacity .3s ease .15s}

/* scroll cue — wayfinding, not decoration: a hairline over the word SCROLL,
   breathing opacity only. Ink on light slides, bone on dark/moment. */
.deck-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--deck-ink);
  opacity:0;pointer-events:none;transition:opacity .15s ease}
.deck-cue.dark{color:var(--deck-bone)}
.deck-cue.show{opacity:1;transition:opacity .8s ease;animation:deckcue 2.5s ease-in-out infinite}
.deck-cue .cue-line{width:1px;height:24px;background:currentColor}
.deck-cue .cue-word{font-family:"Hanken Grotesk",sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase}
@keyframes deckcue{0%,100%{opacity:.45}50%{opacity:.9}}

/* reduced motion: no fixed stage, no fades — a plain scrolling stack,
   every slide statically visible; native hash-jump navigation still works */
@media(prefers-reduced-motion:reduce){
  .deck-driver{display:none}
  .deck-stage{position:static;height:auto;overflow:visible}
  .deck-slide{position:relative;inset:auto;opacity:1;pointer-events:auto;transition:none;min-height:100vh}
  .deck-slide *{animation:none!important}
  .deck-cue{position:fixed;opacity:1;animation:none}
  .deck-chrome.hide{opacity:1;pointer-events:auto}
}