/* ========================================================================== utilities/animations.css — Entrada de elementos O estado inicial escondido só é aplicado sob .js (adicionada em index.html antes da primeira pintura). Sem JavaScript nada fica invisível. prefers-reduced-motion neutraliza tudo — ver base/accessibility.css. ========================================================================== */ /* O deslocamento usa `transform`, NÃO a propriedade individual `translate`. Motivo: quase todo .reveal é também um .card ou .step, cujo hover anima `translate`. Como `.js .reveal` (0,2,0) tem especificidade maior que `.card` (0,1,0), usar `translate` aqui sequestrava o hover e sobrescrevia a lista de `transition` do componente. Em `transform` as duas coisas convivem — e `transform: none` da regra de prefers-reduced-motion em base/accessibility.css passa a de fato zerar o deslocamento. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--delay, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* Rede de segurança: se os módulos não carregarem (404, CSP, rede), o temporizador no devolve o documento ao estado .no-js — o que já reativa TODOS os fallbacks escritos para esse estado (navegação estática, barras do diagnóstico cheias, diálogos no fluxo), e não só este bloco. A regra abaixo fica como cinto e suspensório. */ .js-boot-failed .reveal { opacity: 1 !important; transform: none !important; } /* Variante sem deslocamento — para blocos grandes onde o movimento vertical seria perceptível demais. */ .js .reveal--fade { transform: none; } /* -------------------------------------------------------------------------- Escalonamento Aplicado a filhos diretos de um container .stagger, sem precisar de --delay inline em cada item. -------------------------------------------------------------------------- */ .js .stagger > .reveal:nth-child(1) { --delay: 0ms; } .js .stagger > .reveal:nth-child(2) { --delay: 70ms; } .js .stagger > .reveal:nth-child(3) { --delay: 140ms; } .js .stagger > .reveal:nth-child(4) { --delay: 210ms; } .js .stagger > .reveal:nth-child(5) { --delay: 280ms; } .js .stagger > .reveal:nth-child(6) { --delay: 350ms; } /* -------------------------------------------------------------------------- Pulsação discreta — só no ponto central do hero -------------------------------------------------------------------------- */ @keyframes soft-pulse { 0%, 100% { opacity: 0.35; scale: 1; } 50% { opacity: 0.7; scale: 1.06; } }