/* ────────────────────────────────────────────────────────────────────────── MOTION — microinterações sutis (Stripe/Linear style) Owner: @dev (AIOX) ─────────────────────────────────────────────────────────────────────── */ /* Progressive enhancement: animation só aplica QUANDO o JS tiver * confirmado que está rodando (classe .js-ready em ). * Sem JS, tudo aparece por padrão. Com JS, reveal anima ao scroll. */ /* Initial state for revealed elements (somente se .js-ready) */ .js-ready [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-600) var(--ease-out), transform var(--dur-600) var(--ease-out); will-change: opacity, transform; } /* Visible state (set by reveal.js) */ .js-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Staggered children */ .js-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-600) var(--ease-out), transform var(--dur-600) var(--ease-out); } .js-ready [data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); } [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 60ms; } [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 120ms; } [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 180ms; } [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms; } [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 300ms; } [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 360ms; } [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 420ms; } [data-reveal-stagger].is-visible > *:nth-child(9) { transition-delay: 480ms; } [data-reveal-stagger].is-visible > *:nth-child(10) { transition-delay: 540ms; } [data-reveal-stagger].is-visible > *:nth-child(11) { transition-delay: 600ms; } [data-reveal-stagger].is-visible > *:nth-child(12) { transition-delay: 660ms; } /* Honor user preference */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Subtle hover for service cards (already have transform on hover via components.css) */ .service-card, .why-card, .testimonial, .proof-stat { will-change: transform; }