/* ========================================================================== ANIMATION SET-UP -------------------------------------------------------------------------- Initial (pre-animation) states live here, NOT in JavaScript, so there is no flash of unstyled content before GSAP boots. Two guard rails: 1. States only apply when the `.js` class is present on (added by an inline script in ). Without JavaScript everything renders fully visible. 2. Under `prefers-reduced-motion: reduce` every initial state is reset to the final state, so content is visible and static. ========================================================================== */ /* --- Scroll reveal ------------------------------------------------------ */ .js [data-reveal] { opacity: 0; will-change: opacity, transform; } .js [data-reveal="up"] { transform: translate3d(0, var(--reveal-y), 0); } .js [data-reveal="down"] { transform: translate3d(0, calc(var(--reveal-y) * -1), 0); } .js [data-reveal="left"] { transform: translate3d(calc(var(--reveal-y) * -1.2), 0, 0); } .js [data-reveal="right"] { transform: translate3d(calc(var(--reveal-y) * 1.2), 0, 0); } .js [data-reveal="scale"] { transform: scale(0.94); } .js [data-reveal="fade"] { transform: none; } /* Once GSAP has run, drop will-change so we stop paying for a layer */ .js [data-reveal].is-revealed { will-change: auto; } /* --- Line-by-line heading reveal --------------------------------------- */ /* The JS splitter wraps each visual line in .line > .line__inner */ .line { display: block; overflow: hidden; padding-block-end: 0.04em; } .line__inner { display: block; } .js .split-ready .line__inner { transform: translate3d(0, 105%, 0); } /* --- Parallax ----------------------------------------------------------- */ .js [data-parallax] { will-change: transform; } /* --- Counters ----------------------------------------------------------- */ .js [data-count] { font-variant-numeric: tabular-nums; } /* --- Reduced motion: reset everything ---------------------------------- */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js .split-ready .line__inner { opacity: 1 !important; transform: none !important; will-change: auto; } .js [data-parallax] { transform: none !important; will-change: auto; } .hero__img, .page-head__img { transform: scale(1) !important; } .card, .card__img, .btn, .gallery__img { transition: none !important; } }