/* ========================================================================= Animações de scroll — modelo animado Arquivo SEPARADO: não altera custom.css / main.js de 2025. Estratégia: o JS adiciona a classe .js-anim no . Sem JS (ou com prefers-reduced-motion), tudo permanece visível — a página nunca fica em branco. ========================================================================= */ /* Estado inicial dos elementos animados (só quando o JS está ativo) */ .js-anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* Variações de direção / zoom */ .js-anim .reveal.reveal-left { transform: translateX(-32px); } .js-anim .reveal.reveal-right { transform: translateX(32px); } .js-anim .reveal.reveal-zoom { transform: scale(0.94); } /* Estado visível (disparado pelo IntersectionObserver) */ .js-anim .reveal.is-visible { opacity: 1; transform: none; } /* Micro-interação: leve elevação em cards e botões no hover */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-3px); } /* Banner do hero: fade-in suave no carregamento */ .js-anim .hero-fade { opacity: 0; animation: heroFadeIn 1s ease forwards; } @keyframes heroFadeIn { to { opacity: 1; } } /* Acessibilidade: desliga tudo para quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { .js-anim .reveal, .js-anim .reveal.reveal-left, .js-anim .reveal.reveal-right, .js-anim .reveal.reveal-zoom, .js-anim .hero-fade { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .hover-lift:hover { transform: none; } }