/* ===== Motion, by content (Adam, 11 Oct 2026): text = editorial, photos and video = quiet, calls to action = still.
   Classes are set by a tiny head script, never when the visitor asks for reduced motion.
   Everything is transform / opacity / clip-path only (GPU-composited; no layout work while scrolling). ===== */

/* stagger: JS sets --d per item (left-to-right in a row, top-to-bottom in a list) */
.m-on .rise{transition-delay:var(--d,0ms)}


/* hero: lines arrive on load (JS wraps each line of the h1 in .hl > span) */
.m-on .hero__h1 .hl{display:block}
.m-on .hero__h1 .hl > span{display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),opacity 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),clip-path 1.2s cubic-bezier(.77,0,.18,1) var(--d,0ms)}
.m-on .hero__acts,.m-on .hero__aside{transition:opacity 1s ease .75s,transform 1s cubic-bezier(.2,.7,.2,1) .75s}
.m-on:not(.hero-in) .hero__acts,.m-on:not(.hero-in) .hero__aside{opacity:0;transform:translateY(14px)}
.m-on .hero__inner,.m-on .hero__media{will-change:transform}

/* in-tile photo parallax (Quiet + Cinematic): photo is oversized, JS moves it with --py */
.m-par .tile .kb > .fill{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.1));will-change:transform}
/* client-area phones drift at two speeds */
.m-par .np-ca__shots figure{transform:translate3d(0,var(--py,0px),0)}
.m-par .np-ca__shots figure:nth-child(2){transform:translate3d(0,calc(56px + var(--py,0px)),0)}
@media(max-width:860px){.m-par .np-ca__shots figure:nth-child(2){transform:translate3d(0,calc(28px + var(--py,0px)),0)}}

/* the wipe is on the tile's layers, not the tile: a fully clipped element never reports as on screen */

/* ── M · By content (Adam: "Each section should have its own… Text based elements, editorial, photos and video;
   quiet, CTA sections; off."): text fades in place and titles slide in from the left; photos and video fade up
   left-to-right with a gentle drift; calls to action never move. ── */
.m-m .rise:not(.tile):not(.credit):not(.np-ca__shots){transform:none}
.m-m .sec__head.rise{opacity:1}
.m-m .sec__head h2{transform:translateX(-28px);opacity:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity 1.1s ease}
.m-m .sec__head.in h2{transform:none;opacity:1}
.m-m:not(.hero-in) .hero__h1 .hl > span{clip-path:inset(0 100% 0 0)}
.m-m .hero__h1 .hl > span{clip-path:inset(0 0 0 0)}
.m-m:not(.hero-in) .hero__aside{transform:none}
.m-m .hero__acts,.m-m:not(.hero-in) .hero__acts{opacity:1;transform:none;transition:none}
.m-m .cta .rise,.m-m .np-ca__act.rise{opacity:1;transform:none;transition:none}

.m-m #photography .tile.rise{transform:none}
.m-m #photography .tile .kb > .fill{transform:none}