/* Estilos exclusivos da landing page (#site-principal). Carregado sempre, mas todos os seletores são escopados à landing ou a classes ls-* — zero impacto no portal do cliente. Convenção: reveals/animações só ativam quando tem .ls-on (adicionada pelo js/landing.js quando o usuário NÃO pediu prefers-reduced-motion). Sem JS ou com motion reduzido, tudo fica visível e estático — conteúdo nunca depende de animação. */ /* ── Reveal ao rolar ─────────────────────────────────────────────────────── */ .ls-on [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1), filter .75s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform, filter; } .ls-on [data-reveal="left"] { transform: translateX(-36px); } .ls-on [data-reveal="right"] { transform: translateX(36px); } .ls-on [data-reveal="zoom"] { transform: scale(.92) translateY(10px); } .ls-on [data-reveal].ls-in { opacity: 1; transform: none; filter: none; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .ls-hero { background: radial-gradient(1100px 560px at 78% -12%, rgba(0, 137, 80, .16), transparent 62%), radial-gradient(900px 520px at 8% 112%, rgba(212, 175, 55, .12), transparent 58%), linear-gradient(180deg, #071B31 0%, #0A2540 52%, #0C2B4E 100%); } #ls-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Texto com brilho dourado varrendo (títulos de impacto) */ .ls-shimmer { background: linear-gradient(100deg, #D4AF37 0%, #F5E6B3 28%, #D4AF37 55%, #E5C665 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ls-shimmer 7s ease-in-out infinite; } @keyframes ls-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } /* Indicador de scroll no rodapé do hero */ .ls-scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 10; color: rgba(226, 232, 240, .55); animation: ls-cue 2.4s ease-in-out infinite; } @keyframes ls-cue { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .55; } 50% { transform: translateX(-50%) translateY(9px); opacity: 1; } } /* ── Nav: encolhe e ganha sombra ao rolar ────────────────────────────────── */ .ls-nav-inner { height: 5rem; transition: height .3s ease; } .ls-nav-scrolled .ls-nav-inner { height: 4rem; } .ls-nav-scrolled { box-shadow: 0 10px 34px -12px rgba(10, 37, 64, .28) !important; } /* Âncoras não somem embaixo da nav fixa */ #site-principal section[id] { scroll-margin-top: 96px; } /* Acessibilidade: anel de foco na identidade da marca */ #site-principal :focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; border-radius: 6px; } /* ── Tilt 3D nos cards (transform aplicado pelo JS por frame) ────────────── */ [data-tilt] { transform-style: preserve-3d; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; } [data-tilt].ls-tilting { transition: box-shadow .35s ease; } /* ── Seção Plataforma ────────────────────────────────────────────────────── */ .ls-plataforma { background: radial-gradient(1000px 600px at 50% -10%, rgba(17, 58, 99, .55), transparent 65%), linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(180deg, #061726 0%, #0A2540 100%); background-size: auto, 44px 44px, 44px 44px, auto; } /* Card-moldura do destaque IA: borda gradiente + halo pulsando */ .ls-spotlight { position: relative; border-radius: 1.75rem; padding: 1px; background: linear-gradient(135deg, rgba(212, 175, 55, .7), rgba(0, 137, 80, .55) 50%, rgba(212, 175, 55, .7)); animation: ls-halo 4.5s ease-in-out infinite; } @keyframes ls-halo { 0%, 100% { box-shadow: 0 24px 90px -28px rgba(212, 175, 55, .38); } 50% { box-shadow: 0 24px 110px -22px rgba(0, 137, 80, .42); } } .ls-spotlight-inner { border-radius: calc(1.75rem - 1px); background: linear-gradient(160deg, #0B2036 0%, #0A2540 55%, #0D2E54 100%); overflow: hidden; } .ls-badge-ia { animation: ls-pulse 2.6s ease-in-out infinite; } @keyframes ls-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .45); } 55% { box-shadow: 0 0 0 9px rgba(212, 175, 55, 0); } } /* Cards de módulo (são