/* ============================================================
   PEDROSO HARTMANN — ANIMATIONS KIT
   Arquivo: animations.css
   ============================================================ */


/* ─────────────────────────────────────────────
   1. SCROLL REVEAL — Estado base (invisível)
   ───────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.8s;
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}


/* ─────────────────────────────────────────────
   2. STAGGER
   ───────────────────────────────────────────── */

[data-stagger] > [data-reveal] {
  transition-delay: 0ms;
}


/* ─────────────────────────────────────────────
   3. HOVER — Cards de atuação (.card)
   ───────────────────────────────────────────── */

.card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.card__icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card__icon {
  transform: translateY(-3px) scale(1.05);
}


/* ─────────────────────────────────────────────
   4. NAVBAR — Shrink + shadow no scroll
   ───────────────────────────────────────────── */

.navbar {
  transition: padding 0.3s ease,
              background-color 0.3s ease,
              box-shadow 0.3s ease;
}

.navbar--scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}


/* ─────────────────────────────────────────────
   5. FAQ — Accordion slide suave
   ───────────────────────────────────────────── */

.faq__resposta {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              padding 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}

details[open] .faq__resposta {
  max-height: 300px;
  opacity: 1;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.faq__pergunta::after {
  transition: transform 0.3s ease;
}
details[open] .faq__pergunta::after {
  transform: rotate(180deg);
}


/* ─────────────────────────────────────────────
   6. CTA WHATSAPP — Pulse sutil
   ───────────────────────────────────────────── */

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(26, 127, 63, 0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.btn--wa {
  animation: pulse-ring 3s infinite;
  animation-delay: 2s;
}


/* ─────────────────────────────────────────────
   7. WHATSAPP FLOAT — Bounce in
   ───────────────────────────────────────────── */

@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.whatsapp-float {
  opacity: 0;
  animation: bounce-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 2.5s;
}


/* ─────────────────────────────────────────────
   8. SOCIAL PROOF — Números tabulares
   ───────────────────────────────────────────── */

.hero__social-proof span:not(.divider) {
  font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────────────────
   9. STEP NUMBERS — Counter animation
   ───────────────────────────────────────────── */

.step__num {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.step[data-reveal].revealed .step__num {
  animation: step-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes step-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}


/* ─────────────────────────────────────────────
   10. RESPEITO AO 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] {
    opacity: 1;
    transform: none;
  }
}