/* ============================================================ HiVi Labs — scroll-animation support styles Works with static/js/scroll.js (Lenis + GSAP ScrollTrigger). Progressive enhancement: [data-anim] elements are VISIBLE by default; the engine sets the hidden "from" state only when it will animate them. So with JS off / reduced-motion, nothing is stuck hidden. ============================================================ */ /* Lenis smooth-scroll housekeeping */ 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; } /* Split-text words */ [data-split] { } /* Each word gets its own clip-box so the rise reveal is masked per word, but the boxes flow inline-block + wrap like normal text (block here would force every word onto its own line). padding/margin keeps the clip from cutting descenders. */ .split-line { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; } .split-word { display: inline-block; will-change: transform, opacity; } /* Parallax / pinned helpers */ [data-parallax] { will-change: transform; } .is-pinned { z-index: 2; } /* When the engine is active it tags so we can hint GPU layers */ html.has-scroll-anim [data-anim] { will-change: transform, opacity; } /* ---- Marquee (used by the marquee section + any [data-marquee]) ---- */ .marquee { --marquee-gap: clamp(2rem, 5vw, 4rem); --marquee-duration: 38s; display: flex; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); user-select: none; } .marquee__track { display: flex; flex: none; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap); min-width: 100%; animation: marquee-scroll var(--marquee-duration) linear infinite; } /* No-JS fallback: hard-pause on hover. When the engine is active it instead eases the playbackRate to a near-stop (see initMarquees in scroll.js). */ html:not(.has-scroll-anim) .marquee:hover .marquee__track { animation-play-state: paused; } .marquee--reverse .marquee__track { animation-direction: reverse; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } .split-word, [data-anim], [data-parallax] { opacity: 1 !important; transform: none !important; } }