/* ==========================================================
   Solidrange Motion & Micro-Interaction Layer
   ----------------------------------------------------------
   Load LAST, after tokens.css and components.css, so it wins
   the cascade. Pure CSS — no markup or JS required. Respects
   `prefers-reduced-motion` via the guard at the bottom of
   components.css (a `*` selector) — nothing extra needed here.
   ========================================================== */

/* ---------- 1. Page entrance ----------
   Wrap each page/view's content in <div class="page-content">
   and put any modal as a DIRECT CHILD of it, e.g.:
     <div class="page-content">
       <div class="card">...</div>
       <div class="modal-backdrop">...</div>   <!-- when open -->
     </div>
   This animates every OTHER direct child, deliberately skipping
   `.modal-backdrop` (and anything that wraps one, via :has()).
   Do NOT animate `.page-content` itself, or the modal directly —
   see the long comment in the source project's animations.css
   for exactly why (a transformed/semi-opaque ancestor hijacks a
   `position:fixed` descendant's containing block and stacking
   context; it's a real, easy-to-hit bug, not just style
   preference). If your project doesn't use `.page-content` as a
   wrapper name, rename the selector below to match yours —
   just keep excluding anything that contains `.modal-backdrop`. */
.page-content > *:not(.modal-backdrop):not(:has(.modal-backdrop)) {
  animation: pageEnter 0.4s ease both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 2. Table row stagger ----------
   Incremental delay via :nth-child so rows cascade in instead
   of popping all at once. Capped at 12 so long tables don't
   take seconds to finish settling. */
.data-table tbody tr {
  animation: rowIn 0.35s ease both;
}

@keyframes rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.data-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.data-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.data-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.data-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
.data-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.data-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
.data-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
.data-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
.data-table tbody tr:nth-child(n+12) { animation-delay: 0.24s; }

/* ---------- 3. Hover / press polish ---------- */
.card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn, .btn-sm, .btn-lg {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn:active:not(:disabled) { transform: scale(0.96); }

.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) { box-shadow: var(--shadow-sm); }

.data-table tbody tr {
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-close {
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover { transform: rotate(90deg); }

.badge {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* ---------- 4. Status dot pulse ---------- */
.status-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------- 5. Toast entrance ----------
   A bouncier easing on top of components.css's slideInRight
   keyframe (same keyframe, nicer curve). */
.toast {
  animation: slideInRight var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- 6. Tab underline / pill transitions ---------- */
.tab-btn.active::after {
  animation: expandWidth var(--transition-base);
}

@keyframes expandWidth {
  from { width: 0; left: 50%; }
  to { width: 100%; left: 0; }
}

.tab-pill {
  transition: color var(--transition-base), background var(--transition-base);
}

/* ---------- 7. Spinner: dual-ring ---------- */
.spinner {
  position: relative;
}

.spinner::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--accent);
  opacity: 0.4;
  animation: spin 1.6s linear infinite reverse;
}

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

/* ---------- 8. Focus-visible (keyboard accessibility) ---------- */
a:focus-visible,
.tab-btn:focus-visible,
.tab-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ---------- 9. Empty state ---------- */
.empty-state {
  animation: emptyIn 0.4s ease both;
}

@keyframes emptyIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-state-icon {
  animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}