/* MZ — camada rica de movimento (etapa 7). O baseline de reveal fica em estilo.css. Aqui só o que é "assinatura". Tudo dentro do guard de prefers-reduced-motion. */ /* --------------------------------------------------------------------------- FAIL-SAFE 1: sem JS, nada fica escondido. O marca html.js antes da pintura; se o script não rodar, estes antídotos garantem que o conteúdo apareça. --------------------------------------------------------------------------- */ html:not(.js) [data-reveal], html:not(.js) .passo, html:not(.js) .escopo__palco img[data-escopo-img="0"] { opacity: 1 !important; transform: none !important; } html:not(.js) .passo__trilho::before { transform: scaleY(1) !important; } html:not(.js) [data-underline] { background-size: 100% 3px !important; } /* --------------------------------------------------------------------------- HERO — zoom invertido: a imagem entra ampliada e assenta --------------------------------------------------------------------------- */ .hero-media { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .hero-media.is-assentada { transform: scale(1); } /* O parallax escreve translate3d no filho, para não brigar com o scale do pai */ .hero-media img { will-change: transform; } /* --------------------------------------------------------------------------- SUBLINHADO QUE DESENHA --------------------------------------------------------------------------- */ [data-underline] { background-image: linear-gradient(var(--terracota-500), var(--terracota-500)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0 3px; transition: background-size .9s var(--ease) .25s; } [data-underline].is-visivel { background-size: 100% 3px; } /* --------------------------------------------------------------------------- ESCALONAMENTO das entradas --------------------------------------------------------------------------- */ [data-delay="1"] { transition-delay: .10s; } [data-delay="2"] { transition-delay: .20s; } [data-delay="3"] { transition-delay: .30s; } /* --------------------------------------------------------------------------- FIGURAS — a imagem revela por clip e ainda dá um leve zoom de saída --------------------------------------------------------------------------- */ .rotina__figura img, .assina__figura img { transform: scale(1.06); transition: transform 1.4s var(--ease); } .rotina__figura.is-visivel img, .assina__figura.is-visivel img { transform: scale(1); } /* --------------------------------------------------------------------------- CONTADORES — reserva a largura para o número não empurrar o rótulo --------------------------------------------------------------------------- */ [data-count] { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .hero-media, .rotina__figura img, .assina__figura img { transform: none !important; transition: none !important; } [data-underline] { background-size: 100% 3px !important; transition: none !important; } [data-delay] { transition-delay: 0s !important; } }