/* CAZARO — camada RICA de animação (etapa 7, sobre o baseline de assets/js/site.js).
   Só transform/opacity/background-size (performático). Tudo dentro do guard de
   prefers-reduced-motion. Ganchos: data-underline, data-parallax, data-count,
   .hero__media (zoom-invertido). O reveal on-scroll em si (data-reveal/.is-in)
   é do baseline (site.js/site.css) — aqui só reforçamos o fail-safe anti-tela-branca
   e acoplamos os efeitos ricos aos mesmos ganchos. */

/* ---------- Hero — zoom invertido (a imagem começa ampliada e assenta) ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not(.html-nojs) .hero__media{
    transform:scale(1.12);
    transition:transform 1.5s cubic-bezier(.16,1,.3,1);
  }
  html:not(.html-nojs) .hero__media.is-zoomed{transform:scale(1)}
}

/* ---------- Parallax (hero__media[data-parallax] — variantes "entrega") ---------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  [data-parallax] img{will-change:transform}
}

/* ---------- Título — sublinhado que desenha (acoplado ao mesmo .is-in do reveal) --- */
[data-underline]{
  background-image:linear-gradient(var(--c-accent),var(--c-accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 3px;
}
@media (prefers-reduced-motion:no-preference){
  [data-underline]{transition:background-size .9s cubic-bezier(.16,1,.3,1) .25s}
}
/* dispara junto com o reveal do bloco pai (mesma classe .is-in do baseline) */
[data-reveal].is-in [data-underline]{background-size:100% 3px}
/* sem JS: mostra desenhado de partida (não esconde conteúdo) */
.html-nojs [data-underline]{background-size:100% 3px}

/* ---------- Contador (data-count) — só troca o texto via JS; sem estado escondido -- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- FAIL-SAFE reforçado (trava 2, além do html-nojs do baseline) ----------
   Se o IntersectionObserver do baseline nunca disparar (aba oculta, iframe fora de
   vista, callback perdido), a rede de tempo do animacoes.js força .is-in em tudo que
   sobrou. Este seletor garante que, mesmo no meio do caminho, nada fica com blend
   estranho: assim que .is-in existe, o estado final é sempre aplicado. */
@media (prefers-reduced-motion:reduce){
  .hero__media{transform:none !important;transition:none !important}
  [data-underline]{transition:none !important}
}

/* ============ INTRO cinematográfica: loader logo → imagem → overlay → conteúdo ============ */
.intro{
  position:fixed;inset:0;z-index:9999;background:var(--c-dark);
  display:grid;place-items:center;
  /* FAILSAFE: se o JS não rodar, o loader some sozinho (não deixa a tela navy travada) */
  animation:introFailsafe .8s ease 2.9s forwards;
}
.intro__logo{
  width:min(300px,60vw);height:auto;opacity:0;
  transform:translateY(10px) scale(.985);
  animation:introLogoIn 1s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.intro.is-out{opacity:0;visibility:hidden;transition:opacity .75s ease,visibility .75s ease}
@keyframes introLogoIn{to{opacity:1;transform:none}}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}

/* Enquanto a intro está no ar: segura header, overlay e textos do HERO.
   Sem !important — estes seletores já vencem [data-reveal].is-in por especificidade
   (0,3,1 > 0,2,0), então o baseline do site.js não revela o hero cedo. */
html.intro-active .site-head{opacity:0;transform:translateY(-26px)}
html.intro-active .hero__media::after{opacity:0}
html.intro-active .hero [data-reveal]{opacity:0;transform:translateY(32px)}

/* Passo OVERLAY: o scrim entra depois da imagem */
html.intro-active.intro-overlay .hero__media::after{opacity:1;transition:opacity .9s ease}

/* Passo CONTEÚDO: header desce e título/copy/botões sobem em cascata.
   Usamos @keyframes (não transition): animação vence declarações normais na cascata,
   dispara de forma determinística e não depende de reflow entre estados. */
html.intro-active.intro-content .site-head{animation:introHeadDrop .8s cubic-bezier(.16,1,.3,1) .1s both}
html.intro-active.intro-content .hero__eyebrow{animation:introRise .8s cubic-bezier(.16,1,.3,1) .06s both}
html.intro-active.intro-content .hero h1{animation:introRise .9s cubic-bezier(.16,1,.3,1) .2s both}
html.intro-active.intro-content .hero__lead{animation:introRise .9s cubic-bezier(.16,1,.3,1) .4s both}
html.intro-active.intro-content .hero__cta{animation:introRise .9s cubic-bezier(.16,1,.3,1) .58s both}
@keyframes introRise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes introHeadDrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}

/* Reduced motion: sem intro, tudo visível na hora */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  html.intro-active .site-head,
  html.intro-active .hero__media::after,
  html.intro-active .hero [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}