/* ============================================================ MOVIMENTO Regras da casa: toda animação tem função (revelar hierarquia, guiar o olho, dar peso a um dado). Nada pisca, nada quica, nada chama atenção para si mesmo. Tudo é ativado pela classe .js no . Sem JavaScript, o conteúdo nasce visível. ============================================================ */ /* --------------------------------------------------------- 1. REVELAÇÃO BASE --------------------------------------------------------- */ .js [data-anim] { --delay: calc(var(--i, 0) * var(--stagger)); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) var(--delay), transform var(--dur-slow) var(--ease-out) var(--delay), filter var(--dur-slow) var(--ease-out) var(--delay); } .js [data-anim].is-in { opacity: 1; transform: none; filter: none; } /* -- sobe -- */ .js [data-anim="up"] { transform: translateY(22px); } /* -- entra pela lateral, para blocos laterais -- */ .js [data-anim="side"] { transform: translateX(28px); } /* -- desfoque suave: bom para blocos densos de dado -- */ .js [data-anim="soft"] { transform: translateY(14px); filter: blur(6px); } /* --------------------------------------------------------- 2. FIO QUE SE DESENHA A estrutura da página é feita de linhas. Elas se traçam da esquerda, como um desenho técnico sendo executado. --------------------------------------------------------- */ .js [data-anim="rule"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mask) var(--ease-mask) var(--delay); } .js [data-anim="rule"].is-in { transform: scaleX(1); } /* --------------------------------------------------------- 3. MÁSCARA DE FOTO A imagem é revelada por uma cortina que sobe, e ao mesmo tempo relaxa de uma escala levemente maior. Dá sensação de material sendo descoberto, não de elemento aparecendo. --------------------------------------------------------- */ .js [data-anim="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-mask) var(--ease-mask) var(--delay); } .js [data-anim="mask"].is-in { clip-path: inset(0 0 0 0); } .js [data-anim="mask"] img { transform: scale(1.12); transition: transform 1400ms var(--ease-mask) var(--delay); } .js [data-anim="mask"].is-in img { transform: scale(1); } /* --------------------------------------------------------- 4. TÍTULO LINHA A LINHA Cada linha sobe de dentro da própria caixa. É o movimento que mais transmite acabamento, e o mais fácil de exagerar — por isso o deslocamento é curto e a escada entre linhas é curta. --------------------------------------------------------- */ /* O padding evita que o overflow:hidden corte descendentes (ç, g, y), e a margem negativa devolve o espaço para o ritmo entre linhas. */ .line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; } .line-mask > span { display: block; } .js [data-anim="lines"] .line-mask > span { transform: translateY(105%); transition: transform var(--dur-mask) var(--ease-mask); } .js [data-anim="lines"] .line-mask:nth-child(2) > span { transition-delay: 90ms; } .js [data-anim="lines"] .line-mask:nth-child(3) > span { transition-delay: 180ms; } .js [data-anim="lines"] .line-mask:nth-child(4) > span { transition-delay: 270ms; } .js [data-anim="lines"] { opacity: 1; } .js [data-anim="lines"].is-in .line-mask > span { transform: translateY(0); } /* --------------------------------------------------------- 5. PARALAXE LIGADA AO SCROLL CSS puro, na thread do compositor. Onde não houver suporte, simplesmente não acontece — nada quebra. --------------------------------------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Escala mínima: só o suficiente para esconder as bordas do deslocamento. Escala alta ampliaria a foto além da resolução nativa e borraria a imagem. */ .photo--parallax img { animation: photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes photo-drift { from { transform: translateY(-2%) scale(1.045); } to { transform: translateY(2%) scale(1.045); } } /* Numerais das etapas ganham peso conforme entram */ .numeral--track { animation: numeral-weight linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } @keyframes numeral-weight { from { opacity: 0.25; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } } } /* --------------------------------------------------------- 6. LINHA DE CORRENTE Único elemento puramente atmosférico do site. Um pulso que percorre o fio, na cadência de uma corrente elétrica. --------------------------------------------------------- */ .current { position: relative; height: 1px; background: var(--line); overflow: hidden; } .current::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: linear-gradient( to right, transparent, var(--brand-green) 48%, var(--brand-green-bright) 56%, transparent ); animation: current-travel 6s var(--ease-in-out) infinite; } @keyframes current-travel { 0% { transform: translateX(-100%); } 100% { transform: translateX(433%); } } /* --------------------------------------------------------- 7. CABEÇALHO --------------------------------------------------------- */ .header { transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), height var(--dur) var(--ease-out); } .header__inner { transition: height var(--dur) var(--ease-out); } /* --------------------------------------------------------- 8. TRANSIÇÃO ENTRE PÁGINAS O site tem 4 páginas; sem isso a navegação corta seco. Onde houver suporte, a troca ganha um encadeamento curto. --------------------------------------------------------- */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: vt-out 180ms var(--ease-in-out) both; } ::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } } } /* --------------------------------------------------------- 9. RESPEITO A prefers-reduced-motion Desliga movimento, preserva legibilidade e estado final. --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-anim] { opacity: 1; transform: none; filter: none; clip-path: none; } .js [data-anim="lines"] .line-mask > span { transform: none; } .js [data-anim="mask"] img { transform: none; } .current::after { animation: none; opacity: 0.4; } }