/* ============================================================
   ANIMATIONS — keyframes + estados de reveal
   ============================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.6); opacity: 0.4; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes scan {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(120px); opacity: 0.3; }
}

/* ------------------------------------------------------------
   REVEAL POR CLIP-PATH — cartões, imagens e títulos de seção
   Estado inicial: cortado de baixo. .is-in revela.
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(24px);
  transition: clip-path 0.9s var(--ease-in-out),
              transform 0.9s var(--ease-in-out),
              opacity 0.9s var(--ease-in-out);
  will-change: clip-path, transform, opacity;
}
[data-reveal].is-in {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
}

/* variante simples (fade/slide) para blocos que não combinam com clip */
[data-fade] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}
[data-fade="left"]  { transform: translateX(-40px); }
[data-fade="right"] { transform: translateX(40px); }
[data-fade].is-in   { opacity: 1; transform: none; }

/* atraso em cascata aplicado via --i (índice) no elemento */
[data-reveal], [data-fade] { transition-delay: calc(var(--i, 0) * 80ms); }

/* ------------------------------------------------------------
   SPLIT TEXT — palavras do título sobem de um container oculto
   <span class="word-wrap"><span class="word">palavra</span></span>
   ------------------------------------------------------------ */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* pequeno padding para descendentes (g, y, p) não cortarem */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s var(--ease-in-out);
  transition-delay: calc(var(--wi, 0) * 55ms);
  will-change: transform;
}
.split-ready .word { transform: translateY(0); }

/* ------------------------------------------------------------
   Reduced motion: tudo aparece sem movimento
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-fade] {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .word { transform: none !important; }
}