/* ============================================================
   Auto Repair Sale — ar-animations.css
   ============================================================ */

/* ── KEYFRAMES ── */
@keyframes ar-fade-in-up {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ar-slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ar-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ar-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes ar-bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes ar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ar-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes ar-count-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ar-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 65, 24, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(232, 65, 24, 0); }
}
@keyframes ar-particle-float {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.4; }
  25% { transform: translateY(-20px) translateX(10px) rotate(90deg); opacity: 0.7; }
  50% { transform: translateY(-10px) translateX(-8px) rotate(180deg); opacity: 0.5; }
  75% { transform: translateY(-30px) translateX(6px) rotate(270deg); opacity: 0.8; }
}
@keyframes ar-progress-fill {
  from { width: 0; }
}

/* ── UTILITY ANIMATION CLASSES ── */
.ar-animate-fade-in { animation: ar-fade-in 0.6s ease forwards; }
.ar-animate-fade-up { animation: ar-fade-in-up 0.7s ease forwards; }
.ar-animate-slide-left { animation: ar-slide-in-left 0.6s ease forwards; }
.ar-animate-slide-right { animation: ar-slide-in-right 0.6s ease forwards; }
.ar-animate-pulse { animation: ar-pulse 2.5s ease-in-out infinite; }
.ar-animate-bounce { animation: ar-bounce-subtle 2s ease-in-out infinite; }
.ar-animate-glow { animation: ar-glow-pulse 2s ease-in-out infinite; }

.ar-delay-100 { animation-delay: 0.1s; }
.ar-delay-200 { animation-delay: 0.2s; }
.ar-delay-300 { animation-delay: 0.3s; }
.ar-delay-400 { animation-delay: 0.4s; }
.ar-delay-500 { animation-delay: 0.5s; }
.ar-delay-600 { animation-delay: 0.6s; }

/* ── PARTICLES ── */
.ar-particle {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: ar-particle-float linear infinite;
}

/* ── COUNTER ── */
.ar-counter { animation: ar-count-up 0.6s ease both; }

/* ── PAGE LOADING ── */
.ar-page-loader {
  position: fixed; inset: 0; background: var(--ar-navy);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ar-page-loader.ar-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ar-loader-icon { animation: ar-spin 1s linear infinite; color: var(--ar-accent); font-size: 2rem; }

/* ── HOVER EFFECTS ── */
.ar-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ar-hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,0.14); }

/* ── SKELETON LOADING ── */
.ar-skeleton {
  background: linear-gradient(90deg, var(--ar-light-gray) 25%, #e8ecf0 50%, var(--ar-light-gray) 75%);
  background-size: 200% 100%; animation: ar-shimmer 1.5s infinite; border-radius: var(--ar-radius);
}

/* ── PROGRESS BARS ── */
.ar-progress-bar-animated {
  animation: ar-progress-fill 1.2s ease both;
}

/* ── ICON ANIMATIONS ── */
.ar-icon-spin:hover i { animation: ar-spin 0.8s ease; }
.ar-icon-bounce:hover i { animation: ar-bounce-subtle 0.6s ease; }

/* ── TRANSITIONS ── */
.ar-transition-all { transition: all 0.3s ease; }
.ar-transition-fast { transition: all 0.15s ease; }
.ar-transition-slow { transition: all 0.5s ease; }