/* ============================================================
   WapiGrow — animations.css
   ============================================================ */

/* ── Cycling text (hero) ───────────────────────────────────── */
.cycle-wrap {
  display: inline-block;
  position: relative;
  min-width: 160px;
}
.cycle-word {
  display: inline-block;
  color: #25D366;
  animation: cycleWord 9s infinite;
}
@keyframes cycleWord {
  0%,28%  { opacity: 1; transform: translateY(0); }
  33%     { opacity: 0; transform: translateY(-12px); }
  34%,61% { opacity: 0; transform: translateY(12px); }
  66%     { opacity: 1; transform: translateY(0); }
  /* word 2 handled by JS word swap */
}

/* ── Pulse dot (live agent indicator) ─────────────────────── */
.pulse-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #25D366;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(37,211,102,.35);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0; }
}

/* ── Shimmer loading ───────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Float animation (hero mockup) ────────────────────────── */
.float {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Fade in up (triggered by JS) ─────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .5s ease both; }

/* ── Spin ──────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin .8s linear infinite; }

/* ── Success checkmark ─────────────────────────────────────── */
@keyframes checkPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.check-pop { animation: checkPop .35s ease both; }

/* ── Slide in from right ───────────────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.slide-in-right { animation: slideInRight .4s ease both; }

/* ── Counter number animation ──────────────────────────────── */
.counter-num {
  display: inline-block;
  transition: color .3s;
}

/* ── Stagger children ──────────────────────────────────────── */
.stagger > *:nth-child(1) { animation-delay: 0s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .2s; }
.stagger > *:nth-child(4) { animation-delay: .3s; }
.stagger > *:nth-child(5) { animation-delay: .4s; }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}