/* =============================================================
   ANIMAÇÕES — entradas ao rolar, títulos e ondas
   Regra de ouro deste arquivo: NADA pode ficar preso invisível.
   Todo estado inicial (opacity:0) tem que ter um "in" que devolve,
   e o bloco de "reduzir movimento" no fim é a rede de segurança.
   ============================================================= */

/* ---------- Entrada ao rolar ----------
   O js/animacoes.js adiciona .in quando o elemento aparece na tela.
   A entrada é lenta ("câmera lenta") e vem da esquerda — pedido do cliente. */
.reveal {
  opacity: 0; transform: translateX(-48px);
  transition: opacity 1.25s var(--ease), transform 1.25s var(--ease);
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: none; }

.reveal-l { opacity: 0; transform: translateX(-58px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-r { opacity: 0; transform: translateX( 58px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }

.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal-scale.in { opacity: 1; transform: none; }

/* Escalonamento em grades (1º card entra, 2º entra depois…) */
[data-delay="1"] { transition-delay: .14s; }
[data-delay="2"] { transition-delay: .28s; }
[data-delay="3"] { transition-delay: .42s; }
[data-delay="4"] { transition-delay: .56s; }
[data-delay="5"] { transition-delay: .70s; }
[data-delay="6"] { transition-delay: .84s; }

/* IMPORTANTE — entrada pela DIREITA no celular:
   abaixo de 980px os blocos ocupam a largura inteira, então empurrar 58px
   pra direita deixava a PÁGINA 40px mais larga que a tela e dava pra
   arrastar de lado até a animação terminar. Vertical não tem esse problema
   (estouro à esquerda/vertical não gera rolagem). Isso resolve na origem,
   inclusive em iOS < 16, que não entende `overflow: clip`. */
@media (max-width: 980px) {
  .reveal-r { transform: translateY(34px); }
  .reveal-r.in { transform: none; }
}

/* ---------- Hero da home: entra escalonado ao carregar ---------- */
.hero__content > * { opacity: 0; animation: heroIn 1.35s var(--ease) forwards; }
.hero__content > *:nth-child(1) { animation-delay: .20s; }
.hero__content > *:nth-child(2) { animation-delay: .40s; }
.hero__content > *:nth-child(3) { animation-delay: .60s; }
.hero__content > *:nth-child(4) { animation-delay: .80s; }
.hero__content > *:nth-child(5) { animation-delay: 1.0s; }
@keyframes heroIn { from { opacity: 0; transform: translateX(-54px); } to { opacity: 1; transform: none; } }

/* ---------- Cada título de seção tem a sua animação ----------
   O js/animacoes.js cicla estas classes por ordem de seção, pra nenhuma
   página parecer repetitiva. "letters"/"words" precisam do JS quebrar o
   texto em <span class="ha-unit">. */
.ha--vivid { filter: grayscale(1) opacity(.4); transform: translateY(14px); transition: filter 1.2s var(--ease), transform 1.2s var(--ease); }
.ha--vivid.ha-in { filter: none; transform: none; }

.ha--wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s var(--ease); }
.ha--wipe.ha-in { clip-path: inset(0 0 0 0); }

.ha--blur { filter: blur(16px); opacity: 0; transition: filter 1.1s var(--ease), opacity .9s var(--ease); }
.ha--blur.ha-in { filter: blur(0); opacity: 1; }

.ha--rise { opacity: 0; transform: translateY(48px); transition: opacity 1s var(--ease), transform 1.15s var(--ease); }
.ha--rise.ha-in { opacity: 1; transform: none; }

/* Brilho que atravessa o texto. Só funciona sobre fundo claro (o texto vira
   transparente e mostra o degradê), por isso o JS troca "shine" por "wipe"
   quando o título está dentro da faixa escura de CTA. */
.ha--shine {
  background: linear-gradient(100deg, var(--c-navy) 0 38%, var(--c-blue-400) 50%, var(--c-navy) 62% 100%);
  background-size: 250% 100%; background-position: 135% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.ha--shine.ha-in { opacity: 1; transform: none; animation: haShine 2.2s var(--ease) .3s forwards; }
@keyframes haShine { to { background-position: -55% 0; } }

.ha--letters .ha-unit, .ha--words .ha-unit {
  display: inline-block; opacity: 0; transform: translateY(.5em) rotate(6deg);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * .03s);
}
.ha--words .ha-unit { transform: translateX(-24px); transition-delay: calc(var(--i, 0) * .08s); transition-duration: .6s; }
.ha--letters.ha-in .ha-unit, .ha--words.ha-in .ha-unit { opacity: 1; transform: none; }

/* O resto do cabeçalho (eyebrow + subtítulo) entra junto, mas discreto:
   o título é a estrela. */
.head-fade > :not(h2) { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s; }
.head-fade.head-in > :not(h2) { opacity: 1; transform: none; }

/* ---------- Ondas em SVG ----------
   Três <use> do mesmo path, em velocidades diferentes = profundidade. */
.wave-anim > use:nth-child(1) { animation: wavemove 9s  linear infinite; }
.wave-anim > use:nth-child(2) { animation: wavemove 13s linear infinite; opacity: .5; }
.wave-anim > use:nth-child(3) { animation: wavemove 7s  linear infinite; opacity: .3; }
@keyframes wavemove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Reduzir movimento ----------
   Quem liga "reduzir movimento" no sistema vê o site inteiro parado —
   e, principalmente, VÊ TUDO: todo estado inicial some aqui. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-l, .reveal-r, .reveal-scale { opacity: 1 !important; transform: none !important; }
  .hero__content > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ha--vivid, .ha--wipe, .ha--blur, .ha--rise { filter: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .ha--shine {
    opacity: 1 !important; transform: none !important;
    color: var(--c-navy) !important; -webkit-text-fill-color: var(--c-navy) !important;
    background: none !important; animation: none !important;
  }
  .ha-unit { opacity: 1 !important; transform: none !important; }
  .head-fade > :not(h2) { opacity: 1 !important; transform: none !important; }
}