/* Animacoes de entrada. * * TODA regra que esconde algo esta sob .js-reveal, que so entra no * quando o reveal.js confirma suporte. Sem JS, sem a classe, nada some. * O teste tests/test_reveal.php varre este arquivo e falha se aparecer * opacity:0 fora desse escopo. */ .js-reveal [data-reveal] { opacity: 0; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .js-reveal [data-reveal="fadeInUp"] { transform: translateY(32px); } .js-reveal [data-reveal="fadeInLeft"] { transform: translateX(-32px); } .js-reveal [data-reveal="fadeInRight"] { transform: translateX(32px); } .js-reveal [data-reveal="fade"] { transform: none; } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; } /* ⛔ A entrada lateral estica a pagina para o lado. * * "fadeInRight" nasce em translateX(32px): enquanto o bloco nao revela, ele * fica 32px fora da margem direita, e transform CONTA como area rolavel. Num * celular de 390px a pagina abria com 13px de rolagem lateral, e so parava de * rolar depois que o ultimo bloco da pagina revelasse. Medido no Edge, nao * deduzido. Todos os 172 blocos animados vivem dentro de
. * * clip, e NAO hidden: hidden faria de main um container de rolagem e levaria * o overflow-y junto para "auto". Com clip o eixo vertical continua visible. * Fica sob .js-reveal porque sem a classe nao existe transform nenhum. */ .js-reveal main { overflow-x: clip; } /* Cinto e suspensorio: o JS ja sai fora em reduced-motion, mas se a * preferencia mudar com a pagina aberta o CSS garante o conteudo visivel. */ @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }