/* Motion: hero and Loop zoom. Every rule hangs off a class motion-hero.js adds inside the motion condition,
   so with no script or under reduced motion none of this applies and the static layout stands. */

/* Hero: GSAP plays the stage pins' arrival, so the CSS arrival stands down. */
.mh-on .hero .spin { animation: none; }
/* The intro scales each stage ring through this variable; it composes with the ring's own breathing. */
.mh-on .hero .sring { scale: var(--mh-ring, 1); }
/* Word masks: room for descenders while the words rise. */
.mh-on .hero h1 .mh-word-mask { padding-block: 0.08em 0.14em; margin-block: -0.08em -0.14em; }

/* Zoom: the section is pinned by ScrollTrigger and fills the view while it is held. */
.mh-zoom .zoom__sticky { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-height) + var(--space-md)) var(--space-xl); }
.mh-zoom .zoom__layer { will-change: transform; }
/* One column on small screens: trim the held frame so less of it has to rise past the top. */
@media (max-width: 60rem) { .mh-zoom .zoom__sticky { padding-block: var(--space-md); } }