/* abertura-20260909a.css — abertura da home (09/09/2026, aprovada pelo Gui na moviola). A marca acende, pousa na navbar e entrega a cena ao herói de sempre: ponto de luz → fio → wordmark com blur fechando → varredura de luz pelas letras → pausa de três décimos → o logo grande voa e encolhe até o .brand da navbar (FLIP) enquanto o fio estica e vira a linha da barra. Só então home-anim e hero-vivo começam. Regras: - só existe com html.ab-on (decidido no : sem reduced-motion, sem hash, uma vez por sessão). Sem a classe, esta folha é inerte e a home abre como antes. - só transform/opacity animam (o fio cresce por scaleX; o logo voa por x/y/scale). - zero asset novo: o wordmark é o mesmo PNG de 14 KB da navbar; a varredura usa esse PNG como máscara. - o descritor NÃO entra aqui (46 caracteres em caixa alta pedem 2,7 s de leitura): ele aparece 1 s depois como eyebrow do herói e segue no rodapé (ADR-011). Cache immutable: nome novo a cada mudança. */ .abertura{display:none;} html.ab-on .abertura{display:block;position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;} html.ab-on .site-header .brand{opacity:0;} html.ab-on.ab-pousou .site-header .brand{opacity:1;} html.ab-on.ab-fim .abertura{display:none;} /* cinto e suspensório: se o GSAP não carregou (html.gs removido pelo onerror), nada se esconde */ html.ab-on:not(.gs) .abertura{display:none;} html.ab-on:not(.gs) .site-header .brand{opacity:1;} .ab-bg{position:absolute;inset:0;background:#000;} .ab-dot{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%; background:#fff;box-shadow:0 0 14px 4px rgba(109,162,248,.9);opacity:0;} /* fio: nasce sob o logo com scaleX 0; no pouso escala até 100vw e sobe até a base da navbar */ .ab-fio,.ab-glow{position:absolute;left:50%;top:calc(50% + 44px);width:46vw;height:1px; transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;} .ab-fio{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 15%,rgba(255,255,255,.55) 85%,transparent);} .ab-glow{height:2px;margin-top:-.5px;border-radius:2px;opacity:0; background:linear-gradient(90deg,transparent,rgba(59,130,246,.9),transparent); box-shadow:0 0 6px 1px rgba(59,130,246,.55);} /* logo e varredura: caixa posicionada pelo JS (left/top/height em px, para o FLIP ser só transform) */ .ab-logo{position:absolute;left:0;top:0;height:60px;width:auto;opacity:0;transform-origin:0 0;display:block;} .ab-sweep{position:absolute;left:0;top:0;height:60px;aspect-ratio:1226/103;overflow:hidden;opacity:0; -webkit-mask:url(/assets/img/logo-vigil-academy-branco-20260807.png) 0 0/100% 100% no-repeat; mask:url(/assets/img/logo-vigil-academy-branco-20260807.png) 0 0/100% 100% no-repeat; mix-blend-mode:screen;} .ab-beam{position:absolute;top:-10%;bottom:-10%;left:0;width:60%; background:linear-gradient(100deg,transparent 0%,rgba(109,162,248,.55) 25%,#fff 50%,rgba(109,162,248,.55) 75%,transparent 100%);} /* sem transform no CSS do feixe: o GSAP lê translateX(%) do CSS como x em px e soma ao xPercent da timeline, e o feixe ficaria deslocado para fora da máscara (mesmo gotcha do yPercent registrado na vigil-web-experience) */ @media(max-width:1000px){ .ab-fio,.ab-glow{width:70vw;top:calc(50% + 34px);} }