/* Motion-only helpers (Builder C). Link after site.css. Everything is scoped to html.js-motion,
   which main.js adds only when GSAP is present, so the page is unaffected otherwise. */

/* Lenis (recommended base rules) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hero pattern: oversized by one tile (--tile-w / --tile-h from site.css) so the diagonal drift loops seamlessly */
html.js-motion .hero-pattern {
  inset: calc(var(--tile-h, 399px) * -1) calc(var(--tile-w, 480px) * -1);
  will-change: transform;
}

/* Hero pre-hide: stops the intro text painting and then snapping hidden before main.js runs.
   Needs only the inline `js` class on <html>; released when main.js adds .is-intro-started.
   Failsafe: forces opacity 1 after 2.5s whatever happens. Motion-ok users only. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-intro-started) #hero :is(.hero-eyebrow, h1, .hero-lede, .hero-actions, [data-stamp]) {
    opacity: 0;
    animation: hh-failsafe 0.01s linear 2.5s forwards;
  }
}
@keyframes hh-failsafe { to { opacity: 1; } }

/* Marquee */
[data-marquee] { overflow: hidden; }
html.js-motion [data-marquee] .marquee-track { display: flex; width: max-content; will-change: transform; }
[data-marquee].is-static .marquee-track { will-change: auto; transform: none !important; }

/* Boxes: while JS pins the section the track stops being a native scroller */
[data-pin="boxes"].is-pinned { overflow-x: clip; }
[data-pin="boxes"].is-pinned [data-track] {
  overflow: visible;
  scroll-snap-type: none;
  flex-wrap: nowrap;
  width: max-content;
}

/* Stamps rotate around their centre */
[data-stamp] { transform-origin: 50% 50%; }

/* GSAP owns transforms on these: no competing CSS transform transitions */
html.js-motion .note { transition-property: box-shadow, filter; }
html.js-motion [data-float] img { transition: none; }
html.js-motion [data-float] { --float-lift: 0; }

/* Foil sheen: one pass when .foil enters view (class set by main.js), then a slow idle drift.
   Needs .foil to be a gradient with background-size ~200% (site.css). */
@keyframes hh-foil-pass { from { background-position: 140% 50%; } to { background-position: 0% 50%; } }
@keyframes hh-foil-idle { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
html.js-motion .foil.is-sheen {
  animation: hh-foil-pass 2.2s cubic-bezier(.22, 1, .36, 1) 1 both,
             hh-foil-idle 16s ease-in-out 2.2s infinite alternate;
}
html.js-motion .foil.is-offscreen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html.js-motion .foil.is-sheen { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-marquee] .marquee-track { transform: none !important; }
}