/* Camada de movimento — o que precisa existir em CSS para o motion.js. Nada aqui esconde conteudo: quem esconde e o GSAP, em tempo de execucao. Sem JS, a pagina e estatica e inteira. */ /* Mascara por palavra (h1 do hero e h2 das secoes). O padding/margin negativo e a folga para descendentes e acentos nao serem cortados pelo overflow. */ .wl { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .14em 0 .08em; margin: -.14em 0 -.08em; } .wi { display: inline-block; will-change: transform; } /* Lenis cuida da rolagem no desktop; o smooth do CSS entraria em conflito: cada scrollTop que o Lenis escreve viraria uma animacao nativa por cima da dele (a ancora "chegava" 1 s atrasada). A classe `lenis` e a que o proprio Lenis mantem no ; uma classe nossa com "lenis" no nome ele apaga, porque limpa o className com /lenis(-\w+)?/g. O !important vence o master do LP1. */ html.lenis { scroll-behavior: auto !important; } html.lenis body { overscroll-behavior: none; } /* --- ambiente, como no twe.life --- */ /* Grao de filme, fixo por cima de tudo, quase invisivel. Desliga com o modo suave. Anima por background-position, NAO por transform: mover a camada inteira contava 0,10 de layout shift no medidor do Chrome (medido em 16/09/2026). */ html.motion body::after { content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); animation: mo-grain 1.2s steps(6) infinite; } @keyframes mo-grain { 0% { background-position: 0 0; } 33% { background-position: -48px 32px; } 66% { background-position: 32px -48px; } 100% { background-position: 0 0; } } /* Brilho que atravessa os botoes principais a cada 4,5 s. */ html.motion .button--primary, html.motion .btn-primary, html.motion .button-main, html.motion .button-full { position: relative; overflow: hidden; } html.motion .button--primary::after, html.motion .btn-primary::after, html.motion .button-main::after, html.motion .button-full::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); animation: mo-shine 4.5s ease-in-out infinite; } @keyframes mo-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } /* Respiracao dos elementos decorativos do hero (LP1: .territory-field). */ html.motion .territory-field, html.motion .launch-overlay { animation: mo-breathe 6s ease-in-out infinite; } @keyframes mo-breathe { 50% { transform: scale(1.06); opacity: .85; } } /* Cards que inclinam: o filho ganha profundidade real. */ html.motion [style*="perspective"] > * { transform: translateZ(1px); } @media (prefers-reduced-motion: reduce) { .wi { will-change: auto; } html.motion body::after, html.motion .button--primary::after, html.motion .btn-primary::after, html.motion .button-main::after, html.motion .button-full::after, html.motion .territory-field, html.motion .launch-overlay { animation: none; } }