/* ============================================================ motion.css - animation primitives + fail-safe gates. Load AFTER tokens.css, BEFORE page CSS. ============================================================ */ /* ---- No-FOUC / fail-safe gate ---------------------------------- `js` class is added to by an inline head script BEFORE paint, so reveal elements start hidden only when JS is present. If the JS engine fails to boot, a watchdog adds `js-failed` and everything is forced visible again (content is never stuck hidden -> SEO/a11y safe). */ html.js [data-reveal] { opacity: 0; } html:not(.js) [data-reveal], html.js-failed [data-reveal] { opacity: 1 !important; transform: none !important; } /* Will-change only while a reveal is pending (cleared by GSAP). */ html.js [data-reveal] { will-change: opacity, transform; } /* ---- Reduced motion: disable all of it -------------------------- */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Magnetic button wrapper (hero/CTA) ------------------------- */ .magnetic { display: inline-block; will-change: transform; } /* ---- Generic fade-up keyframe kept for non-GSAP use ------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }