/* ===================================================================== animacoes.css — camada de animações (scroll-reveal, hero, micro-interações). Tudo dentro de @media (prefers-reduced-motion: no-preference): quem pede menos movimento vê o site estático e completo. À prova de falha: - O estado oculto só vale com (adicionada antes do paint pelo bootstrap inline no header) → sem JS, conteúdo visível. - Se animacoes.js não rodar, o bootstrap adiciona .anim-fallback em 2,5s, que força tudo visível. Conteúdo NUNCA fica preso invisível. As animações tocam sempre (não respeitam "reduzir movimento"), igual ao site de referência — assim funcionam mesmo com economia de bateria ativa. ===================================================================== */ /* ---------- Estado inicial (oculto) dos elementos que entram ---------- */ .anim-on .subtitulo-secao, .anim-on .titulo-secao, .anim-on .colecao-card, .anim-on .grade-produtos .card, .anim-on .essencia__midia, .anim-on .essencia__texto, .anim-on .stats__item, .anim-on .insta__grid a, .anim-on .flex-center.mt-32, .anim-on .hero__supra, .anim-on .hero__titulo, .anim-on .hero__sub, .anim-on .hero__botoes, .anim-on [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); } /* a essência entra pelos lados pra dar profundidade */ .anim-on .essencia__midia { transform: translateX(-34px); } .anim-on .essencia__texto { transform: translateX(34px); } .anim-on [data-reveal="zoom"] { transform: scale(.94); } /* revelado (classe adicionada via JS — scroll reveal e hero) */ .anim-on .is-visible { opacity: 1 !important; transform: none !important; } /* ---------- FAIL-SAFE ---------- */ /* Se o JS não revelar, o bootstrap adiciona .anim-fallback → mostra tudo. */ .anim-fallback .subtitulo-secao, .anim-fallback .titulo-secao, .anim-fallback .colecao-card, .anim-fallback .grade-produtos .card, .anim-fallback .essencia__midia, .anim-fallback .essencia__texto, .anim-fallback .stats__item, .anim-fallback .insta__grid a, .anim-fallback .flex-center.mt-32, .anim-fallback .hero__supra, .anim-fallback .hero__titulo, .anim-fallback .hero__sub, .anim-fallback .hero__botoes, .anim-fallback [data-reveal] { opacity: 1 !important; transform: none !important; } /* ---------- Seta do hero (bounce contínuo, não some) ---------- */ .hero__scroll { animation: setaBounce 2.2s 1s ease-in-out infinite; } @keyframes setaBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ---------- Micro-interações ---------- */ .btn { transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform .22s ease, box-shadow .22s ease; } .btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.22); } .btn--claro:hover { box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.22); } .btn:active { transform: translateY(0) scale(.97); box-shadow: none; } /* Botões do hero: a cor entra rápida no hover, mas "sai" devagar ao tirar o mouse (fade-out lento da cor cinza). A subidinha (transform) fica igual. */ .hero__botoes .btn { transition: background .6s ease, color .6s ease, border-color .6s ease, transform .22s ease, box-shadow .22s ease; } .hero__botoes .btn:hover { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .22s ease, box-shadow .22s ease; } .header { transition: box-shadow .3s ease, background .3s ease; } .header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.08); } .card__fav.ativo svg { animation: favPulse .4s ease; } @keyframes favPulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }