/* ==========================================================================
   CVYSM — motion.css
   Entrance choreography, scroll reveals, view transitions, and the
   reduced-motion kill switch that governs every animation on the site.
   ========================================================================== */

/* ======================= intro curtain =======================
   Gated behind .js so a no-JS visitor never sees a blank overlay. */
.curtain{display:none}
/* the curtain is the one place the palette inverts: a black card carrying the
   mark, which lifts to reveal the paper page underneath */
.js .curtain{
  position:fixed;inset:0;z-index:var(--z-curtain);
  display:grid;place-items:center;
  background:var(--ink);color:var(--on-ink);
  clip-path:inset(0 0 0 0);
  transition:clip-path .95s cubic-bezier(.76,0,.24,1),opacity .5s ease .1s;
}
.js .curtain.up{clip-path:inset(0 0 100% 0);opacity:.999;pointer-events:none}
.curtain-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.curtain .logo--mono{width:46px;opacity:.95}
.curtain-bar{width:132px;height:1px;background:var(--hair-ink);overflow:hidden}
.curtain-bar i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--on-ink);
}
.js .curtain.up .curtain-bar{opacity:0;transition:opacity .3s ease}
.curtain .lbl{
  font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--on-ink-mute);
}

/* ======================= scroll reveal ======================= */
.rv{
  opacity:0;
  transform:translateY(20px);
  filter:blur(4px);
  transition:
    opacity var(--t-slow) var(--e-out),
    transform var(--t-slow) var(--e-out),
    filter var(--t-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * 65ms);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none;filter:blur(0);will-change:auto}

/* card stacks ease in as a group with a slight rise + scale */
.rv--card{transform:translateY(26px) scale(.985)}
.rv--card.in{transform:none}

/* ======================= page transition =======================
   Content leaves by rising and fading under the fixed black bars, then the next
   page fades in — see pageTransition() in main.js. Driven by JS rather than
   `@view-transition` so it behaves identically in every browser and can be
   verified; cross-document view transitions would fire unpredictably alongside
   it, so none are declared.

   Only <main> moves. The announcement bar and nav are persistent chrome, so a
   page change reads as content swapping underneath them. */
main{transition:opacity .3s var(--e-out),transform .3s var(--e-out)}
html.is-leaving main{opacity:0;transform:translateY(-10px)}
/* the incoming page: no repaint of a fade-out state */
html.is-entering main{opacity:0;transform:translateY(10px)}

/* ======================= reduced motion =======================
   One authoritative switch: honour the OS setting everywhere. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv,.rv--card{opacity:1 !important;transform:none !important;filter:none !important}
  .js .curtain{display:none !important}
  /* the drawing is an entrance animation: with motion reduced it is skipped, so
     the stroked layer would sit as a permanent outline over the filled mark */
  .mark-draw{display:none !important}
  .mark > path,.lockup .logo--word,.lockup .lockup-sub,.lockup .lockup-rule,.lockup .lockup-pb,.lockup .rooted,
  .corner,.cue{opacity:1 !important;transform:none !important}
  .sweep-g{animation:none !important;opacity:0 !important}
  .spot{display:none !important}
  .grain{animation:none !important}
  .ticker-track{animation:none !important;transform:none !important}
  .ticker{-webkit-mask-image:none;mask-image:none}
  .ticker-group:last-child{display:none}
  .step::before{background:var(--ink) !important;border-color:var(--ink) !important}
}

/* ======================= reduced transparency =======================
   Users who ask for less translucency get solid, high-contrast surfaces. */
@media (prefers-reduced-transparency:reduce){
  .glass{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--paper);
  }
  .glass--ink{background:#141414}
  .glass::after{display:none}
  .nav,.nav.scrolled{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .drawer{background:#0A0A0A;-webkit-backdrop-filter:none;backdrop-filter:none}
  .spot{display:none}
}

/* ======================= high contrast ======================= */
@media (prefers-contrast:more){
  :root{--hair:rgba(10,10,10,.42);--hair-2:rgba(10,10,10,.3);--mute:#4A4A4A;--label-c:#4A4A4A}
  .glass{border-color:rgba(10,10,10,.4)}
}

/* ======================= print =======================
   A printed page never scrolls, so every scroll-triggered reveal would stay at
   opacity 0 and the printout would be mostly blank. Reveal everything, and drop
   the fixed chrome and decorative layers, which cannot be printed meaningfully
   anyway. */
@media print{
  .rv,.rv--card,.mark > path,.lockup .logo--word,.lockup-sub,.lockup-rule,
  .hero-statement,.lockup-pb,.rooted,.corner,.cue,.step{
    opacity:1 !important;transform:none !important;filter:none !important;
  }
  .mark-draw,.topbar,.nav,.drawer,.grain,.spot,.progress,.ticker-track{display:none !important}
  .band,.foot{background:#fff !important;color:#000 !important}
  .band h2,.band p,.foot .nm,.foot-col a,.foot-bot,.foot .fb{color:#000 !important}
  .foot-mark,.foot-bot .pb,.to-top{display:none !important}
  .glass,.glass--ink{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:#fff !important;border-color:rgba(10,10,10,.2) !important;
    box-shadow:none !important;
  }
  .hero{min-height:0;padding-top:24px}
  .sec,.plate{padding:24px 0 !important}
  a{text-decoration:none}
}