/* ============================================================
   css/animations.css — Scroll Reveal & Motion
   MaOBe Digital
   ============================================================ */

/* ── Scroll Reveal States ──────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }

.fade-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-left.in-view { opacity: 1; transform: translateX(0); }

.fade-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-right.in-view { opacity: 1; transform: translateX(0); }

/* ── Stagger Delays ────────────────────────────────────────── */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }

/* ── Pulse Glow (optional accent) ──────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.15); }
  50%       { box-shadow: 0 0 40px rgba(0, 240, 255, 0.35); }
}
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }

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

/* ── Counter Roll (number stats) ───────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-stats.in-view .stat-item {
  animation: countUp 0.5s ease forwards;
}
.hero-stats.in-view .stat-item:nth-child(2) { animation-delay: 0.1s; }
.hero-stats.in-view .stat-item:nth-child(3) { animation-delay: 0.2s; }