/* * Reactiv Factory v2 - shared motion system (tokens-only, reduced-motion safe). * Copied into each site at src/styles/motion.css and imported once in the base layout. * * THE single source of motion truth: Hero reveal/sheen/parallax, every * [data-reveal] section, StatBand count-up timing, all hover/focus micro-ix. * * Hard rules: * - NOTHING animates under (prefers-reduced-motion: reduce). * - Motion is OPT-IN: hidden state only when .js-motion is on AND user * has not asked to reduce motion. No-JS => fully visible. * - Only opacity/transform animated (no layout thrash). * - Reveals fire once (anti-slop restraint). */ :root { --motion-fast: 180ms; --motion-base: 420ms; --motion-reveal: 640ms; --motion-countup: 1100ms; --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --motion-rise: 16px; --motion-stagger: 90ms; --hero-reveal-shift: 22px; --hero-reveal-dur: 720ms; --hero-parallax: 6%; } @media (prefers-reduced-motion: no-preference) { .js-motion [data-reveal] { opacity: 0; transform: translate3d(0, var(--motion-rise), 0); transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease); will-change: opacity, transform; } .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; } .js-motion [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * var(--motion-stagger)); } } .motion-off [data-reveal], .motion-off [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: no-preference) { .u-lift { transition: transform var(--motion-fast) var(--motion-ease-soft), box-shadow var(--motion-fast) var(--motion-ease-soft); } .u-lift:hover, .u-lift:focus-visible { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-md); } .u-press { transition: transform var(--motion-fast) var(--motion-ease-soft); } .u-press:active { transform: translate3d(0, 1px, 0) scale(0.995); } } .u-lift:focus-visible, .u-press:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } [data-countup] { font-variant-numeric: tabular-nums; }