/* ─────────────────────────────────────────────────────────────
   Animations and transitions. View entry, card stagger,
   interactive feedback, toast lifecycle, notification pulse.
   Respects prefers-reduced-motion via tokens.css blanket rule.
   ───────────────────────────────────────────────────────────── */

/* ── View entry (applied by JS on view switch) ───────────── */
.view-enter {
  animation: viewFadeUp var(--t-slow) var(--ease) both;
}
@keyframes viewFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card stagger (children of .stagger-grid) ────────────── */
.stagger-grid > * {
  animation: staggerIn var(--t-base) var(--ease) both;
}
.stagger-grid > *:nth-child(1) { animation-delay: 0ms; }
.stagger-grid > *:nth-child(2) { animation-delay: 40ms; }
.stagger-grid > *:nth-child(3) { animation-delay: 80ms; }
.stagger-grid > *:nth-child(4) { animation-delay: 120ms; }
.stagger-grid > *:nth-child(5) { animation-delay: 160ms; }
.stagger-grid > *:nth-child(6) { animation-delay: 200ms; }
.stagger-grid > *:nth-child(7) { animation-delay: 240ms; }
.stagger-grid > *:nth-child(8) { animation-delay: 280ms; }

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

/* ── Table row stagger ───────────────────────────────────── */
.data-table.animate-rows tbody tr {
  animation: rowSlideIn var(--t-base) var(--ease) both;
}
.data-table.animate-rows tbody tr:nth-child(1) { animation-delay: 0ms; }
.data-table.animate-rows tbody tr:nth-child(2) { animation-delay: 30ms; }
.data-table.animate-rows tbody tr:nth-child(3) { animation-delay: 60ms; }
.data-table.animate-rows tbody tr:nth-child(4) { animation-delay: 90ms; }
.data-table.animate-rows tbody tr:nth-child(5) { animation-delay: 120ms; }
.data-table.animate-rows tbody tr:nth-child(6) { animation-delay: 150ms; }
.data-table.animate-rows tbody tr:nth-child(7) { animation-delay: 180ms; }
.data-table.animate-rows tbody tr:nth-child(8) { animation-delay: 210ms; }
.data-table.animate-rows tbody tr:nth-child(9) { animation-delay: 240ms; }
.data-table.animate-rows tbody tr:nth-child(10) { animation-delay: 270ms; }

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

/* ── Metric card hover lift ──────────────────────────────── */
.metric-card {
  transition: all var(--t-base) var(--ease);
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

/* ── Card interactive lift ───────────────────────────────── */
.card-interactive {
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-1);
}
.card-interactive:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Notification dot pulse ──────────────────────────────── */
.notif-dot {
  animation: dotPulse 2s var(--ease) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 99, 99, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 99, 99, 0); }
}

/* ── Agent health dot pulse (degraded / down) ────────────── */
.agent-dot.degraded {
  animation: dotPulseWarn 2s var(--ease) infinite;
}
.agent-dot.down {
  animation: dotPulseDanger 1.5s var(--ease) infinite;
}
@keyframes dotPulseWarn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 191, 43, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(236, 191, 43, 0); }
}
@keyframes dotPulseDanger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 99, 99, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 99, 99, 0); }
}

/* ── Autonomy dot pulse (active tier) ────────────────────── */
.autonomy-dot {
  animation: autonomyPulse 2.5s var(--ease) infinite;
}
@keyframes autonomyPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ── Toast exit ──────────────────────────────────────────── */
/* Specificity must beat .toast-container .toast (0,2,0) */
.toast-container .toast.toast-exit {
  animation: toastOut var(--t-base) var(--ease) forwards;
  pointer-events: none;
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

/* ── Progress bar animated fill ──────────────────────────── */
.progress-animated .progress-fill {
  animation: progressGrow var(--t-slow) var(--ease) both;
}
@keyframes progressGrow {
  from { width: 0%; }
}

/* ── Step flow connector animate ─────────────────────────── */
.step-flow.animate .step-node {
  animation: stepPop var(--t-base) var(--ease-spring) both;
}
.step-flow.animate .step-node:nth-child(1) { animation-delay: 0ms; }
.step-flow.animate .step-node:nth-child(2) { animation-delay: 60ms; }
.step-flow.animate .step-node:nth-child(3) { animation-delay: 120ms; }
.step-flow.animate .step-node:nth-child(4) { animation-delay: 180ms; }
.step-flow.animate .step-node:nth-child(5) { animation-delay: 240ms; }
.step-flow.animate .step-node:nth-child(6) { animation-delay: 300ms; }
.step-flow.animate .step-node:nth-child(7) { animation-delay: 360ms; }
.step-flow.animate .step-node:nth-child(8) { animation-delay: 420ms; }

.step-flow.animate .step-connector {
  animation: connectorDraw var(--t-fast) var(--ease) both;
}
.step-flow.animate .step-connector:nth-child(2) { animation-delay: 30ms; }
.step-flow.animate .step-connector:nth-child(4) { animation-delay: 90ms; }
.step-flow.animate .step-connector:nth-child(6) { animation-delay: 150ms; }
.step-flow.animate .step-connector:nth-child(8) { animation-delay: 210ms; }

@keyframes stepPop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes connectorDraw {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ── Timeline entry animation ────────────────────────────── */
.timeline-item {
  animation: timelineSlide var(--t-base) var(--ease) both;
}
.timeline-item:nth-child(1) { animation-delay: 0ms; }
.timeline-item:nth-child(2) { animation-delay: 50ms; }
.timeline-item:nth-child(3) { animation-delay: 100ms; }
.timeline-item:nth-child(4) { animation-delay: 150ms; }
.timeline-item:nth-child(5) { animation-delay: 200ms; }

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

/* ── Nav item active indicator slide ─────────────────────── */
.nav-item.active::before {
  animation: navIndicator var(--t-fast) var(--ease) both;
}
@keyframes navIndicator {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Sparkline bar grow ──────────────────────────────────── */
.sparkline.animate .bar {
  animation: barGrow var(--t-base) var(--ease) both;
  transform-origin: bottom;
}
.sparkline.animate .bar:nth-child(1)  { animation-delay: 0ms; }
.sparkline.animate .bar:nth-child(2)  { animation-delay: 20ms; }
.sparkline.animate .bar:nth-child(3)  { animation-delay: 40ms; }
.sparkline.animate .bar:nth-child(4)  { animation-delay: 60ms; }
.sparkline.animate .bar:nth-child(5)  { animation-delay: 80ms; }
.sparkline.animate .bar:nth-child(6)  { animation-delay: 100ms; }
.sparkline.animate .bar:nth-child(7)  { animation-delay: 120ms; }
.sparkline.animate .bar:nth-child(8)  { animation-delay: 140ms; }
.sparkline.animate .bar:nth-child(9)  { animation-delay: 160ms; }
.sparkline.animate .bar:nth-child(10) { animation-delay: 180ms; }
.sparkline.animate .bar:nth-child(11) { animation-delay: 200ms; }
.sparkline.animate .bar:nth-child(12) { animation-delay: 220ms; }

@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Pill / badge pop-in ─────────────────────────────────── */
.pill-animate {
  animation: pillPop var(--t-fast) var(--ease-spring) both;
}
@keyframes pillPop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Hover glow for accent-bordered cards ────────────────── */
.card-accent {
  transition: all var(--t-base) var(--ease);
}
.card-accent:hover {
  box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-1);
}

/* ── Smooth content area scroll ──────────────────────────── */
.content-area {
  scroll-behavior: smooth;
}