/* ============================================================
   ANIMATIONS.CSS — Reveal, Hover, Counters, Transitions
   ============================================================ */

/* ── Scroll reveal ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Stagger delays ─────────────────────────────────────── */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.10s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.20s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.30s; }

/* ── Hero entrance ──────────────────────────────────────── */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-label-anim {
  animation: heroFadeIn 0.5s ease 0.1s both;
}

.hero-title-anim {
  animation: heroFadeIn 0.6s ease 0.2s both;
}

.hero-desc-anim {
  animation: heroFadeIn 0.5s ease 0.35s both;
}

.hero-cta-anim {
  animation: heroFadeIn 0.5s ease 0.45s both;
}

.hero-stats-anim {
  animation: heroFadeIn 0.6s ease 0.55s both;
}

/* ── Pulse on WhatsApp float ────────────────────────────── */
@keyframes pulse {
  0%   { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35); }
  50%  { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35), 0 0 0 8px rgba(37, 211, 102, 0.1); }
  100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35); }
}

.whatsapp-float {
  animation: pulse 2.5s ease-in-out infinite;
}

/* ── Hover card elevation ───────────────────────────────── */
/* Already on individual card hover rules, centralized here */
.card-hover {
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* ── Number counter ─────────────────────────────────────── */
.counter {
  display: inline-block;
}

/* ── Header scroll transition ───────────────────────────── */
.site-header {
  transition: box-shadow var(--t-base), background var(--t-base);
}