/* ═══════════════════════════════════════════════════════════════════
   Animations — Page transitions, skeleton loading, micro-interactions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Panel Enter ── */
@keyframes panelIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.panel.active {
  animation: panelIn var(--duration-slow) var(--ease-out);
}

/* ── Row Stagger Enter ── */
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.data-table tbody tr {
  animation: rowIn var(--duration-normal) var(--ease-out) both;
}

/* Stagger delay for first 20 rows */
.data-table tbody tr:nth-child(1)  { animation-delay: 0.00s; }
.data-table tbody tr:nth-child(2)  { animation-delay: 0.02s; }
.data-table tbody tr:nth-child(3)  { animation-delay: 0.04s; }
.data-table tbody tr:nth-child(4)  { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(5)  { animation-delay: 0.08s; }
.data-table tbody tr:nth-child(6)  { animation-delay: 0.10s; }
.data-table tbody tr:nth-child(7)  { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(8)  { animation-delay: 0.14s; }
.data-table tbody tr:nth-child(9)  { animation-delay: 0.16s; }
.data-table tbody tr:nth-child(10) { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(11) { animation-delay: 0.20s; }
.data-table tbody tr:nth-child(12) { animation-delay: 0.22s; }
.data-table tbody tr:nth-child(13) { animation-delay: 0.24s; }
.data-table tbody tr:nth-child(14) { animation-delay: 0.26s; }
.data-table tbody tr:nth-child(15) { animation-delay: 0.28s; }
.data-table tbody tr:nth-child(16) { animation-delay: 0.30s; }
.data-table tbody tr:nth-child(17) { animation-delay: 0.32s; }
.data-table tbody tr:nth-child(18) { animation-delay: 0.34s; }
.data-table tbody tr:nth-child(19) { animation-delay: 0.36s; }
.data-table tbody tr:nth-child(20) { animation-delay: 0.38s; }

/* ── Skeleton Loading Pulse ── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.skeleton {
  background: var(--surface-4);
  border-radius: var(--radius-xs);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}