/* ========================================================================== motion.css — sistema de movimento do site Carregado em todas as páginas, antes das folhas específicas. Três responsabilidades: 1. tokens de duração e curva, para o movimento ser um sistema e não 7 durações diferentes espalhadas; 2. entrada suave de seções ao rolar (classes .reveal); 3. respeito a prefers-reduced-motion, que nenhuma folha fazia. REGRA DE SEGURANÇA: o estado inicial do reveal só existe quando o tem a classe .js-motion, que só o motion.js aplica. Sem JS, ou se o script falhar, o conteúdo nasce visível. Movimento nunca esconde conteúdo. ========================================================================== */ :root { /* Durações. Micro-interação é rápida; entrada de seção é generosa. */ --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 620ms; /* Curvas. Desacelerar no fim é o que faz parecer suave em vez de mecânico. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* Distância que um elemento percorre ao entrar. Curto é mais elegante. */ --reveal-shift: 16px; --reveal-stagger: 70ms; } /* -------------------------------------------------------------------------- 1. Entrada ao rolar -------------------------------------------------------------------------- */ .js-motion .reveal { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); will-change: opacity, transform; } .js-motion .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } /* Terminada a entrada, devolve a camada ao navegador. */ .js-motion .reveal.is-done { will-change: auto; } /* Filhos entram em cascata, o que dá ritmo em vez de tudo aparecer junto. */ .js-motion .reveal-group > * { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); } .js-motion .reveal-group.is-visible > * { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .js-motion .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; } .js-motion .reveal-group.is-visible > *:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); } .js-motion .reveal-group.is-visible > *:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); } .js-motion .reveal-group.is-visible > *:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); } .js-motion .reveal-group.is-visible > *:nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); } .js-motion .reveal-group.is-visible > *:nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); } /* A partir do sétimo, entram juntos: cascata longa demais vira espera. */ .js-motion .reveal-group.is-visible > *:nth-child(n + 7) { transition-delay: calc(var(--reveal-stagger) * 6); } /* -------------------------------------------------------------------------- 2. Micro-interações compartilhadas -------------------------------------------------------------------------- */ /* A seta que desliza no hover do botão. Antes isso era feito animando `gap`, que recalcula layout a cada quadro; translate roda só no compositor. */ a:hover > svg, button:hover > svg { transition: transform var(--dur-base) var(--ease-out); } /* Foco de teclado visível e consistente — não havia padrão no site. */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; } /* -------------------------------------------------------------------------- 3. prefers-reduced-motion Para quem pede menos movimento, o conteúdo continua chegando: só chega sem deslocamento e sem espera. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .js-motion .reveal, .js-motion .reveal-group > * { opacity: 1 !important; transform: none !important; } }