/* ============================================================= animations.css — animações de entrada (fade-in / fade-out) O estado oculto vive no CSS, não no JS, para não haver flash de conteúdo: quando a página pinta pela primeira vez os elementos já estão em opacity 0. Tudo fica atrás de `.js`, adicionado por um script inline no — sem JavaScript, nada é escondido e a página continua legível. A lista vai dentro de :where() de propósito. :where() não soma especificidade, então a regra oculta pesa só o `.js` (0,1,0) e `.js .is-visible` (0,2,0) consegue sobrepô-la. Sem isso, um seletor como `.js .element-hero .text` (0,3,0) venceria e o elemento nunca apareceria. IMPORTANTE: a lista de seletores abaixo é a mesma de animations.js (REVEAL). Alterou aqui, altere lá. ============================================================= */ .js :where( .element-hero .selos-de-confiana, .element-hero .text, .element-hero .CT-as, .element-hero .card-selo-CFP, .element-solues .cabealho-da-seo, .element-solues .div-2, .element-solues .nota-demais-ramos, .element-barra-de .stat, .element-abordagem .abordagem-texto, .element-abordagem .etapa-diagnstico, .element-abordagem .div-3, .element-sobre-eduardo .IMG-foto-do, .element-sobre-eduardo .div-4, .element-CTA .container, .avaliacoes .avaliacoes-cabecalho, .avaliacoes .avaliacoes-resumo, .avaliacoes .avaliacoes-carrossel, .section .paragraph, .section .container-3, .section .heading, .section .container-4, .section .article, .section .article-2, .container-wrapper .container-8, .container-wrapper .container-11, .container-wrapper .container-12, .container-wrapper .container-13, .section-2 .div-4, .section-2 .list, .footer .container-18, .footer .container-22, .footer .container-23, .footer .container-24, .footer .horizontal-border ) { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease-in, transform 600ms ease-in; } /* estado revelado — o JS alterna esta classe pelo IntersectionObserver */ .js .is-visible { opacity: 1; transform: translateY(0); } /* O último elemento do documento não pode ser deslocado para baixo: transform entra no cálculo da área rolável, e 24px a mais no fim da página viram um vão de scroll até o elemento ser revelado. Aqui a entrada é só de opacidade. */ .js :where(.footer .horizontal-border) { transform: none; } /* O carrossel é um container de scroll com scroll-snap. Um transform animado num ancestral faz o navegador reavaliar os pontos de snap e pode deixar a trilha numa posição intermediária. Entra só com fade. */ .js :where(.avaliacoes .avaliacoes-carrossel) { transform: none; } /* quem pediu menos movimento não recebe nenhum */ @media (prefers-reduced-motion: reduce) { .js :where( .element-hero .selos-de-confiana, .element-hero .text, .element-hero .CT-as, .element-hero .card-selo-CFP, .element-solues .cabealho-da-seo, .element-solues .div-2, .element-solues .nota-demais-ramos, .element-barra-de .stat, .element-abordagem .abordagem-texto, .element-abordagem .etapa-diagnstico, .element-abordagem .div-3, .element-sobre-eduardo .IMG-foto-do, .element-sobre-eduardo .div-4, .element-CTA .container, .avaliacoes .avaliacoes-cabecalho, .avaliacoes .avaliacoes-resumo, .avaliacoes .avaliacoes-carrossel, .section .paragraph, .section .container-3, .section .heading, .section .container-4, .section .article, .section .article-2, .container-wrapper .container-8, .container-wrapper .container-11, .container-wrapper .container-12, .container-wrapper .container-13, .section-2 .div-4, .section-2 .list, .footer .container-18, .footer .container-22, .footer .container-23, .footer .container-24, .footer .horizontal-border ) { opacity: 1; transform: none; transition: none; } }