/* ==========================================================================
   LE41 PRO - GLOBAL DYNAMIC ANIMATIONS & MOTION SYSTEM
   UI/UX Pro Max Motion Engine - View Transitions, Micro-interactions,
   Staggered Reveals, Button Ripples, Glow Shimmers & Accessibility
   ========================================================================== */

/* -------------------------------------------------------------
   1. KEYFRAMES
   ------------------------------------------------------------- */

/* Fluid View Transition */
@keyframes viewFadeSlide {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered Element Slide & Fade */
@keyframes staggerReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer Sweep for Buttons & Glow Cards */
@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Ripple Wave Click Effect */
@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* Soft Ambient Pulse for Badges & Status Indicators */
@keyframes pulseBadgeGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

@keyframes pulseWarningGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
}

/* Card Float Hover Motion */
@keyframes cardFloatHover {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Table Row Cascade Entrance */
@keyframes tableRowSlide {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modal Spring Bounce Entrance */
@keyframes modalSpring {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  70% {
    transform: scale(1.015) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast Progress Timer Drain */
@keyframes toastProgressDrain {
  0% { width: 100%; }
  100% { width: 0%; }
}

/* -------------------------------------------------------------
   2. VIEW TRANSITIONS & CONTAINER MOTION
   ------------------------------------------------------------- */

.view-fade-enter {
  animation: viewFadeSlide 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

/* -------------------------------------------------------------
   3. STAGGERED REVEAL SYSTEM (1 to 10)
   ------------------------------------------------------------- */

.stagger-enter-1 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both; }
.stagger-enter-2 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.stagger-enter-3 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.stagger-enter-4 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.stagger-enter-5 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both; }
.stagger-enter-6 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
.stagger-enter-7 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
.stagger-enter-8 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both; }
.stagger-enter-9 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both; }
.stagger-enter-10 { animation: staggerReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }

/* -------------------------------------------------------------
   4. CARD & BENTO DYNAMIC MICRO-INTERACTIONS
   ------------------------------------------------------------- */

.card, .kpi-card, .stats-kpi-card, .chart-box, .stats-breakdown-card {
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.26s ease, 
              border-color 0.26s ease;
  position: relative;
}

.card:hover, .kpi-card:hover, .stats-kpi-card:hover, .chart-box:hover {
  transform: translateY(-3px) scale(1.003);
  box-shadow: 0 10px 24px -5px rgba(0, 0, 0, 0.35), 0 0 12px rgba(37, 99, 235, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
}

/* Ambient glow accent top edge */
.kpi-card::before, .stats-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kpi-card:hover::before, .stats-kpi-card:hover::before {
  opacity: 1;
}

/* -------------------------------------------------------------
   5. BUTTONS, RIPPLES & SHIMMER EFFECTS
   ------------------------------------------------------------- */

/* Button Click Waves & Shimmer */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background-size: 200% auto;
  transition: all 0.3s ease, transform 0.15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.btn-primary:active {
  transform: translateY(1px) scale(0.97);
}

/* Material Ripple Wave Container & Element */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: rippleEffect 0.55s ease-out forwards;
  transform-origin: center;
}

/* -------------------------------------------------------------
   6. INTERACTIVE ICONS & HOVER MICRO-ANIMATIONS
   ------------------------------------------------------------- */

.nav-item, .bottom-nav-item, .category-tab-btn, .filter-pill-btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item i, .bottom-nav-item i, .btn i, .stats-kpi-icon i {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item:hover i, .bottom-nav-item:hover i, .btn:hover i {
  transform: scale(1.15);
}

.nav-item.active i {
  transform: scale(1.08);
}

/* Active Nav Bar Glow line */
.nav-item.active {
  box-shadow: inset 3px 0 0 var(--color-primary), 0 0 12px rgba(37, 99, 235, 0.15);
}

/* -------------------------------------------------------------
   7. DYNAMIC PROGRESS METERS & GAUGES
   ------------------------------------------------------------- */

.meter-bar-fill {
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------
   8. STATUS BADGES & LIVE PULSING INDICATORS
   ------------------------------------------------------------- */

.badge-success, .badge-trend.up-good, .nav-badge.text-emerald {
  animation: pulseBadgeGlow 3s infinite ease-in-out;
}

.badge-warning, .badge-trend.down-good, .notification-indicator {
  animation: pulseWarningGlow 2.5s infinite ease-in-out;
}

/* -------------------------------------------------------------
   9. TABLE ROW HOVER MOTION
   ------------------------------------------------------------- */

.table tbody tr {
  transition: background-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.table tbody tr:hover {
  transform: translateX(3px);
  background-color: rgba(99, 102, 241, 0.08) !important;
}

/* -------------------------------------------------------------
   10. MODAL & DIALOG FLUID ENTRANCE
   ------------------------------------------------------------- */

.modal-card {
  animation: modalSpring 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* -------------------------------------------------------------
   11. TOAST NOTIFICATION DYNAMIC TIMERS
   ------------------------------------------------------------- */

.toast {
  animation: toastIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.toast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
  animation: toastProgressDrain 4s linear forwards;
}

/* -------------------------------------------------------------
   12. ACCESSIBILITY - PREFERS REDUCED MOTION
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}