/* ========================================================================== Kabine — entradas ao rolar A lista de alvos mora aqui, não no HTML: o CSS mira nos seletores que já existem. Se dependesse de um atributo posto pelo JS, o conteúdo apareceria e sumiria antes de animar. Nada disso vale sem a classe .js-anim na raiz, que o script inline do só coloca quando há IntersectionObserver E o usuário não pediu movimento reduzido. Sem JS, sem suporte ou com movimento reduzido, a classe nunca entra e nenhuma regra daqui pega — o site fica visível e parado. :where() e não :is(): :is() assume a especificidade do argumento mais específico da lista, o que faria a regra de esconder (0,3,0) vencer a de revelar (0,2,0) e nada apareceria. :where() tem especificidade zero. A unidade animada nunca é um elemento que já tem transform próprio. Por isso anima-se .row e não .row__shot: o shot carrega a perspectiva de 5°, e um translateY aqui a sobrescreveria. ========================================================================== */ .js-anim :where( .section-head, .mosaic-head, .heading-block, .tile, .row, .mini, .kstep, .quote, .plan, .post, .faq-item, .faq__aside .card, .kopiloto__grid .zap, .contato__pitch .display-l, .contato__pitch .lead, .contato__card, .hero__inner > *, .hero__shot ) { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--anim-delay, 0ms); } .js-anim .is-in { opacity: 1; transform: none; }