/* ========================================================= Reveal on scroll — entradas sutis e elegantes (fade / fade-up) --------------------------------------------------------- Padrão de alto padrão: surgimentos LENTOS e longos, com curva desacelerada (--ease-out). Anima APENAS opacity/transform (compostas na GPU, sem reflow), dispara UMA única vez via IntersectionObserver (scripts/modules/reveal.js) e respeita prefers-reduced-motion. Segurança: só esconde quando há JS (classe .js no , setada por um inline script no ). Sem JS, o conteúdo aparece normal — nunca fica invisível numa página de vendas. ========================================================= */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* Variante só-fade (sem deslocar) — ideal p/ imagens e blocos grandes */ .js [data-reveal="fade"] { transform: none; } /* Estado revelado */ .js [data-reveal][data-revealed="true"] { opacity: 1; transform: none; } /* Stagger (cascata) para grupos — cards, stats, logos, etc. Passos maiores p/ uma leitura mais calma e sofisticada. */ .js [data-reveal][data-delay="1"] { --reveal-delay: 160ms; } .js [data-reveal][data-delay="2"] { --reveal-delay: 320ms; } .js [data-reveal][data-delay="3"] { --reveal-delay: 480ms; } .js [data-reveal][data-delay="4"] { --reveal-delay: 640ms; } /* ========================================================= Hero — entrada orquestrada no load (independe de scroll). Sobe e revela em cascata, lento e elegante, transmitindo o padrão do empreendimento. Guard .js: sem JS tudo aparece na hora. NÃO anima a mídia de fundo (LCP) — apenas o conteúdo. ========================================================= */ @keyframes hero-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } .js .hero__metro, .js .hero__lede, .js .hero__features, .js .hero__rule, .js .hero__note, .js .hero__cta, .js .hero__partners { opacity: 0; animation: hero-rise 1300ms var(--ease-out) both; } .js .hero__metro { animation-delay: 200ms; } .js .hero__lede { animation-delay: 360ms; } .js .hero__features { animation-delay: 520ms; } .js .hero__rule { animation-delay: 680ms; } .js .hero__note { animation-delay: 840ms; } .js .hero__cta { animation-delay: 1000ms; } .js .hero__partners { animation-delay: 1180ms; } /* Acessibilidade: quem prefere menos movimento vê tudo estático */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .js .hero__metro, .js .hero__lede, .js .hero__features, .js .hero__rule, .js .hero__note, .js .hero__cta, .js .hero__partners { opacity: 1; animation: none; } }