/* ==========================================================================
   Motion helpers. Only initial states + small helpers for js/motion.js.
   Everything is scoped to html.js-motion, which is set ONLY when motion runs
   (not with reduced motion, removed by a failsafe if motion.js never starts).
   Timing lives in tokens.css (--dur-*, --rise-y, --stagger) and motion.js T{}.
   ========================================================================== */

/* Lenis owns smooth scrolling: native smooth-scroll would fight it (deep links, anchors) */
html.js-motion { scroll-behavior: auto; }

/* Hero items: hidden before the load timeline starts (avoids a flash). */
html.js-motion [data-anim~="hero"] .hero__title,
html.js-motion [data-anim~="hero"] .hero__text,
html.js-motion [data-anim~="hero"] .hero__cta,
html.js-motion [data-anim~="hero"] .hero__gallery,
html.js-motion [data-anim~="hero"] .hero__proof { visibility: hidden; }

/* Inner-page heroes: same idea, hidden only until heroPage() runs */
html.js-motion [data-anim~="hero-page"] h1,
html.js-motion [data-anim~="hero-page"] [data-hero-item],
html.js-motion [data-anim~="hero-page"] [data-hero-media] { visibility: hidden; }

/* GSAP marquee replaces the CSS keyframes */
html.js-motion [data-anim~="marquee"] .logos__track { animation: none; }

/* FAQ: JS animates height + opacity instead of the CSS keyframe */
html.js-motion [data-anim~="faq"] .faq__item.is-open .faq__a { animation: none; }

/* Mobile menu: GSAP slides the panel, so no CSS transition while motion is on */
html.js-motion .site-nav { transition: none; }

/* Rolling text inside buttons / nav links (two stacked copies) */
.m-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.m-roll__a, .m-roll__b { display: block; white-space: nowrap; }
.m-roll__b { position: absolute; left: 0; top: 100%; }

/* Cursor-following name label on testimonial photos (desktop only, created by JS) */
.m-float {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-yellow-400); color: var(--color-blue-700);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label, 14px);
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: scale(0);
}

/* Will-change hints for the things that move on scroll */
.hero-wall__ring { will-change: transform; }