/* ===================================================================== AWG — FX v1 (estilos das micro-interações). Carrega DEPOIS do awg.style.v6.css. Nada aqui esconde conteúdo sem que o JS tenha marcado antes (à prova de falha de JS/cache). ===================================================================== */ /* ---------- Reveal v2 (só com JS ativo) ---------- */ html.js-anim [data-fx]{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay:var(--fxd,0ms); } html.js-anim [data-fx].fx-in{opacity:1;transform:none} /* ---------- Split-text do hero ---------- */ html.js-anim .stw{ display:inline-block; animation:fxWord .8s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(90ms + var(--w,0)*55ms); will-change:transform,filter; } @keyframes fxWord{ from{opacity:0;transform:translateY(.55em) rotate(1.5deg);filter:blur(8px)} to{opacity:1;transform:none;filter:blur(0)} } /* ---------- Tilt 3D: reflexo (glare) ---------- */ [data-tilt]{position:relative} .fx-glare{ position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .35s;mix-blend-mode:screen;z-index:3; transform:translateZ(1px); } [data-tilt]:hover{border-color:rgba(0,180,255,.45)} /* ---------- Navbar compacta ao rolar ---------- */ #navbar img{transition:height .35s cubic-bezier(.2,.8,.2,1)} #navbar.nav-scrolled{ background:rgba(6,9,17,.94)!important; box-shadow:0 10px 30px rgba(0,0,0,.45); } #navbar.nav-scrolled nav{padding-top:10px;padding-bottom:10px} #navbar.nav-scrolled img{height:52px!important} /* ---------- Barra de progresso de leitura ---------- */ #fxProgress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:130;opacity:0; background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--electric)); box-shadow:0 0 12px rgba(0,180,255,.55); transition:opacity .3s; pointer-events:none; } /* ---------- Sheen (varredura de luz) nos botões sólidos ---------- */ .btn-primary,.btn-electric,.btn-danger{position:relative;overflow:hidden} .btn-primary::after,.btn-electric::after,.btn-danger::after{ content:'';position:absolute;top:0;bottom:0;left:-80%;width:55%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .55s ease;pointer-events:none; } .btn-primary:hover::after,.btn-electric:hover::after,.btn-danger:hover::after{left:135%} /* ---------- Modais com "mola" (spring) ---------- */ .modal{animation:fxModalIn .55s cubic-bezier(.34,1.4,.64,1)} @keyframes fxModalIn{ from{transform:translateY(34px) scale(.96);opacity:0} to{transform:none;opacity:1} } /* ---------- Marquee de clientes: pausa no hover ---------- */ .marquee:hover{animation-play-state:paused} /* ---------- Acessibilidade: foco visível no teclado ---------- */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* ---------- prefers-reduced-motion: desliga tudo ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } html.js-anim [data-fx]{opacity:1;transform:none} .marquee{animation:none} } /* ---------- Lote 2: cenários 3D por aba (WebGL) ---------- */ .fx3d-mount{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .fx3d-mount canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.95} .fx3d-mount::after{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse at 50% 42%,transparent 32%,rgba(7,10,19,.9) 100%); } .fx3d-content{position:relative;z-index:1} @media (prefers-reduced-motion: reduce){.fx3d-mount{display:none}} /* ---------- Ritmo (r3): animações CSS mais calmas ---------- Originais no v6: float 6s, marquee 30s. Apague este bloco p/ voltar. */ .float{animation-duration:9s} .marquee{animation-duration:45s} /* ---------- Lote LGPD: paridade do banner + tabela da política ---------- */ .btn-outline{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.32);color:#fff} .btn-outline:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)} .pol-table{border-collapse:collapse} .pol-table th,.pol-table td{border:1px solid var(--border);padding:.45rem .6rem;text-align:left;vertical-align:top} .pol-table th{color:#fff;background:rgba(255,255,255,.04);font-weight:600}