/* ============================================================ UTILITIES — focus ring, animation initial states Linkar POR ÚLTIMO no pra que essas regras vençam na cascata quando a classe `.with-animations` estiver ativa. ============================================================ */ /* ============================================================ FOCUS RING — acessibilidade (somente teclado) ============================================================ */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: var(--bw-thick) solid var(--color-brand-energy); outline-offset: 3px; border-radius: var(--radius-xs); } /* ============================================================ ANIMATION INITIAL STATES — pré-hide pré-GSAP A classe `.with-animations` é adicionada por inline script no de cada página, APENAS se o usuário NÃO pediu reduced-motion. Reduced-motion users não recebem a classe e veem tudo visível. O animations.js remove essa classe imediatamente após registrar os plugins (CRITICAL: senão `gsap.from()` lê opacity:0 como estado "to" e anima de 0 a 0 — nada visível). Adicionar selectors aqui apenas se a página tiver esses elementos. Páginas que NÃO tem hero/manifesto/etc não precisam dessas regras. ============================================================ */ .with-animations .hero__badge, .with-animations .hero__title, .with-animations .hero__subtitle, .with-animations .hero__ctas > a, .with-animations .hero__microcopy, .with-animations .hero__mockup img, .with-animations .hero-card, .with-animations .section__head > *, .with-animations .paths-section__head > *, .with-animations .steps .step, .with-animations .path-feature__visual, .with-animations .path-feature__content > *, .with-animations .stat, .with-animations .pain__block, .with-animations .pain__transition, .with-animations .tier, .with-animations .security-card, .with-animations .why-now__stat, .with-animations .why-now__offer, .with-animations .next__item, .with-animations .faq__item, .with-animations .final .eyebrow, .with-animations .final__lead, .with-animations .final__ctas .btn, .with-animations .site-footer__brand, .with-animations .site-footer__nav-group { opacity: 0; } /* ============================================================ BODY TEXT LINE-HEIGHT OVERRIDE — legibilidade (override pra elementos específicos que precisam de mais respiro) ============================================================ */ .eyebrow, .hero__subtitle, .step__body, .path-feature__body, .stat__label, .next__text, .faq__answer, .final__lead { line-height: var(--leading-huge); }