/* ============================================================ ANIMAÇÕES — Scroll-reveal, keyframes e acessibilidade ============================================================ */ /* Sistema de revelação progressiva: - [data-reveal] fica invisível apenas quando o JS está ativo (.js no ) - .is-visible dispara a animação de entrada - .revealed é adicionado após a animação para liberar hover/transitions */ .js [data-reveal]:not(.revealed) { opacity: 0; } .js [data-reveal].is-visible:not(.revealed) { animation: riseIn 0.7s var(--ease-spring) both; animation-delay: var(--d, 0ms); } @keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* ---------- Keyframes decorativos ---------- */ @keyframes orbFloat { from { transform: translate3d(0, -3%, 0) scale(1); } to { transform: translate3d(0, 4%, 0) scale(1.08); } } /* Animações pesadas apenas onde há espaço/processamento */ @media (max-width: 47.98rem) { .hero__visual::before { animation: none; } } /* ---------- Acessibilidade: respeita reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js [data-reveal]:not(.revealed) { opacity: 1; } .js [data-reveal].is-visible:not(.revealed) { animation: none; } }