/* ============================================================ GLOBAL ANIMATIONS — loaded site-wide via layout.tsx Provides: .reveal (scroll-stagger), [data-counter] (number count-up) Hooks: AnimationsMount client component sets up IntersectionObservers. Respects prefers-reduced-motion. ============================================================ */ /* PROGRESSIVE ENHANCEMENT Default: .reveal is fully visible (no JS = no broken page). Hidden + animated ONLY when has class `js-anim` (set by inline script in layout BEFORE first paint, only when JS executes). If JS fails to load → no js-anim flag → content stays visible. */ .reveal { transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms); } html.js-anim .reveal:not(.in) { opacity: 0; transform: translateY(20px); will-change: opacity, transform; } html.js-anim .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-anim .reveal, html.js-anim .reveal:not(.in) { opacity: 1 !important; transform: none !important; transition: none !important; } }