/* ============================================
   DSM - ANIMATIONS CSS
   ============================================ */

/* FADE IN */
.animate-fade-in { opacity: 0; animation: fadeIn 0.8s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* SLIDE UP */
.animate-slide-up { opacity: 0; transform: translateY(30px); animation: slideUp 0.8s ease forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* DELAYS */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

/* PARTICLE */
.particle {
  position: absolute; border-radius: 50%;
  background: rgba(212, 168, 67, 0.15);
  animation: float linear infinite;
  pointer-events: none;
}
@keyframes float {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

/* RIPPLE EFFECT */
.btn-primary, .btn-outline, .btn-pricing {
  position: relative; overflow: hidden;
}
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0); animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* SKELETON LOADING */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--secondary) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* COUNTER ANIMATION handled in JS */

/* HOVER GLOW */
.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(212, 168, 67, 0.4);
}

/* SPIN */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fa-spin { animation: spin 1s linear infinite; }

/* PULSE */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.pulse { animation: pulse 2s ease infinite; }

/* SLIDE IN FROM LEFT */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* SLIDE IN FROM RIGHT */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ZOOM IN */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* NOTIFICATION BADGE */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,48,44,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(201,48,44,0); }
}