/* ==========================================================================
   Croire Engenharia e Consultoria — animacoes.css (etapa 7 — animações)
   ==========================================================================
   Camada RICA de movimento, por cima do baseline que já existe em
   base.css + app.js (reveal on-scroll de [data-reveal] e a linha que
   desenha de [data-timeline]/.steps — isso já está pronto, não duplicado
   aqui). Este arquivo cobre só o que faltava nos ganchos:
     - overscan do .hero-media para o parallax não expor borda
     - o traço de [data-underline] (sublinhado que desenha)

   Tudo dentro de @media (prefers-reduced-motion: no-preference): sem essa
   guarda, ou sem animacoes.js carregar, o estado visual é sempre o final
   (sublinhado cheio, sem overscan extra) — nada depende do JS para ficar
   visível.

   Movimento: SEM inércia/momentum de scroll (Lenis, lerp no wheel). Só
   scroll-behavior:smooth nativo, que já vem do base.css. Preferência fixa
   do usuário — vence qualquer doc antigo que peça momentum.
   ========================================================================== */

/* ---- Parallax — respiro vertical p/ a translação não expor a borda ----
   .lp-problem-media já nasce com esse respiro (inset:-12% no lp.css); aqui
   cobrimos só o .hero-media, que nasce inset:0 no base.css. A classe só é
   ligada pelo JS quando o parallax realmente vai rodar — sem JS, o
   .hero-media continua exatamente como o base.css definiu. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media.is-parallax,
  .lp-problem-media.is-parallax {
    will-change: transform;
  }
  .hero-media.is-parallax { inset: -6% 0; }
}

/* ---- Sublinhado que desenha — [data-underline] no título do CTA final ----
   Estado final (traço cheio) é o padrão, sem depender de classe nenhuma:
   se o JS não rodar, o sublinhado já aparece pronto. Só quando o JS liga
   .underline-anim é que ele nasce em 0 e desenha ao entrar na tela. */
[data-underline] {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
}
@media (prefers-reduced-motion: no-preference) {
  [data-underline].underline-anim {
    background-size: 0 3px;
    transition: background-size 900ms var(--ease-out) 150ms;
  }
  [data-underline].underline-anim.is-drawn { background-size: 100% 3px; }
}