/* ========================================================================== Animações -------------------------------------------------------------------------- Regra única e inegociável: só `transform` e `opacity`. São as duas propriedades que o compositor da GPU resolve sozinho, sem recalcular layout nem repintar. Animar width/height/top/left/margin dispara reflow a cada frame e derruba os 60fps em celular. ========================================================================== */ /* -------------------------------------------------------------------------- AN-03 / AN-04 — scroll reveal O estado inicial só é aplicado quando o JS está ativo (classe .js no ). Sem JS, nada fica invisível: o conteúdo aparece normalmente. -------------------------------------------------------------------------- */ .js [data-animar] { opacity: 0; transform: translateY(32px); transition: opacity var(--t-reveal) var(--easing-entrada), transform var(--t-reveal) var(--easing-entrada); } .js [data-animar='esquerda'] { transform: translateX(-32px); } .js [data-animar='direita'] { transform: translateX(32px); } .js [data-animar='escala'] { transform: scale(0.96); } .js [data-animar].is-visivel { opacity: 1; transform: none; } /* Cascata: cada filho entra 80ms depois do anterior. Feito com variável --i, definida no HTML, para não precisar de JS. */ .js [data-cascata] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--t-lenta) var(--easing-entrada), transform var(--t-lenta) var(--easing-entrada); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-cascata].is-visivel > * { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- AN-01 — entrada do hero Roda no load, sem esperar o observer. -------------------------------------------------------------------------- */ .js .hero__entrada > * { opacity: 0; transform: translateY(24px); animation: subirEntrando var(--t-reveal) var(--easing-entrada) forwards; } /* O escalonamento vem do :nth-child em vez de um style="--i" no HTML: a ordem dos elementos do hero é fixa e conhecida, então o atraso é responsabilidade do CSS. */ .js .hero__entrada > *:nth-child(1) { animation-delay: 100ms; } .js .hero__entrada > *:nth-child(2) { animation-delay: 200ms; } .js .hero__entrada > *:nth-child(3) { animation-delay: 300ms; } .js .hero__entrada > *:nth-child(4) { animation-delay: 400ms; } .js .hero__entrada > *:nth-child(5) { animation-delay: 500ms; } @keyframes subirEntrando { to { opacity: 1; transform: none; } } /* AN-16 — imagem do hero entra com leve escala */ .js .hero__figura { opacity: 0; transform: scale(1.04); animation: entrarEscalando 700ms var(--easing-entrada) 300ms forwards; } @keyframes entrarEscalando { to { opacity: 1; transform: scale(1); } } /* -------------------------------------------------------------------------- AN-12 — spinner do formulário -------------------------------------------------------------------------- */ @keyframes girar { to { transform: rotate(360deg); } } /* Check de sucesso com easing elástico */ .form__sucesso.is-visivel .form__sucesso-icone { animation: aparecerElastico var(--t-lenta) var(--easing-elastico); } @keyframes aparecerElastico { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* -------------------------------------------------------------------------- AN-13 — shake no campo inválido -------------------------------------------------------------------------- */ .campo.is-tremendo .campo__controle { animation: tremer var(--t-lenta) var(--easing-entrada); } @keyframes tremer { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* -------------------------------------------------------------------------- AN-17 — aviso de rascunho restaurado -------------------------------------------------------------------------- */ .form__aviso { animation: descerEntrando var(--t-lenta) var(--easing-entrada); } @keyframes descerEntrando { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- AN-11 — módulos ocultos entrando em cascata -------------------------------------------------------------------------- */ .card-modulo.is-revelado { animation: subirEntrando var(--t-lenta) var(--easing-entrada) forwards; animation-delay: calc(var(--i, 0) * 60ms); opacity: 0; } .modulos__seta { transition: transform var(--t-media) var(--easing-entrada); } .modulos__botao[aria-expanded='true'] .modulos__seta { transform: rotate(180deg); } /* ========================================================================== prefers-reduced-motion -------------------------------------------------------------------------- Não é refinamento opcional. Movimento amplo provoca náusea, tontura e enxaqueca em pessoas com desordem vestibular. Quem configurou o sistema para reduzir movimento precisa receber a página inteira, sem animação — e o conteúdo tem que continuar visível, nunca preso em opacity: 0. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; } /* Garante que nada dependente de animação fique invisível. */ .js [data-animar], .js [data-cascata] > *, .js .hero__entrada > *, .js .hero__figura, .card-modulo.is-revelado { opacity: 1 !important; transform: none !important; } }