/* ==========================================================================
   animations.css — todo o movimento do site num único arquivo
   Regras:
   - Estados "escondidos" só existem com a classe .js no <html> (sem JS = conteúdo visível)
   - prefers-reduced-motion desliga tudo no final do arquivo
   - Animações de entrada usam transform/opacity (GPU) e nunca animam layout
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes intro-up {
  from { opacity: 0; transform: translate3d(0, 1.75rem, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -0.5rem, 0); }
}

@keyframes ping {
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-0.4rem); }
  40% { transform: translateX(0.4rem); }
  60% { transform: translateX(-0.25rem); }
  80% { transform: translateX(0.25rem); }
}

@keyframes card-in {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hero · entrada em sequência (dispara com .is-ready no <html>) ---------- */
.js [data-intro] { opacity: 0; }

.js.is-ready [data-intro] {
  animation: intro-up 0.95s var(--ease-out) both;
  animation-delay: calc(var(--intro, 0) * 110ms + 150ms);
}

[data-intro="0"] { --intro: 0; }
[data-intro="1"] { --intro: 1; }
[data-intro="2"] { --intro: 2; }
[data-intro="3"] { --intro: 3; }
[data-intro="4"] { --intro: 4; }

/* arcos do hero: desenham-se sozinhos e giram devagar */
.js .arc-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js.is-ready .arc-draw {
  animation: draw 2.4s var(--ease-out) forwards;
  animation-delay: 0.3s;
}

.js .arc-fade { opacity: 0; }

.js.is-ready .arc-fade {
  animation: fade-in 1.6s ease forwards;
  animation-delay: 0.8s;
}

.js.is-ready .hero__arcs-spin {
  animation: spin 140s linear infinite;
}

.hero__badge {
  animation: float 7s ease-in-out infinite;
}

/* ---------- Texto em palavras (títulos) ---------- */
/* o título só aparece depois que o JS o divide em palavras (evita o "pisca" do texto inteiro) */
.js [data-split]:not(.is-split) {
  visibility: hidden;
}

.js .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.js .word__inner {
  display: inline-block;
  transform: translate3d(0, 112%, 0);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.js [data-split].is-in .word__inner {
  transform: none;
}

.js.is-ready [data-split="hero"] .word__inner {
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 250ms);
}

/* ---------- Revelar ao rolar ---------- */
.js [data-reveal] {
  --rx: 0;
  --ry: 2rem;
  --rs: 1;
  opacity: 0;
  transform: translate3d(var(--rx), var(--ry), 0) scale(var(--rs));
  transition: opacity 0.85s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal="fade"] { --ry: 0; }
.js [data-reveal="left"] { --rx: -3rem; --ry: 0; }
.js [data-reveal="right"] { --rx: 3rem; --ry: 0; }
.js [data-reveal="scale"] { --ry: 1rem; --rs: 0.9; }
.js [data-reveal="curtain"] { --ry: 1.5rem; }

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* fotos: a imagem "abre" de baixo para cima enquanto dá um leve zoom out */
.js [data-reveal="curtain"] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.18);
  transition: clip-path 1.25s var(--ease-out) 0.15s, transform 1.7s var(--ease-out) 0.15s;
}

.js [data-reveal="curtain"].is-revealed img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* ---------- Menu mobile: ícone e painel já estão em sections.css ---------- */

/* ---------- Blog: filtro com saída e entrada dos cards ---------- */
.post-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base),
    box-shadow var(--dur-base) var(--ease-out),
    opacity 0.28s var(--ease-in-out);
}

.post-card.is-leaving {
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0) scale(0.96);
}

.post-card.is-entering {
  animation: card-in 0.6s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Formulário ---------- */
.lead-form {
  transition: opacity 0.35s var(--ease-in-out), transform 0.4s var(--ease-in-out);
}

.lead-form.is-leaving {
  opacity: 0;
  transform: translate3d(0, -1rem, 0);
  pointer-events: none;
}

.field.is-shaking input {
  animation: shake 0.45s var(--ease-out);
}

.form-success.is-entering {
  animation: pop-in 0.7s var(--ease-out) backwards;
}

.form-success__icon circle,
.form-success__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.form-success.is-entering .form-success__icon circle {
  animation: draw 0.9s var(--ease-out) 0.15s forwards;
}

.form-success.is-entering .form-success__icon path {
  animation: draw 0.6s var(--ease-out) 0.7s forwards;
}

/* ---------- Movimento reduzido: tudo aparece de uma vez, sem animar ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-intro],
  .js [data-reveal],
  .js .word__inner,
  .js .arc-fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .js [data-reveal="curtain"] img {
    clip-path: none !important;
    transform: none !important;
  }

  .js .arc-draw {
    stroke-dashoffset: 0 !important;
  }

  .fill-word {
    opacity: 1 !important;
  }
}