/* ============================================================
   KNZ Sales — Animations & Micro-interactions
   ============================================================ */

/* --- Base Transitions --- */
* { transition-property: color, background-color, border-color, box-shadow, transform, opacity; }

/* --- Entrance Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* --- Spinner --- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Pulse Glow --- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  50%       { box-shadow: 0 0 0 6px rgba(99,102,241,0.25); }
}

/* --- Shimmer Skeleton --- */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* --- Float --- */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* --- Bounce dot --- */
@keyframes bounceDot {
  0%,80%,100% { transform: scale(0); opacity: 0; }
  40%          { transform: scale(1); opacity: 1; }
}

/* --- Utility classes --- */
.animate-fade-in    { animation: fadeIn    0.3s ease both; }
.animate-fade-up    { animation: fadeInUp  0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-scale-in   { animation: scaleIn   0.3s cubic-bezier(0.34, 1.5, 0.64, 1) both; }
.animate-float      { animation: float     3s ease-in-out infinite; }
.animate-pulse      { animation: pulseGlow 2s ease-in-out infinite; }

/* Stagger Helpers */
.stagger-0 { animation-delay: 0s; }
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Staggered list items */
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 40ms; }
.stagger > *:nth-child(3)  { animation-delay: 80ms; }
.stagger > *:nth-child(4)  { animation-delay: 120ms; }
.stagger > *:nth-child(5)  { animation-delay: 160ms; }
.stagger > *:nth-child(6)  { animation-delay: 200ms; }

/* --- Skeleton Loading --- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    rgba(255,255,255,0.04) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text   { height: 14px; width: 100%; }
.skeleton-sm     { height: 14px; width: 60%; }
.skeleton-title  { height: 22px; width: 75%; }
.skeleton-kpi    { height: 70px; }

/* --- Spinner --- */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.55s linear infinite;
  vertical-align: middle;
}

/* --- Hover Lifts --- */
.hover-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* --- Pulse Ring (for important badges/alerts) --- */
.pulse-ring {
  position: relative;
}
.pulse-ring::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: inherit;
  animation: pulseGlow 2s ease-in-out infinite;
  pointer-events: none;
}

/* --- Modal entrance --- */
.modal-overlay {
  animation: fadeIn 0.22s ease;
}
.modal {
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* --- Toast entrance/exit --- */
.toast-enter {
  animation: slideInRight 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.toast-exit {
  animation: fadeIn 0.2s ease reverse;
}

/* --- Chart bars grow animation --- */
@keyframes growUp {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
.chart-bar { animation: growUp 0.6s ease; }

/* --- Number counter animation --- */
.counter-animate {
  transition: all 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* --- Overdue pulse --- */
.overdue-pulse {
  animation: pulseGlow 1.8s ease-in-out infinite;
}

/* --- Nav item active indicator --- */
/* --- Nav item active indicator --- */
.nav-item { 
  position: relative;
  transition: all 0.25s var(--transition);
  border-radius: var(--radius-sm);
  margin: 2px 8px;
  width: auto;
}
.nav-item:hover:not(.active) {
  background: var(--bg-hover);
  transform: translateX(4px);
}
.nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
}
.nav-item.active::before {
  content: '';
  position: absolute; left: -8px; top: 20%; bottom: 20%;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}