/* --- zn motion ---------------------------------------------------------------
   Build-in and scroll effects for every page (2026-09-12). Driven by
   /sqs/zn-motion.js, which stamps html.zn-fx-ready, assigns an effect per
   component (data-zn-fx) and adds .is-in once, the first time the element
   enters the viewport. Without the script nothing is hidden. Transform,
   opacity, clip-path and filter only; every effect is off under reduced motion.

   Effects: rise · words · wipe · settle · focus · draw · cascade · count
   Scroll: data-zn-parallax (script-driven translate), data-zn-pin (sticky heads)
   ---------------------------------------------------------------------------- */
:root{
  --zn-fx-ease: cubic-bezier(.22,.61,.36,1);
  --zn-fx-d: 0ms;             /* per-element delay, set by the script */
  --zn-fx-dur: 760ms;
}

/* rise: the default for copy, rows, credits */
html.zn-fx-ready [data-zn-fx="rise"]:not(.is-in){ opacity:0; transform:translate3d(0,26px,0); }
html.zn-fx-ready [data-zn-fx="rise"]{ transition:opacity var(--zn-fx-dur) var(--zn-fx-ease) var(--zn-fx-d), transform var(--zn-fx-dur) var(--zn-fx-ease) var(--zn-fx-d); will-change:opacity,transform; }
html.zn-fx-ready [data-zn-fx="rise"].is-in{ opacity:1; transform:none; }

/* words: headlines build word by word (the script wraps words in .zn-w) */
html.zn-fx-ready [data-zn-fx="words"] .zn-w{ display:inline-block; opacity:0; transform:translate3d(0,.45em,0) rotate(.6deg); transition:opacity .62s var(--zn-fx-ease) var(--zn-w-d,0ms), transform .62s var(--zn-fx-ease) var(--zn-w-d,0ms); }
html.zn-fx-ready [data-zn-fx="words"].is-in .zn-w{ opacity:1; transform:none; }

/* wipe: full-bleed media and bands reveal left to right */
html.zn-fx-ready [data-zn-fx="wipe"]:not(.is-in){ clip-path:inset(0 100% 0 0); }
html.zn-fx-ready [data-zn-fx="wipe"]{ transition:clip-path 1.05s var(--zn-fx-ease) var(--zn-fx-d); will-change:clip-path; }
html.zn-fx-ready [data-zn-fx="wipe"].is-in{ clip-path:inset(0 0 0 0); }

/* settle: the plate slides in, then the image lands from 1.06 */
html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in){ opacity:0; transform:translate3d(0,22px,0); }
html.zn-fx-ready [data-zn-fx="settle"]{ transition:opacity .7s var(--zn-fx-ease) var(--zn-fx-d), transform .7s var(--zn-fx-ease) var(--zn-fx-d); }
/* the scaled media never widens the page: clip at the media wrapper, not the whole plate */
html.zn-fx-ready [data-zn-fx="settle"] .cs-media.is-flat, html.zn-fx-ready .cs-media.is-flat figure[data-zn-fx="settle"], html.zn-fx-ready .cs-bleed figure[data-zn-fx="settle"], html.zn-fx-ready [data-zn-fx="settle"] .image-block-wrapper, html.zn-fx-ready [data-zn-fx="settle"] .sqs-video-wrapper, html.zn-fx-ready [data-zn-fx="settle"] .video-block .sqs-block-content{ overflow:hidden; }
/* shadowed (inset) figures keep their shadow: the plate slides, the image does not scale */
html.zn-fx-ready .cs-media:not(.is-flat) figure[data-zn-fx="settle"]:not(.is-in) > img, html.zn-fx-ready .cs-media:not(.is-flat) figure[data-zn-fx="settle"]:not(.is-in) > video{ transform:none; }
html.zn-fx-ready [data-zn-fx="settle"].is-in{ opacity:1; transform:none; }
html.zn-fx-ready [data-zn-fx="settle"] > img, html.zn-fx-ready [data-zn-fx="settle"] > video, html.zn-fx-ready [data-zn-fx="settle"] .cs-media > img, html.zn-fx-ready [data-zn-fx="settle"] .cs-media > video, html.zn-fx-ready [data-zn-fx="settle"] .cs-media img{
  transition:transform 1.15s var(--zn-fx-ease) calc(var(--zn-fx-d) + 90ms), opacity .6s var(--zn-fx-ease) calc(var(--zn-fx-d) + 90ms);
}
html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in) > img, html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in) > video, html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in) .cs-media > img, html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in) .cs-media > video, html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in) .cs-media img{ transform:scale(1.06); opacity:0; }

/* focus: galleries and walls arrive from a blur */
html.zn-fx-ready [data-zn-fx="focus"]:not(.is-in){ opacity:0; filter:blur(14px); transform:scale(.985); }
html.zn-fx-ready [data-zn-fx="focus"]{ transition:opacity .8s var(--zn-fx-ease) var(--zn-fx-d), filter .9s var(--zn-fx-ease) var(--zn-fx-d), transform .9s var(--zn-fx-ease) var(--zn-fx-d); }
html.zn-fx-ready [data-zn-fx="focus"].is-in{ opacity:1; filter:blur(0); transform:none; }

/* draw: rules draw in from the left; the element's own top border hides while the line draws */
html.zn-fx-ready [data-zn-fx="draw"]{ position:relative; }
html.zn-fx-ready [data-zn-fx="draw"]::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--v4-line, currentColor); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--zn-fx-ease) var(--zn-fx-d); }
html.zn-fx-ready [data-zn-fx="draw"]:not(.is-in){ border-top-color:transparent !important; }
html.zn-fx-ready [data-zn-fx="draw"].is-in::before{ transform:scaleX(1); }
html.zn-fx-ready [data-zn-fx="draw"] > *{ transition:opacity .6s var(--zn-fx-ease) calc(var(--zn-fx-d) + 220ms), transform .6s var(--zn-fx-ease) calc(var(--zn-fx-d) + 220ms); }
html.zn-fx-ready [data-zn-fx="draw"]:not(.is-in) > *{ opacity:0; transform:translate3d(0,10px,0); }

/* cascade: the children stagger, 70ms apart (index set by the script as --zn-i) */
html.zn-fx-ready [data-zn-fx="cascade"] > *{ transition:opacity .62s var(--zn-fx-ease) calc(var(--zn-fx-d) + var(--zn-i,0) * 70ms), transform .62s var(--zn-fx-ease) calc(var(--zn-fx-d) + var(--zn-i,0) * 70ms); }
html.zn-fx-ready [data-zn-fx="cascade"]:not(.is-in) > *{ opacity:0; transform:translate3d(0,18px,0); }

/* count: numerals tick up; the script writes the value, this just keeps it from jumping */
html.zn-fx-ready [data-zn-count]{ font-variant-numeric:tabular-nums; }

/* scroll: parallax media and pinned heads */
[data-zn-parallax]{ will-change:transform; }
html.zn-fx-ready [data-zn-pin]{ position:sticky; top:72px; }

/* header chevrons and pills draw their strokes on load */
html.zn-fx-ready .zn-headnav svg path{ stroke-dasharray:60; stroke-dashoffset:60; transition:stroke-dashoffset .9s var(--zn-fx-ease) .35s; }
html.zn-fx-ready .zn-headnav.is-in svg path{ stroke-dashoffset:0; }

/* accessibility: no motion, everything visible */
@media (prefers-reduced-motion:reduce){
  html.zn-fx-ready [data-zn-fx]:not(.is-in), html.zn-fx-ready [data-zn-fx]:not(.is-in) > *, html.zn-fx-ready [data-zn-fx="words"] .zn-w, html.zn-fx-ready [data-zn-fx="settle"]:not(.is-in) img{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  html.zn-fx-ready [data-zn-fx], html.zn-fx-ready [data-zn-fx] > *, html.zn-fx-ready [data-zn-fx] .zn-w{ transition:none !important; }
  html.zn-fx-ready [data-zn-fx="draw"]::before{ transform:scaleX(1); transition:none; }
  html.zn-fx-ready [data-zn-fx="draw"]:not(.is-in){ border-top-color:inherit !important; }
  html.zn-fx-ready .zn-headnav svg path{ stroke-dashoffset:0; transition:none; }
  [data-zn-parallax]{ transform:none !important; }
}
/* --- end zn motion --- */