/* ========================================================================== tp-anim.css — Helper genérico de animação de entrada por scroll (TP) ⚠️ PRECISA SER CARREGADO NO DO LayoutV2.cshtml. CSS de módulo é injetado no meio do → o estado inicial chegaria DEPOIS do primeiro paint e causaria flash. Não mova daqui. - O estado escondido só existe sob .tp-js (adicionada pelo snippet inline do ). Sem JS → sem classe → conteúdo visível. Fail-safe. - Toda a animação é CSS. O JS só traduz data-tp-* em custom properties inline e adiciona .tp-in. Precedência (inline > classe > :root) sai de graça da cascata. - Convive com o AOS sem tocar nele: namespace tp-* / --tp-* é disjunto. ========================================================================== */ /* 1. Tokens padrão. Herdam — é o que faz o stagger funcionar sem o JS copiar valores para os filhos. */ :root { --tp-ease: cubic-bezier(0.41, 0, 0.08, 1); /* curva oficial da marca */ --tp-dur: 837ms; --tp-delay: 0ms; --tp-stagger: 0ms; --tp-y: 0px; /* + = começa abaixo, sobe */ --tp-x: 0px; /* + = começa à direita, vai p/ esquerda */ --tp-i: 0; /* índice no grupo (vem do nth-child) */ } /* 2. Estado inicial e final. O transition-delay da regra BASE é 0ms de propósito: no modo reversível a SAÍDA não pode herdar o atraso de entrada, senão o conteúdo fica "grudado" na tela por centenas de ms depois de sair da viewport. O atraso vive só em .tp-in. */ .tp-js [data-tp-anim], .tp-js .tp-anim { opacity: 0; transform: translate3d(var(--tp-x), var(--tp-y), 0); transition: opacity var(--tp-dur) var(--tp-ease) 0ms, transform var(--tp-dur) var(--tp-ease) 0ms; will-change: opacity, transform; } .tp-js [data-tp-anim].tp-in, .tp-js .tp-anim.tp-in { opacity: 1; transform: none; /* 'none', não translate3d(0,0,0): evita deixar containing block e blur de texto em GPU */ transition-delay: calc(var(--tp-delay) + var(--tp-i) * var(--tp-stagger)); } /* Terminou (one-shot): libera a camada de composição. */ .tp-js [data-tp-anim].tp-done, .tp-js .tp-anim.tp-done { will-change: auto; } /* 3. Isolamento de aninhados. Custom properties HERDAM — um elemento animado dentro de outro herdaria --tp-y/--tp-i/--tp-delay do pai e ganharia deslocamento/atraso fantasma. ⚠️ Especificidade: esta regra é (0,2,0), igual às classes de token da seção 4, que vêm DEPOIS e por isso vencem. NÃO REORDENE AS SEÇÕES 3 E 4, e não remova o prefixo .tp-js das classes de token (cairiam para (0,1,0)). Filhos de um grupo não são atingidos: o container carrega [data-tp-stagger], não [data-tp-anim]. */ .tp-js [data-tp-anim] [data-tp-anim], .tp-js [data-tp-anim] .tp-anim, .tp-js .tp-anim [data-tp-anim], .tp-js .tp-anim .tp-anim { --tp-y: 0px; --tp-x: 0px; --tp-delay: 0ms; --tp-stagger: 0ms; --tp-i: 0; } /* 4. API por CLASSE (grade fixa) — para blocos onde o CMS só oferece o campo "CSS class". Valores livres: use data-tp-*. Não misture as duas. */ .tp-js .tp-fade { --tp-y: 0px; --tp-x: 0px; } /* alias de "só fade" */ .tp-js .tp-dur-fast { --tp-dur: 500ms; } .tp-js .tp-dur-base { --tp-dur: 837ms; } .tp-js .tp-dur-slow { --tp-dur: 1335ms; } .tp-js .tp-delay-134 { --tp-delay: 134ms; } .tp-js .tp-delay-150 { --tp-delay: 150ms; } .tp-js .tp-delay-267 { --tp-delay: 267ms; } .tp-js .tp-delay-400 { --tp-delay: 400ms; } .tp-js .tp-delay-600 { --tp-delay: 600ms; } /* o nome diz a DIREÇÃO DE VIAGEM (igual ao AOS: fade-up sobe) */ .tp-js .tp-up-20 { --tp-y: 20px; } .tp-js .tp-up-40 { --tp-y: 40px; } .tp-js .tp-up-76 { --tp-y: 76px; } .tp-js .tp-up-100 { --tp-y: 100px; } .tp-js .tp-down-40 { --tp-y: -40px; } .tp-js .tp-down-100 { --tp-y: -100px; } .tp-js .tp-left-40 { --tp-x: 40px; } /* começa à direita */ .tp-js .tp-left-80 { --tp-x: 80px; } .tp-js .tp-left-160 { --tp-x: 160px; } .tp-js .tp-right-40 { --tp-x: -40px; } /* começa à esquerda */ .tp-js .tp-right-80 { --tp-x: -80px; } .tp-js .tp-right-160 { --tp-x: -160px; } .tp-js .tp-stagger-100 { --tp-stagger: 100ms; } .tp-js .tp-stagger-134 { --tp-stagger: 134ms; } .tp-js .tp-stagger-150 { --tp-stagger: 150ms; } .tp-js .tp-stagger-200 { --tp-stagger: 200ms; } /* 5. Índice do stagger, direto no CSS. Idempotente por construção: o Umbraco pode inserir/remover/reordenar cards e os índices se reajustam sem rescan. Cap em 8 — com stagger 150ms o atraso máximo é 1200ms, não 3s. */ .tp-js [data-tp-group] > *:nth-child(1) { --tp-i: 0; } .tp-js [data-tp-group] > *:nth-child(2) { --tp-i: 1; } .tp-js [data-tp-group] > *:nth-child(3) { --tp-i: 2; } .tp-js [data-tp-group] > *:nth-child(4) { --tp-i: 3; } .tp-js [data-tp-group] > *:nth-child(5) { --tp-i: 4; } .tp-js [data-tp-group] > *:nth-child(6) { --tp-i: 5; } .tp-js [data-tp-group] > *:nth-child(7) { --tp-i: 6; } .tp-js [data-tp-group] > *:nth-child(8) { --tp-i: 7; } .tp-js [data-tp-group] > *:nth-child(n+9) { --tp-i: 8; } /* 6. Correção do overflow das sections. myblockgridlayoutV2.css:397-400 aplica overflow:hidden a TODA

(o seletor `section:not(.a), section:not(.b)` é união, não interseção). A folga real é 40px/20px acima de 992px e ZERO abaixo — porque --section-m-vertical não está definida em lugar nenhum, o que invalida a declaração de padding do mobile. Até 40px é totalmente cortado no celular. Usamos `clip` e não `visible` porque clip NÃO cria scroll container — não há como gerar scrollbar horizontal. E overflow-clip-margin expande o recorte pelo tanto exato necessário, não infinitamente. */ .tp-js .tp-unclip { overflow: clip !important; overflow-clip-margin: var(--tp-clip-margin, 120px); } /* 7. Acessibilidade e impressão. O CSS é a AUTORIDADE do reduced-motion, não o JS: o estado inicial escondido é neutralizado por completo, então mesmo que o JS nunca rode o conteúdo aparece. NÃO zeramos duração — zerar duração não zera delay, e o conteúdo apareceria de estalo depois de 267ms de nada, pior para sensibilidade vestibular. */ @media (prefers-reduced-motion: reduce) { .tp-js [data-tp-anim], .tp-js .tp-anim { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } } @media print { .tp-js [data-tp-anim], .tp-js .tp-anim { opacity: 1 !important; transform: none !important; transition: none !important; } } /* 8. OPCIONAL — preset literal "começa visível e some". Leia a decisão 4 do plano antes: deixa buraco no layout e quebra Ctrl+F/impressão. .tp-js [data-tp-anim].tp-out { opacity: 1; transform: none; } .tp-js [data-tp-anim].tp-out.tp-in { opacity: 0; } */