/* ========================================================================== ANIMAÇÃO — entrada dos blocos ao rolar. O estado inicial só existe quando o JS confirma que vai animar (classe .js-animacao no , colocada antes da primeira pintura). Sem JS, ou com prefers-reduced-motion, tudo nasce visível. ========================================================================== */ .js-animacao .rg-revelar { opacity: 0; transform: translateY(var(--rg-rev-desloc)); transition: opacity var(--rg-rev-dur) ease, transform var(--rg-rev-dur) var(--rg-ease); transition-delay: calc(var(--i, 0) * var(--rg-rev-passo)); /* Sem will-change permanente: com ele o navegador mantem uma camada de composicao viva para cada bloco (eram 17 na home) e a rolagem trava. */ } .js-animacao .rg-revelar.esta-visivel { opacity: 1; transform: none; } /* Faixas de imagem: em vez de subir, abrem com um leve zoom para fora. */ .js-animacao .rg-faixa img { transform: scale(1.06); transition: transform 1200ms var(--rg-ease), opacity var(--rg-rev-dur) ease; opacity: 0; } .js-animacao .rg-faixa.esta-visivel img { transform: none; opacity: 1; } /* Hero: o primeiro banner entra no carregamento, não na rolagem. Reaproveita a cascata que o slider já usa. */ .js-animacao .rg-hero__texto.esta-ativo > * { opacity: 0; transform: translateY(18px); } .js-animacao.esta-pronto .rg-hero__texto.esta-ativo > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-animacao .rg-revelar, .js-animacao .rg-revelar.esta-visivel, .js-animacao .rg-faixa img, .js-animacao .rg-hero__texto.esta-ativo > * { opacity: 1; transform: none; transition: none; } }