/* ============================================================ motion.css - animation primitives + fail-safe gates. Load AFTER tokens.css, BEFORE page CSS. The `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). ============================================================ */ /* ---- No-FOUC / fail-safe reveal gate ---------------------------- */ html.js [data-reveal] { opacity: 0; will-change: opacity, transform; } html:not(.js) [data-reveal], html.js-failed [data-reveal] { opacity: 1 !important; transform: none !important; } /* ---- Reduced motion: disable all of it -------------------------- */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } *, *::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; } /* ---- 3D hero canvas + static fallback layering ----------------- The static poster stays the LCP element. The WebGL canvas is injected behind/over it by js/hero3d/tracker.js, starts at opacity:0 and fades in only after the first frame renders. It never traps focus or scroll (aria-hidden + pointer-events:none set in JS). */ .hero-stage { position: relative; } .hero-canvas { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: var(--radius); } .hero-poster { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; } /* When the live 3D scene is active we hide the poster entirely so the scene sits cleanly on the light stage (no photo bleed-through). The poster still shows as the mobile / no-WebGL fallback, when .is-3d is absent. */ .hero-stage.is-3d .hero-poster { opacity: 0; transition: opacity 1s ease; } /* ---- Generic fade-up keyframe kept for non-GSAP use ------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }