/* ========================================================================== Instituto Papo Reto — estados iniciais das animações Tudo aqui depende da classe .js no , ligada por um script inline no . Sem JavaScript, nenhuma dessas regras entra e a página aparece inteira, sem elemento escondido. ========================================================================== */ .js [data-anima] { opacity: 0; } .js [data-anima="abre"] { opacity: 1; clip-path: inset(0 0 100% 0); } /* Os títulos usam line-height 0.88, então a caixa de linha é mais baixa que o glifo: sem folga em cima, o overflow corta os acentos (Ú, Ã, Ç). A folga é compensada por margem negativa para não mexer no ritmo vertical, e o deslocamento inicial sobe para 130% para a palavra continuar fora da máscara mesmo com a caixa mais alta. */ .js .palavra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: 0.2em; margin-top: -0.2em; padding-bottom: 0.14em; margin-bottom: -0.14em; } .js .palavra__i { display: inline-block; transform: translateY(130%); } .js .faixa-rasgo { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js [data-anima], .js .faixa-rasgo, .js .palavra__i { opacity: 1 !important; transform: none !important; clip-path: none !important; } }