/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft  { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.94)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes pulseDot    { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:0.6} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes glow        { 0%,100%{box-shadow:var(--shadow-glow)} 50%{box-shadow:0 0 40px rgba(124,58,237,0.55)} }
@keyframes slideDown   { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounceIn    { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes progressFill{ from{width:0} to{width:var(--target-width,100%)} }
@keyframes counterUp   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-25px, 25px) scale(0.94); }
}
@keyframes meshDrift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-4%, 3%) rotate(4deg); }
}

/* ── Utility animation classes ──────────────────────────────── */
.animate-spin   { animation: spin 1s linear infinite; }
.animate-pulse  { animation: pulse 2s ease infinite; }
.animate-glow   { animation: glow 3s ease infinite; }
.fade-in        { animation: fadeIn 0.3s var(--ease) both; }
.fade-in-up     { animation: fadeInUp 0.4s var(--ease) both; }
.scale-in       { animation: scaleIn 0.25s var(--ease) both; }
.page-enter     { animation: fadeInUp 0.35s var(--ease) both; }

/* ── Stagger children ───────────────────────────────────────── */
.stagger > * { animation: fadeInUp 0.4s var(--ease) both; }
.stagger > *:nth-child(1)  { animation-delay:   0ms; }
.stagger > *:nth-child(2)  { animation-delay:  60ms; }
.stagger > *:nth-child(3)  { animation-delay: 120ms; }
.stagger > *:nth-child(4)  { animation-delay: 180ms; }
.stagger > *:nth-child(5)  { animation-delay: 240ms; }
.stagger > *:nth-child(6)  { animation-delay: 300ms; }
.stagger > *:nth-child(7)  { animation-delay: 360ms; }
.stagger > *:nth-child(8)  { animation-delay: 420ms; }
.stagger > *:nth-child(9)  { animation-delay: 480ms; }
.stagger > *:nth-child(10) { animation-delay: 540ms; }

/* ── Vue router transitions ─────────────────────────────────── */
.fade-enter-active, .fade-leave-active { transition: opacity 0.22s var(--ease); }
.fade-enter-from, .fade-leave-to       { opacity: 0; }

/* ── Theme switch transition (scoped — no transition:all) ───── */
body,
.auth-page, .page-content, .main-content,
.table-wrapper, .modal-container, .dropdown-menu, .toast,
.live-feed-panel, .recent-campaigns, .live-feed-header,
.connection-status, .badge, .tabs, .auth-tabs, .auth-card,
.chip-input-wrapper, .empty-state-icon {
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auth-bg::before, .auth-bg-orb,
  .stagger > *, .page-enter, .fade-in, .fade-in-up, .scale-in,
  .animate-glow, .auth-brand-logo,
  .progress-fill::after, .skeleton {
    animation: none !important;
  }
  .stats-grid .stat-card { transform: none !important; }
  .card:hover, .stat-card:hover, .campaign-card:hover, .btn-primary:hover { transform: none; }
}

/* ── Loading spinner ────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-violet);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }