/********************************************* ** Animações de entrada ** ** Os elementos marcados com data-anima (ou filhos de um ** data-anima-lista) começam escondidos e entram quando cruzam a ** viewport — quem acrescenta a classe .animaVisivel na hora certa é o ** IntersectionObserver do assets/scripts.js. ** ** Tudo aqui depende da classe .comAnimacao, escrita no por um ** script inline no wp_head (includes/suportes.php). Sem JS ela nunca ** chega e nada abaixo se aplica: a página continua visível por inteiro. *********************************************/ /* Estado inicial. O valor padrão — sem valor no atributo ou "subir" — é a entrada de baixo para cima, que é a usada na maior parte do site. */ .comAnimacao [data-anima], .comAnimacao [data-anima-lista] > * { opacity: 0; transform: translateY(45px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); /* O atraso de cada item de uma lista é calculado no assets/scripts.js */ transition-delay: var(--atrasoAnima, 0s); } /* Variações de direção */ .comAnimacao [data-anima="fade"] { transform: none; } .comAnimacao [data-anima="descer"] { transform: translateY(-45px); } .comAnimacao [data-anima="esquerda"] { transform: translateX(-55px); } .comAnimacao [data-anima="direita"] { transform: translateX(55px); } .comAnimacao [data-anima="zoom"] { transform: scale(0.93); } /* Estado final — o mesmo para todas as variações */ .comAnimacao [data-anima].animaVisivel, .comAnimacao [data-anima-lista] > .animaVisivel { opacity: 1; transform: none; } /********************************************* ** Acessibilidade *********************************************/ /* Quem pediu menos animação no sistema recebe a página montada e parada. O assets/scripts.js também nem chega a criar o observador nesse caso — a regra aqui é a garantia de que nada fica invisível no meio do caminho. */ @media (prefers-reduced-motion: reduce) { .comAnimacao [data-anima], .comAnimacao [data-anima-lista] > * { opacity: 1; transform: none; transition: none; } }