/* * Movimento da LP (REQ-022) — entrada dos elementos e parallax. * * REGRA DE OURO: **seção nunca anima, fundo nunca anima.** A seção só * recebe o estado `data-revelado` (posto pelo site.js) e serve de gatilho; * quem tem estado inicial e transição são os elementos internos listados * abaixo. Nenhum seletor deste arquivo pode pegar um elemento que carregue * cor de fundo, painel arredondado ou textura — foi exatamente o defeito * que motivou este requisito. * * Para animar um elemento novo, some o seletor às duas listas da sua seção * (estado inicial e estado revelado). * * O estado inicial (invisível) depende de `[data-anima]` no , ligado * por um script no do layout. Sem JS o atributo nunca aparece e a * página é servida completa e estática — o conteúdo jamais fica preso * invisível esperando um script que não vai rodar. `prefers-reduced-motion: * reduce` desliga tudo por fora, no media query. */ :root { /* Curva "editorial": entra rápido e assenta devagar */ --ease-entrada: cubic-bezier(0.22, 1, 0.36, 1); /* * Ritmo calibrado com o cliente (07/08): entrada demorada e cascata * espaçada, para dar tempo de ver cada elemento entrar — o padrão * anterior (800ms / 80ms) aparecia rápido demais. */ --dur-entrada: 1100ms; --passo-cascata: 150ms; } @media (prefers-reduced-motion: no-preference) { /* ========================================================================== Estado inicial dos elementos que animam (agrupados por seção) ========================================================================== */ /* Hero — revela no load, já está na viewport */ [data-anima] .hero__titulo, [data-anima] .hero__apoio, [data-anima] .hero__acoes, /* Barra de números */ [data-anima] .numeros__item, /* Filme */ [data-anima] .filme__thumb, [data-anima] .filme__titulo, [data-anima] .filme__texto, /* Por que Positivo Tecnologia */ [data-anima] .porque__cabeca, [data-anima] .porque__titulo, [data-anima] .cartao-solucao, [data-anima] .porque__nota, /* Jornada + Onde estratégia + diferenciais */ [data-anima] .jornada__cabeca, [data-anima] .jornada__titulo, [data-anima] .etapa, [data-anima] .jornada__onde-titulo, [data-anima] .jornada__onde-texto, [data-anima] .diferenciais-mercado__chamada, [data-anima] .diferenciais-mercado__apoio, [data-anima] .diferenciais-mercado__item, /* Ecossistema */ [data-anima] .ecossistema__cabeca, [data-anima] .ecossistema__titulo, [data-anima] .ecossistema__barra, [data-anima] .ecossistema__globos, /* Fale Conosco */ [data-anima] .contato__cabeca, [data-anima] .contato__titulo, [data-anima] .canais-venda__titulo, [data-anima] .canais-venda__lista li, [data-anima] .contato__assinatura, [data-anima] .contato__cartao { opacity: 0; transform: translateY(20px); filter: blur(10px); } /* ========================================================================== Estado revelado — a seção marcada solta os filhos ========================================================================== */ [data-revelado] .hero__titulo, [data-revelado] .hero__apoio, [data-revelado] .hero__acoes, [data-revelado] .numeros__item, [data-revelado] .filme__thumb, [data-revelado] .filme__titulo, [data-revelado] .filme__texto, [data-revelado] .porque__cabeca, [data-revelado] .porque__titulo, [data-revelado] .cartao-solucao, [data-revelado] .porque__nota, [data-revelado] .jornada__cabeca, [data-revelado] .jornada__titulo, [data-revelado] .etapa, [data-revelado] .jornada__onde-titulo, [data-revelado] .jornada__onde-texto, [data-revelado] .diferenciais-mercado__chamada, [data-revelado] .diferenciais-mercado__apoio, [data-revelado] .diferenciais-mercado__item, [data-revelado] .ecossistema__cabeca, [data-revelado] .ecossistema__titulo, [data-revelado] .ecossistema__barra, [data-revelado] .ecossistema__globos, [data-revelado] .contato__cabeca, [data-revelado] .contato__titulo, [data-revelado] .canais-venda__titulo, [data-revelado] .canais-venda__lista li, [data-revelado] .contato__assinatura, [data-revelado] .contato__cartao { opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity var(--dur-entrada) var(--ease-entrada) var(--anima-atraso, 0ms), transform var(--dur-entrada) var(--ease-entrada) var(--anima-atraso, 0ms), filter var(--dur-entrada) var(--ease-entrada) var(--anima-atraso, 0ms); } /* ========================================================================== Cascatas Dentro da seção, a ordem de leitura (tag → título → conteúdo); dentro de um grupo, um item por vez, a cada --passo-cascata. ========================================================================== */ .hero__apoio { --anima-atraso: 200ms; } .hero__acoes { --anima-atraso: 400ms; } .filme__texto { --anima-atraso: 220ms; } .porque__titulo, .jornada__titulo, .ecossistema__titulo, .contato__titulo, .jornada__onde-texto { --anima-atraso: 180ms; } .diferenciais-mercado__apoio { --anima-atraso: 150ms; } .canais-venda__lista li { --anima-atraso: 150ms; } .contato__cartao { --anima-atraso: 300ms; } .ecossistema__barra { --anima-atraso: 350ms; } .ecossistema__globos { --anima-atraso: 550ms; } .numeros__item:nth-child(2), .cartao-solucao:nth-child(2), .etapa:nth-child(2), .diferenciais-mercado__item:nth-child(2), .canais-venda__lista li:nth-child(2) { --anima-atraso: calc(var(--passo-cascata) * 2); } .numeros__item:nth-child(3), .cartao-solucao:nth-child(3), .etapa:nth-child(3), .diferenciais-mercado__item:nth-child(3), .canais-venda__lista li:nth-child(3) { --anima-atraso: calc(var(--passo-cascata) * 3); } .numeros__item:nth-child(4), .etapa:nth-child(4), .diferenciais-mercado__item:nth-child(4), .canais-venda__lista li:nth-child(4) { --anima-atraso: calc(var(--passo-cascata) * 4); } .numeros__item:nth-child(5), .etapa:nth-child(5), .diferenciais-mercado__item:nth-child(5), .canais-venda__lista li:nth-child(5) { --anima-atraso: calc(var(--passo-cascata) * 5); } .etapa:nth-child(6), .canais-venda__lista li:nth-child(6) { --anima-atraso: calc(var(--passo-cascata) * 6); } .canais-venda__lista li:nth-child(7) { --anima-atraso: calc(var(--passo-cascata) * 7); } .canais-venda__lista li:nth-child(8) { --anima-atraso: calc(var(--passo-cascata) * 8); } /* ========================================================================== Parallax — o site.js escreve o deslocamento em --parallax ========================================================================== */ /* * As imagens ficam levemente maiores que o container para o deslocamento * não abrir fresta nas bordas; o container recorta a sobra. Nestes dois * elementos o `transform` é só do parallax — a entrada anima apenas * opacidade e desfoque, para os dois efeitos não disputarem a mesma * propriedade. */ .hero__midia { overflow: hidden; } /* * A escala é só a folga necessária para o curso do parallax (±20/28px): * o mínimo possível, para não reenquadrar as fotos. */ [data-parallax] { transform: scale(1.08) translate3d(0, var(--parallax, 0px), 0); will-change: transform; } [data-anima] .hero__imagem[data-parallax] { opacity: 0; filter: blur(10px); } [data-revelado] .hero__imagem[data-parallax] { opacity: 1; filter: blur(0); transition: opacity var(--dur-entrada) var(--ease-entrada), filter var(--dur-entrada) var(--ease-entrada); } }