/* ════════════════════════════════════════════════════════════
   Literal Humans — motion
   Keyframes, reveal states, and the reduced-motion contract.
   Every "before" state below resolves to the element's natural
   resting state, so a page with no JS still reads correctly.
   ════════════════════════════════════════════════════════════ */

@keyframes grain{
  0%{transform:translate(0,0)}      10%{transform:translate(-5%,-10%)}
  20%{transform:translate(-15%,5%)} 30%{transform:translate(7%,-25%)}
  40%{transform:translate(-5%,25%)} 50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)}   70%{transform:translate(0,15%)}
  80%{transform:translate(3%,35%)}  90%{transform:translate(-10%,10%)}
  100%{transform:translate(0,0)}
}
@keyframes sweep{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(320%); }
}

/* ─────────── mask reveals ───────────
   A word or block that rises out of a clipped band. */
[data-mask]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease),transform 1.05s var(--exp);
  transition-delay:calc(var(--mk,0) * 90ms);
}
.is-ready [data-mask],[data-mask].is-in{ opacity:1; transform:none; }

/* ─────────── lift on enter ───────────
   Used by everything that scrolls past normally rather than being pinned. */
[data-lift],.tri,.val__grid article,.journal li,.cl__wall figure,.netw img,.pod__art,.perks li{
  opacity:0; transform:translateY(34px);
}
[data-lift].is-in,.tri.is-in,.val__grid article.is-in,.journal li.is-in,
.cl__wall figure.is-in,.netw img.is-in,.pod__art.is-in,.perks li.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease),transform 1s var(--exp);
  transition-delay:calc(var(--i,0) * 70ms);
}
.netw img.is-in{ opacity:.55; }
.netw img.is-in:hover{ opacity:.95; }

/* the triptych tips in from depth rather than sliding */
.tri{ transform:translateY(40px) rotateX(14deg); transform-origin:50% 100%; }
.tri.is-in{ transform:none; }

/* ─────────── reduced motion ───────────
   Pins are released in CSS (scroll.js also skips them), the reel and the
   corridor become plain stacks, and nothing animates on its own. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ animation:none; }
  .gl,.pod__wave,.hero__cue,.cursor,.rail,.chapter{ display:none; }

  [data-mask],[data-lift],.tri,.val__grid article,.journal li,.cl__wall figure,
  .netw img,.pod__art,.perks li{ opacity:1 !important; transform:none !important; }
  .netw img{ opacity:.6 !important; }
  .mline > i{ transform:none !important; }

  /* release every pin: the tall sections collapse to their content */
  .shot[data-pin]{ height:auto !important; }
  .shot__in{ height:auto; min-height:0; transform:none !important; padding-block:clamp(56px,10vh,110px); }

  .mani__l .w{ opacity:1 !important; filter:none !important; transform:none !important; }
  .mani__l .w.dim{ opacity:.34 !important; }
  .swap__o{ display:none; }
  .swap__n{ opacity:1 !important; transform:none !important; }
  .mani__s{ opacity:1 !important; transform:none !important; }

  .beat{ position:relative; opacity:1 !important; transform:none !important; filter:none !important; }
  .sig3__copy{ min-height:0; display:flex; flex-direction:column; gap:26px; max-width:60ch; }
  .sig3__copy::before{ display:none; }
  .meter{ display:none; }

  /* the reel becomes a list */
  .reel__stage{ display:block; perspective:none; }
  .sv{ position:relative; top:auto; opacity:1 !important; transform:none !important;
       pointer-events:auto; padding-block:clamp(26px,5vh,52px); border-top:1px solid var(--line); }
  .sv h2{ font-size:clamp(30px,5vw,52px); }
  .reel__ticks{ display:none; }

  /* the deck, the roadmap and the corridor become stacks */
  .work__deck{ flex-wrap:wrap; perspective:none; transform:none !important; }
  .jr__rail{ flex-wrap:wrap; transform:none !important; gap:26px; }
  .jr__line{ display:none; }
  .stop{ width:100%; display:block; }
  .stop__up,.stop__dn{ padding:0; }
  .stop__up > *,.stop__dn > *{ opacity:1 !important; transform:none !important; }
  .stop__dn > *{ margin-top:10px; }
  .stop__dot{ display:none; }
  .cs{ width:100%; transform:none !important; opacity:1 !important; }
  .crew__stage{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
                gap:26px 14px; margin-top:34px; padding-bottom:30px; }
  .crew__hill{ display:none; }
  .peek{ position:relative; left:auto !important; bottom:auto; width:auto;
         transform:none !important; opacity:1 !important; }
  .peek figcaption{ position:relative; left:auto; top:auto; transform:none;
                    opacity:1 !important; margin-top:10px; max-width:none; }
  .peek b,.peek i,.peek em{ color:var(--ink-2); }
  .peek b{ color:var(--cream); }
  /* the handshake chapter becomes four stacked cards under the caption */
  .shake__beats{ position:relative; inset:auto; pointer-events:auto;
                 display:flex; flex-direction:column; gap:18px; margin:26px 0; }
  .bcard,.bcard--l,.bcard--r{
    position:relative; inset:auto; width:auto; max-width:60ch;
    opacity:1 !important; transform:none !important;
    backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
    background:var(--paper);
  }
  .shake__rail,.lbox{ display:none; }
  .shake__cap{ margin-top:0; }
  .shake__art{ position:relative; right:auto; top:auto; bottom:auto; transform:none;
               opacity:1 !important; width:min(420px,100%); margin:26px 0; display:block; }

  .cult .shot__in{ padding:clamp(56px,10vh,110px) 0 0; }
  .cult__plate{ position:relative; clip-path:none !important; aspect-ratio:16/9; border-radius:16px; }
  .cult__over{ padding-top:34px; }
  .hero__band{ transform:none !important; opacity:1 !important; }
  .prev__row{ transform:none !important; flex-wrap:wrap; width:auto; mask-image:none; -webkit-mask-image:none; }
}

/* ─────────── no-js ─────────── */
html.no-js [data-mask],html.no-js [data-lift],html.no-js .tri,html.no-js .v,
html.no-js .journal li,html.no-js .cl__wall figure,html.no-js .netw img,
html.no-js .val__grid article,
html.no-js .pod__art,html.no-js .perks li{ opacity:1; transform:none; }
html.no-js .mline > i{ transform:none; }
html.no-js .boot{ display:none; }
html.no-js .shot[data-pin]{ height:auto; }
html.no-js .shot__in{ height:auto; min-height:0; }
html.no-js .sv{ position:relative; top:auto; opacity:1; }
html.no-js .who{ position:relative; left:auto; top:auto; }
html.no-js .shake__beats{ position:relative; inset:auto; display:flex;
                          flex-direction:column; gap:18px; margin:26px 0; }
html.no-js .bcard{ position:relative; inset:auto; width:auto; max-width:60ch;
                   opacity:1; transform:none; }
html.no-js .shake__rail,html.no-js .lbox{ display:none; }