/* animations.css — todo o movimento do site. Carrega por último e depende de tokens.css. O critério é sempre o mesmo: o movimento serve à leitura, não ao espetáculo. Entradas curtas, deslocamentos pequenos, nada que faça alguém esperar para ler o que veio buscar. As durações vêm de tokens.css, onde `prefers-reduced-motion` já as zera na origem. Ainda assim os blocos abaixo repetem a proteção: zerar a duração não desfaz um `transform`, e sem isso o elemento ficaria parado — porém deslocado do lugar. */ /* ---------- A cascata ---------- Os blocos entram conforme a página é rolada. O estado inicial só vale sob `.fp-js`, classe que main.js põe no ao rodar. Se o JavaScript falhar, a classe não entra, nada fica invisível e a página aparece inteira. É por isso que todo seletor daqui começa com `.fp-js` — uma animação nunca pode ser a razão de um site ficar em branco. */ .fp-js .fp-reveal { opacity: 0; transform: translateY(var(--fp-reveal-distance)); transition: opacity var(--fp-reveal-duration) var(--fp-ease-out), transform var(--fp-reveal-duration) var(--fp-ease-out); /* Pede ao navegador que prepare a camada antes de a animação começar */ will-change: opacity, transform; } .fp-js .fp-reveal.is-visible { opacity: 1; transform: none; /* Devolve a camada depois de animar. `will-change` esquecido em dezenas de elementos consome memória de vídeo pelo resto da visita. */ will-change: auto; } /* Entrada escalonada entre irmãos. O `--i` é numerado pelo JavaScript nos filhos de [data-stagger]; cada item entra um passo depois do anterior, e o olho acompanha a sequência em vez de receber a lista inteira de uma vez. */ .fp-js .fp-reveal--stagger { transition-delay: calc(var(--i, 0) * var(--fp-reveal-step)); } /* Teto para listas longas: sem ele, o vigésimo item esperaria mais de dois segundos. Do oitavo em diante todos entram juntos. */ .fp-js .fp-reveal--stagger:nth-child(n + 9) { transition-delay: calc(8 * var(--fp-reveal-step)); } /* Em bloco de duas colunas, cada lado entra do seu lado. Com moderação: movimento lateral chama muito mais atenção que o vertical. */ .fp-js .fp-reveal--left { transform: translate3d(calc(var(--fp-reveal-distance) * -1), 0, 0); } .fp-js .fp-reveal--right { transform: translate3d(var(--fp-reveal-distance), 0, 0); } .fp-js .fp-reveal--left.is-visible, .fp-js .fp-reveal--right.is-visible { transform: none; } /* Versão discreta, para título e texto longo: deslocamento curto, para a linha não saltar sob o olho de quem já começou a ler. */ .fp-js .fp-reveal--soft { transform: translateY(calc(var(--fp-reveal-distance) * 0.45)); } @media (prefers-reduced-motion: reduce) { .fp-js .fp-reveal, .fp-js .fp-reveal--left, .fp-js .fp-reveal--right, .fp-js .fp-reveal--soft { opacity: 1; transform: none; transition: none; } .fp-js .fp-reveal--stagger, .fp-js .fp-reveal--stagger:nth-child(n + 9) { transition-delay: 0s; } } /* ---------- Hero ---------- O único bloco que não espera a rolagem: anima assim que a página abre, e é ele que dá o tom do movimento no resto da visita. Os atrasos são fixos porque são quatro filhos sempre — não vale a numeração do JavaScript. */ @keyframes fp-hero-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } } .fp-js .fp-hero__content > * { animation: fp-hero-in var(--fp-reveal-duration) var(--fp-ease-out) both; } .fp-js .fp-hero__content > *:nth-child(1) { animation-delay: 120ms; } .fp-js .fp-hero__content > *:nth-child(2) { animation-delay: 240ms; } .fp-js .fp-hero__content > *:nth-child(3) { animation-delay: 360ms; } .fp-js .fp-hero__content > *:nth-child(4) { animation-delay: 480ms; } @media (prefers-reduced-motion: reduce) { .fp-js .fp-hero__content > * { animation: none; } } /* ---------- Case Finder ---------- O painel desliza no sentido da navegação: entra pela direita ao avançar e pela esquerda ao voltar. É o que faz "Voltar" parecer voltar, e não simplesmente mostrar outra pergunta. Quem escolhe o sentido é o `data-direction` escrito por case-finder.js. */ @keyframes fp-step-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } } @keyframes fp-step-in-back { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: none; } } .fp-finder__panel { animation: fp-step-in var(--fp-duration) var(--fp-ease-out) both; } .fp-finder__panel[data-direction="back"] { animation-name: fp-step-in-back; } @media (prefers-reduced-motion: reduce) { .fp-finder__panel { animation: none; } }