/* ==========================================================================
   Motion · the whole animation vocabulary of the app
   Transform + opacity only, except where a colour tells state.
   ========================================================================== */

@keyframes page-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialog-item {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(18px) scale(.97); }
}
@keyframes toast-timer {
  from { width: 100%; }
  to { width: 0; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shine {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: .9; }
  100% { transform: translateX(130%); opacity: 0; }
}

@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

@keyframes tab-line {
  from { transform: scaleX(.3); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes log-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes stream-in {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

@keyframes blip {
  0% { opacity: 1; transform: scale(1); }
  70% { opacity: .9; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(3.2); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* table rows arrive in sequence, once, on first paint of a page ------- */
.rows-in tbody tr { animation: row-in var(--dur-3) var(--ease-out) both; }
.rows-in tbody tr:nth-child(1) { animation-delay: 20ms; }
.rows-in tbody tr:nth-child(2) { animation-delay: 45ms; }
.rows-in tbody tr:nth-child(3) { animation-delay: 70ms; }
.rows-in tbody tr:nth-child(4) { animation-delay: 95ms; }
.rows-in tbody tr:nth-child(5) { animation-delay: 120ms; }
.rows-in tbody tr:nth-child(6) { animation-delay: 145ms; }
.rows-in tbody tr:nth-child(7) { animation-delay: 170ms; }
.rows-in tbody tr:nth-child(8) { animation-delay: 195ms; }
.rows-in tbody tr:nth-child(n + 9) { animation-delay: 218ms; }

/* stagger helper for card grids / panels -------------------------------- */
.stagger > * { animation: card-rise var(--dur-4) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 85ms; }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 195ms; }
.stagger > *:nth-child(5) { animation-delay: 250ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(n + 7) { animation-delay: 340ms; }

/* skip animations when the user asked for less movement ------------------ */
@media (prefers-reduced-motion: reduce) {
  .rows-in tbody tr,
  .stagger > *,
  .log__line,
  .stream-row { animation: none !important; }
}