/* ============================================================
   ANIMATIONS.CSS — Estados iniciais para reveals + keyframes CSS
   GSAP cuida do scroll; aqui ficam fallbacks e loops contínuos.
   ============================================================ */

/* Estados iniciais para elementos que serão revelados via GSAP.
   Caso o JS falhe, o fallback no final garante visibilidade. */
[data-reveal] { opacity: 0; transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="scale"] { transform: scale(0.9); }

[data-split] { opacity: 0; }

/* Título cinético "desforme": palavras escondidas até o reveal via GSAP */
[data-kinetic] .w { opacity: 0; }

/* ---------- FAQ sprite: slide-in da esquerda ---------- */
@keyframes faq-slide-in {
  from { opacity: 0; transform: translateX(-120px); }
  to   { opacity: 1; transform: translateX(0); }
}
.faq__anim {
  opacity: 0;
  transform: translateX(-120px);
}
.faq__anim.is-visible {
  animation: faq-slide-in 10s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---------- Floating loops (decorativos) ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes float-soft {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(0,-14px,0) rotate(4deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.08); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.float { animation: float-y 6s var(--ease-in-out) infinite; }
.float-soft { animation: float-soft 9s var(--ease-in-out) infinite; }
.pulse-glow { animation: pulse-glow 5s var(--ease-in-out) infinite; }

/* Blobs orgânicos de fundo */
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
  pointer-events: none; z-index: 0; will-change: transform;
}
.blob--red { background: var(--red-vivid); }
.blob--green { background: var(--green); }
.blob--neon { background: var(--green-neon); }
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%      { border-radius: 67% 33% 47% 53% / 37% 62% 38% 63%; }
  66%      { border-radius: 39% 61% 38% 62% / 58% 41% 59% 42%; }
}
.blob.morph { animation: blob-morph 14s var(--ease-in-out) infinite, float-soft 11s var(--ease-in-out) infinite; }

/* Liquid section transition (curva orgânica entre seções) */
.liquid-divider { position: absolute; left: 0; width: 100%; line-height: 0; z-index: 1; }
.liquid-divider svg { width: 100%; height: clamp(60px, 10vw, 140px); display: block; }
.liquid-divider--top { top: -1px; }
.liquid-divider--bottom { bottom: -1px; }

/* Hero scroll bar loop */
@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero__scroll .bar { animation: scroll-hint 2.4s var(--ease-in-out) infinite; }

/* Magnetic / hover scale (acionado por classe via JS) */
.is-magnetic { transition: transform var(--dur-fast) var(--ease-spring); }

/* ============================================================
   ACESSIBILIDADE — respeitar prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-split] { opacity: 1 !important; transform: none !important; }
  [data-kinetic] .w { opacity: 1 !important; }
}

/* ============================================================
   FALLBACK — se o JS não carregar, mostra tudo (no-js)
   ============================================================ */
.no-js [data-reveal],
.no-js [data-split] { opacity: 1 !important; transform: none !important; }
.no-js [data-kinetic] .w { opacity: 1 !important; }
.no-js .loader { display: none; }