/* ============================================================ AEDO — GSAP motion layer (progressive enhancement) Loaded ONLY on pages that include motion.js + GSAP. Everything here is scoped to html.motion-gsap, which JS adds ONLY after confirming GSAP loaded. If GSAP is missing or the user prefers reduced motion, none of this applies and the page falls back to the bulletproof reveal in services.js. ============================================================ */ /* ---- Scroll progress bar ---- */ .motion-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #ff8a3d); transform: scaleX(0); transform-origin: 0 50%; z-index: 1000; pointer-events: none; box-shadow: 0 0 12px rgba(232,97,0,0.5); } /* ---- Hero pre-animation state (flash-free) ---- Keyed off .motion-pending, which a tiny inline script adds BEFORE the hero paints. The same script removes it after a timeout as a failsafe, so the hero can never stay hidden if motion.js fails. */ html.motion-pending .svc-hero .svc-eyebrow, html.motion-pending .svc-hero .svc-lead, html.motion-pending .svc-hero .svc-cta-row, html.motion-pending .svc-hero .svc-h1 { opacity: 0; will-change: opacity, transform; } /* SplitText line/word masking — keep ascenders/descenders clean */ .split-line { overflow: hidden; } .split-word { display: inline-block; will-change: transform; } /* ---- Below-the-fold reveal pre-state ---- Keyed off .motion-gsap, which JS adds only after confirming GSAP loaded. These sit below the fold so adding the class post-paint causes no flash. GSAP clears them inline as it animates, so content always ends visible. */ html.motion-gsap .svc-main .reveal { opacity: 0; will-change: opacity, transform; } /* Staggered grid children: transform-only cascade (opacity handled by the parent .reveal so fades never compound into mud) */ html.motion-gsap .svc-grid > *, html.motion-gsap .svc-pricing > * { will-change: transform; } /* Reduced motion: neutralize everything, show all content */ @media (prefers-reduced-motion: reduce) { html.motion-gsap .svc-main .reveal, html.motion-pending .svc-hero .svc-eyebrow, html.motion-pending .svc-hero .svc-lead, html.motion-pending .svc-hero .svc-cta-row, html.motion-pending .svc-hero .svc-h1 { opacity: 1 !important; transform: none !important; } .motion-progress { display: none; } }