/* ============ ANIMATIONS ============ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-fadeIn { animation: fadeIn 0.3s ease both; }
.animate-slideUp { animation: slideUp 0.4s var(--transition-spring) both; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* Page transitions */
.page-enter { animation: slideUp 0.3s ease both; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* Glow pulse */
@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.glow-pulse { animation: glowPulse 2s infinite; }

/* Number counter animation */
.count-up { transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); }

/* Status indicator */
.status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 6px;
}
.status-dot.active { background: var(--accent-emerald); box-shadow: 0 0 6px rgba(16,185,129,0.6); animation: glowPulse 2s infinite; }
.status-dot.inactive { background: var(--text-muted); }
.status-dot.pending { background: var(--accent-amber); box-shadow: 0 0 6px rgba(245,158,11,0.6); }

/* Loading spinner */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(99,102,241,0.2);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }

/* Progress bar */
.progress-bar { height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 3px; transition: width 0.8s ease; }

/* Tooltip - Disabled in favor of dynamic JS tooltip engine to prevent double hover tooltips and scroll clipping
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 4px 10px;
  font-size: var(--text-xs); white-space: nowrap; color: var(--text-primary);
  opacity: 0; pointer-events: none; transition: opacity var(--transition-fast);
  z-index: var(--z-dropdown);
}
[data-tooltip]:hover::after { opacity: 1; }
[data-tooltip].tooltip-left::after { left: 0; transform: none; }
[data-tooltip].tooltip-right::after { left: auto; right: 0; transform: none; }
*/

@keyframes scaleUp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.animate-scaleUp { animation: scaleUp 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }