/* ======================================================================= Lenis + GSAP Scroll Animations — styles ======================================================================= */ /* Lenis recommended base styles (smooth scrolling) */ 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; } /* ----------------------------------------------------------------------- Prevent "flash of un-animated content". These rules ONLY apply once JavaScript has added the `js-anim` class to (done by the small inline snippet in functions.php). If JS is off or fails, nothing is hidden — your content always stays visible. ----------------------------------------------------------------------- */ /* Hide opacity/transform-based animations until GSAP takes over */ html.js-anim [data-anim]:not([data-anim="parallax"]):not([data-anim="slow-scroll"]):not([data-anim="reveal"]):not([data-anim="reveal-left"]) { visibility: hidden; } /* Clip-path reveals: set their starting frame so there's no jump */ html.js-anim [data-anim="reveal"] { clip-path: inset(0 0 100% 0); } html.js-anim [data-anim="reveal-left"] { clip-path: inset(0 100% 0 0); } /* Parallax elements need a little room to move without clipping */ [data-anim="parallax"] { will-change: transform; } /* If the visitor prefers reduced motion, show everything normally */ @media (prefers-reduced-motion: reduce) { html.js-anim [data-anim] { visibility: visible !important; clip-path: none !important; } }