/* ══════════════════════════════════════════════════════════════════════════ MOVIMENTO Duas famílias: (A) ENTRADA — dispara uma vez, no scroll. IntersectionObserver + classe. (B) AMBIENTE — keyframes CSS infinitos, de baixa amplitude e ciclo longo. Regra medida: keyframes CSS servem para pulso/loop ambiente, nunca para coreografia de scroll. ══════════════════════════════════════════════════════════════════════ */ /* ── (A) ENTRADA ─────────────────────────────────────────────────────────── O estado inicial mora atrás de html[data-motion="on"], atributo escrito por um script inline no . Sem JavaScript, o atributo nunca existe e a página é servida completa, parada e legível — nada de conteúdo que só passa a existir depois que um observador dispara. */ [data-motion="on"] [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-lenta) var(--ease-saida), transform var(--dur-lenta) var(--ease-saida); will-change: opacity, transform; } [data-motion="on"] [data-reveal].esta-visivel { opacity: 1; transform: none; will-change: auto; } /* Tipografia cinética — UMA frase por página: a tese do hero. As linhas se descobrem por máscara, em vez de aparecer. O texto continua sendo texto no DOM: Ctrl+F, tradução e leitor de tela seguem funcionando. */ [data-motion="on"] .hero__titulo .linha { display: block; overflow: hidden; } [data-motion="on"] .hero__titulo .linha > span { display: block; transform: translateY(105%); transition: transform 900ms var(--ease-saida); } [data-motion="on"] .hero__titulo.esta-visivel .linha > span { transform: none; } [data-motion="on"] .hero__titulo .linha:nth-child(2) > span { transition-delay: 110ms; } /* O h1 mantém data-reveal só para receber a classe do observador — quem se move são as linhas. Dois movimentos no mesmo elemento brigam entre si. */ [data-motion="on"] .hero__titulo { opacity: 1; transform: none; } /* Degraus manuais. O passo medido de stagger no conjunto de referência é 30ms — mas ele foi medido numa escada de transition-duration em hover, não em atraso de entrada. Para entrada, 30ms lê como simultâneo; 90ms é o menor valor em que a sequência é percebida como sequência. */ [data-reveal-atraso="1"] { transition-delay: 90ms; } [data-reveal-atraso="2"] { transition-delay: 180ms; } [data-reveal-atraso="3"] { transition-delay: 270ms; } [data-reveal-atraso="4"] { transition-delay: 360ms; } [data-reveal-atraso="5"] { transition-delay: 450ms; } [data-reveal-atraso="6"] { transition-delay: 540ms; } /* ── (B) AMBIENTE ──────────────────────────────────────────────────────── */ @keyframes girar-borda { to { --angulo-borda: 360deg; } } @keyframes varrer { 0% { transform: translateX(-120%) rotate(6deg); } 38% { transform: translateX(120%) rotate(6deg); } 100% { transform: translateX(120%) rotate(6deg); } } @keyframes pulsar-ponto { 0% { box-shadow: 0 0 0 0 rgba(41,182,209,.5); } 70% { box-shadow: 0 0 0 9px rgba(41,182,209,0); } 100% { box-shadow: 0 0 0 0 rgba(41,182,209,0); } } @keyframes pulsar-anel { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } } @keyframes derivar-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-6%, 5%, 0) scale(1.12); } } @keyframes derivar-b { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(8%, -6%, 0) scale(1); } } @keyframes derivar-c { from { transform: translate3d(0,0,0) scale(.9); opacity: .5; } to { transform: translate3d(-10%, -8%, 0) scale(1.15); opacity: .8; } } @keyframes respirar-halo { from { transform: scale(.96); opacity: .55; } to { transform: scale(1.05); opacity: .85; } } @keyframes varredura-retrato { 0%, 62% { opacity: 0; transform: translate3d(-14%, -8%, 0); } 72% { opacity: .9; } 86%,100% { opacity: 0; transform: translate3d(14%, 8%, 0); } } @keyframes descer-cursor { 0% { transform: translate(-50%, 0); opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translate(-50%, 15px); opacity: 0; } } @keyframes abrir-corpo { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ── Paralaxe de ponteiro/scroll (aplicado por JS via --deslize-*) ─────── */ [data-parallax] { transform: translate3d(var(--deslize-x, 0px), var(--deslize-y, 0px), 0); transition: transform .45s var(--ease-suave); } /* ── Preferência por menos movimento ─────────────────────────────────────── Quem pediu menos movimento não deve pagar por ele: o ambiente é desligado, as entradas viram estado final imediato, o marquee para (e continua arrastável), e o momento pinado do método vira lista estática. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; } [data-motion="on"] [data-reveal] { opacity: 1; transform: none; } [data-motion="on"] .hero__titulo .linha > span { transform: none; } [data-parallax] { transform: none; } body::after { display: none; } .aurora, .retrato-moldura__halo, .retrato-moldura__varredura, .botao__brilho, .whatsapp-flutuante__pulso, .hero__desca-trilho span { display: none; } .metodo__trilho { height: auto; } .metodo__palco { position: static; height: auto; padding: var(--secao-y) 0; } .metodo__quadros { min-height: 0; display: grid; gap: 44px; } .metodo__passo { position: static; opacity: 1; transform: none; filter: none; pointer-events: auto; } .metodo__navegacao { display: none; } }