/* ============================================ iGreen Energy · Sistema de movimento Só transform, opacity e filter: nada que force layout. Os estados iniciais dependem de .js-motion no , marcado por script inline no head. Sem JS, tudo visível. ============================================ */ @media (prefers-reduced-motion: no-preference) { /* -------------------------------------------- Revelação ao entrar na viewport -------------------------------------------- */ .js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out), filter 0.75s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; filter: blur(0); will-change: auto; } /* -------------------------------------------- Título do hero: cada linha sobe pela máscara -------------------------------------------- */ .js-motion [data-reveal-line] > * , .js-motion .hero-title .line { display: block; } .js-motion .hero-title .line { opacity: 0; transform: translate3d(0, 105%, 0) rotate(2deg); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); } /* O texto do hero e o elemento de LCP. Deixa-lo transparente ate o JS rodar adiava a maior pintura em 1 a 1,8 s, medido. Dentro do hero a entrada acontece so por deslocamento: o pixel ja nasce pintado. */ .js-motion .hero [data-reveal] { opacity: 1; filter: none; transform: translate3d(0, 22px, 0); transition: transform 0.75s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js-motion .hero [data-reveal].is-revealed { transform: none; } .js-motion .hero-title .line:nth-child(1) { transition-delay: 60ms; } .js-motion .hero-title .line:nth-child(2) { transition-delay: 150ms; } .js-motion .hero-title .line:nth-child(3) { transition-delay: 240ms; } .js-motion .hero-title.is-revealed .line { opacity: 1; transform: none; } /* -------------------------------------------- Entrada em cascata para grades de cartões -------------------------------------------- */ .js-motion [data-stagger] > * { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.985); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } .js-motion [data-stagger].is-revealed > * { opacity: 1; transform: none; } /* -------------------------------------------- Aurora do hero: deriva lenta e contínua -------------------------------------------- */ .hero-aurora { animation: auroraDrift 22s var(--ease-soft) infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(-2%, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 2%, 0) scale(1.03); } } /* -------------------------------------------- Paralaxe: profundidade controlada pelo JS -------------------------------------------- */ [data-parallax] { transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; } /* -------------------------------------------- Inclinação 3D nos cartões -------------------------------------------- */ [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0); transform-style: preserve-3d; transition: transform var(--dur) var(--ease-out); } [data-tilt].is-tilting { transition: transform 90ms linear; } /* -------------------------------------------- Botão magnético -------------------------------------------- */ [data-magnetic] { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); } [data-magnetic].is-pulling { transition: transform 120ms linear; } } /* ============================================ Animações movidas pelo scroll, quando o navegador suporta timeline nativa. ============================================ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .section-header { animation: headerLift linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; } @keyframes headerLift { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } } /* o JS não precisa observar estes: o próprio scroll resolve */ .js-motion .section-header[data-reveal] { opacity: 1; transform: none; filter: none; transition: none; } } } /* ============================================ Estados de foco e ponteiro que parecem desenhados ============================================ */ .btn:focus-visible, .faq-question:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } @media (hover: hover) { .nav-logo:hover .nav-logo-text span { animation: logoFlicker 0.5s var(--ease-soft); } @keyframes logoFlicker { 0%, 100% { opacity: 1; } 30% { opacity: 0.45; } 60% { opacity: 1; } } } /* O banner de consentimento mora em consent.css: ele precisa funcionar também na página do cliente final, que não carrega os tokens daqui. */