/* =========================================================================== * animations.css — initial states for the GSAP motion layer, and NOTHING else. * * Every rule here is gated behind `.has-anim`, which inc/enqueue.php puts on * before first paint and animations.js REMOVES whenever it bails out * (no GSAP, prefers-reduced-motion, or `?reveal=off`). That single removal is * what restores the fully static page — which is why nothing in this file may * ever be the only thing making an element correct. * * THE GOLDEN RULE: every selector pre-hidden here has a matching reveal in * assets/js/animations.js. A pre-hide with no reveal is an element that stays * invisible forever, found only by whoever scrolls to it. Enforced by * `node scripts/check-anim-parity.js`, not by memory — run it after touching * either file. * * Transform and opacity only (no CLS): never display, width, height, or * margin. See skills/gsap-motion.md §4. * * The hero photograph is deliberately NOT pre-hidden. It is the LCP element * above the fold, and starting the largest paint at opacity 0 trades real * loading performance for an effect nobody asked for; it settles from a 1.05 * scale instead, which needs no initial state. * ======================================================================== */ /* Global content cascade — the batch-revealed elements. * This list is mirrored by TEXT_REVEAL + MEDIA_REVEAL in animations.js and the * parity checker diffs the two, so keep them in step. */ .has-anim .quote-bar__tagline, .has-anim .quote-bar .btn-layout, .has-anim .intro__lead, .has-anim .highlight, .has-anim .benefit, .has-anim .quote-form__title, .has-anim .container-card, .has-anim .benefits__media { opacity: 0; } /* The three masked-line headings. SplitText builds its own overflow-hidden * masks at run time, so the only initial state they need is being invisible * until the split exists — otherwise the un-split heading paints for a frame * and then jumps as the lines are wrapped. Referenced by SPLIT_HEADINGS. */ .has-anim .intro__title { opacity: 0; } .has-anim .containers__title { opacity: 0; } .has-anim .benefits__title { opacity: 0; }