/* ==========================================================================
   ANIMATIONS — Mahindra General Finance Ltd
   All keyframes and animation-specific styles
   ========================================================================== */

/* Floating gradient orbs */
@keyframes floatGradient {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-20px, 20px) rotate(5deg); }
  50%  { transform: translate(0, -20px) rotate(0deg); }
  75%  { transform: translate(20px, 20px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Page loader progress bar */
@keyframes loaderProgressAnim {
  0%   { left: -50%; width: 30%; }
  50%  { width: 60%; }
  100% { left: 100%; width: 30%; }
}

/* Page loader pulse */
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.02); opacity: 1; }
}

/* WhatsApp button pulse */
@keyframes whatsappPulse {
  0%   { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0.6); }
  40%  { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0); }
}

/* Timeline flowing line */
@keyframes flowingLine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Subtle float for decorative elements */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Fade in up for scroll reveals */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer effect for premium accents */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Glow pulse for icons */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(8, 174, 184, 0.2); }
  50%      { box-shadow: 0 0 25px rgba(8, 174, 184, 0.4); }
}

/* Rotate icon on hover */
@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}