/* ==========================================================================
   MOTION LAYER (GSAP). Loaded only in the motion build.
   Everything here is inert unless <html> has the "mx" class, which is only
   added when the visitor has not asked for reduced motion.
   ========================================================================== */

/* page curtain: covers the page on arrival and wipes away; reused for page-to-page transitions */
.mx-curtain{display:none}
.mx .mx-curtain{display:flex;position:fixed;inset:0;z-index:200;background:var(--fg);color:var(--bg);align-items:center;justify-content:center;pointer-events:none;will-change:transform}
.mx.mx-fail .mx-curtain,.mx.mx-ready .mx-curtain.is-gone{display:none}
/* the TZ mark that morphs into TEZAH (first visit of a session); hidden until motion.js shows it */
.mx-mark{display:block;width:min(86vw,600px);height:auto;overflow:visible;fill:currentColor;opacity:0;visibility:hidden}
.mx-mark .mx-word{visibility:hidden}

/* GSAP drives these; switch off the CSS transitions that would fight it */
.mx .frame:not(.mx-done) img{transition:none}
.mx .stg>*{transition:none}
/* line masks: room for descenders (g, y, p) without changing the heading height, so nothing moves when the split is removed */
.mx .mx-mask{padding-bottom:.14em;margin-bottom:-.14em}

/* GSAP re-measures scroll positions; native smooth scrolling would animate those jumps */
.mx, .mx body{scroll-behavior:auto}
/* statement words blend from muted to full colour as you scroll */
.mx:not(.mx-fail) .stmt-t .w{transition:none;color:color-mix(in srgb, var(--inv-fg) calc(var(--lit, 0) * 100%), var(--inv-muted))}
.mx:not(.mx-fail) .stmt-t .w.soft{color:color-mix(in srgb, var(--inv-fg) calc(var(--lit, 0) * 58%), var(--inv-muted))}