/* Narrativa de scroll — estados iniciais e adereços das cenas. Só valem enquanto tiver a classe "anima" (posta pelo header e removida se o JS não rodar). Depois de revelado, o elemento ganha data-visto e sai destas regras para sempre. */ /* ---- estados de partida das cenas ---- */ html.anima [data-story]:not([data-visto]){opacity:0} html.anima [data-story="subir"]:not([data-visto]){transform:translateY(30px)} html.anima [data-story="cair"]:not([data-visto]){transform:translateY(-24px)} html.anima [data-story="esq"]:not([data-visto]){transform:translateX(-34px)} html.anima [data-story="dir"]:not([data-visto]){transform:translateX(34px)} html.anima [data-story="zoom"]:not([data-visto]){transform:scale(.94)} html.anima [data-story="titulo"]:not([data-visto]) .palavra{opacity:0} html.anima [data-story="titulo"] .palavra{display:inline-block;will-change:transform,opacity} /* ---- cenas do problema: o "?" dos esquemas só aparece depois que o traço se desenha (main.js), para o desenho não entregar o final antes da hora ---- */ html.anima .esq:not([data-visto]) .esq-fig text{opacity:0} .esq-fig text{transition:opacity .45s ease .6s} /* ---- hero: o conteúdo sobe e some enquanto a página avança ---- */ .hero > .wrap{will-change:transform,opacity} /* ---- preço-âncora: o risco é traçado quando a linha entra em cena ---- */ html.anima .ancora s{text-decoration:none;position:relative} html.anima .ancora s::after{content:"";position:absolute;left:-2px;right:-2px;top:56%;height:2px; border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .6s cubic-bezier(.4,.9,.3,1)} html.anima .ancora s.riscado::after{transform:scaleX(1)} /* ---- régua do tempo: o trilho de um marco ao outro se estica na sequência ---- */ .passo{overflow:visible} .passo + .passo::before{content:"";position:absolute;border-radius:2px; transition:transform .55s cubic-bezier(.3,.9,.3,1) .12s} @media(min-width:901px){ /* o segmento vai do marco anterior até este; as colunas são iguais, então 100% é a largura de uma coluna e 24px é o gap da grade */ .passo + .passo::before{left:calc(-100% - 24px + 40px);top:19px; width:calc(100% + 24px - 40px);height:2px; background:linear-gradient(90deg,var(--ping-fundo),var(--ping)); transform:scaleX(0);transform-origin:left} .passo + .passo.ligado::before{transform:scaleX(1)} .passo.fim::before{background:linear-gradient(90deg,var(--ping),var(--ok))} } @media(max-width:900px){ /* empilhado, o fio desce do próprio marco até o seguinte, sem quebra */ .passo + .passo::before{display:none} .passo:not(:last-child)::after{content:"";position:absolute;left:19px;top:50px;bottom:-6px; width:2px;border-radius:2px;background:linear-gradient(180deg,var(--ping-fundo),var(--ping)); transform:scaleY(0);transform-origin:top; transition:transform .55s cubic-bezier(.3,.9,.3,1) .12s} .passo:not(:last-child).ligado::after{transform:scaleY(1)} .passo:nth-last-child(2)::after{background:linear-gradient(180deg,var(--ping),var(--ok))} } /* ---- o número do passo pulsa quando o card chega ---- */ .passo .n{will-change:transform} /* ---- quem já foi revelado não carrega mais custo de composição ---- */ [data-visto]{will-change:auto} @media(prefers-reduced-motion:reduce){ .passo + .passo::before,.passo::after{transform:none !important;transition:none} html.anima .ancora s{text-decoration:line-through} html.anima .ancora s::after{display:none} }