/* motion.css — Animation layer. * Gated entirely by `.motion-enabled` class on . Removing that one * class disables every animation here without touching layout CSS. * Also gated by `prefers-reduced-motion: no-preference` so the OS-level * setting is respected as a second independent kill switch. */ @media (prefers-reduced-motion: no-preference) { /* ==================================================================== * Generic reveal primitives. Add the class + body must have * `.motion-enabled`. One-shot on load, no scroll dependency. * ==================================================================== */ body.motion-enabled .reveal-fade { animation: revealFade var(--duration-base) var(--ease-out) both; } body.motion-enabled .reveal-rise { animation: revealRise var(--duration-base) var(--ease-out) both; } body.motion-enabled .reveal-cascade > * { animation: revealRise var(--duration-base) var(--ease-out) both; opacity: 0; } body.motion-enabled .reveal-cascade > *:nth-child(1) { animation-delay: 0.05s; } body.motion-enabled .reveal-cascade > *:nth-child(2) { animation-delay: 0.18s; } body.motion-enabled .reveal-cascade > *:nth-child(3) { animation-delay: 0.32s; } body.motion-enabled .reveal-cascade > *:nth-child(4) { animation-delay: 0.46s; } body.motion-enabled .reveal-cascade > *:nth-child(5) { animation-delay: 0.6s; } body.motion-enabled .reveal-cascade > *:nth-child(6) { animation-delay: 0.74s; } /* ==================================================================== * Hero stagger — eyebrow → headline → body → buttons → 3D viewer. * The HUD is timed by JS already; we sync via a CSS variable below. * ==================================================================== */ body.motion-enabled .hero-copy .hero-eyebrow { animation: revealRise var(--duration-base) var(--ease-out) 0s both; } body.motion-enabled .hero-copy h2 { animation: revealRise var(--duration-slow) var(--ease-spring) 0.25s both; } body.motion-enabled .hero-copy p { animation: revealFade var(--duration-base) var(--ease-out) 0.5s both; } body.motion-enabled .hero-copy .hero-actions { animation: revealRise var(--duration-base) var(--ease-spring) 0.7s both; } body.motion-enabled .hero-visual { animation: revealFade var(--duration-slow) var(--ease-glide) 0.4s both; } /* ==================================================================== * First-scroll-into-view emphasis on within .content-section. * JS (scroll-emphasis.js) toggles `.is-revealed` on first intersection; * the underline draws across the strong text. * ==================================================================== */ body.motion-enabled .content-section strong { background-image: linear-gradient(180deg, transparent 0, transparent calc(100% - 2px), var(--accent-soft) calc(100% - 2px)); background-size: 0% 100%; background-repeat: no-repeat; background-position: 0 0; transition: background-size 1.7s var(--ease-glide) 0.5s; } body.motion-enabled .content-section.is-revealed strong:first-of-type { background-size: 100% 100%; } /* ==================================================================== * Spec-block proof reveal — the verified ✓ in the footer pulses on * first intersection. * ==================================================================== */ body.motion-enabled .spec-block .spec-block__check { opacity: 0; transform: scale(0.6); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-spring); } body.motion-enabled .spec-block.is-revealed .spec-block__check { opacity: 1; transform: scale(1); transition-delay: 0.6s; } body.motion-enabled .spec-block .spec-block__footer { color: var(--text-faint); transition: color 0.5s var(--ease-out); } body.motion-enabled .spec-block.is-revealed .spec-block__footer { color: var(--accent-cool); } /* ==================================================================== * Hover micro-interactions — only enabled when motion is on. * ==================================================================== */ body.motion-enabled .card { transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } body.motion-enabled .card:hover { transform: translateY(-2px); border-color: var(--accent-glow); } } /* ==================================================================== * Keyframes — defined outside the prefers-reduced-motion guard so they * exist even if the OS overrides; the guard above prevents application. * ==================================================================== */ @keyframes revealFade { from { opacity: 0; } to { opacity: 1; } } @keyframes revealRise { from { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }