/* Motion only. No colour, no surface, no layout: every rule here animates transform or
   opacity and nothing else, so the plain theme is untouched when the motion is switched off.
   apps/lab/motion.js drives these classes. */

@keyframes mv-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.mv-enter {
  animation: mv-enter 180ms var(--ease-out) both;
  animation-delay: var(--mv-delay, 0ms);
}

/* A completed action. A single settle, not a bounce: the element never overshoots downward. */
@keyframes mv-confirm {
  0% { transform: scale(1); }
  40% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.mv-confirm-good, .mv-confirm-bad { animation: mv-confirm 220ms var(--ease-out) both; }
.mv-confirm-bad { animation-name: mv-confirm, mv-fade-half; animation-duration: 220ms, 220ms; }
@keyframes mv-fade-half {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.55; }
}

/* A claim that verified. */
.mv-tick { margin-left: 6px; color: var(--success); font: 600 12px/1 var(--mono); }
@keyframes mv-tick-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.mv-tick-in { animation: mv-tick-in 180ms var(--ease-out) both; }

/* The rail's current-section marker grows from the item rather than blinking on. */
.nav-item { position: relative; }
.nav-item::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 160ms var(--ease-out);
}
.nav-item[aria-current="true"]::before { transform: scaleY(1); }

/* A live pipeline: compress, chunk, encrypt, distribute. The dot is the only thing that moves. */
.mv-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mv-steps li {
  display: flex; align-items: center; gap: 8px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}
.mv-steps li .mv-dot {
  width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--rule-strong); transform: rotate(45deg);
}
.mv-steps li[data-state="run"] { color: var(--accent); }
.mv-steps li[data-state="run"] .mv-dot { background: var(--accent); animation: mv-breathe 900ms var(--ease-in-out) infinite; }
.mv-steps li[data-state="done"] { color: var(--ink); }
.mv-steps li[data-state="done"] .mv-dot { background: var(--success); }
.mv-steps li .mv-step-note { color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
@keyframes mv-breathe {
  50% { opacity: 0.35; transform: rotate(45deg) scale(0.82); }
}

/* An agent that is working right now, in the lab's agent list. */
#agent-list li.run strong { position: relative; }
#agent-list li.run .stage-note, .mv-working {
  display: inline-block;
  font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  animation: mv-breathe 900ms var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mv-enter, .mv-confirm-good, .mv-confirm-bad, .mv-tick-in,
  .mv-steps li[data-state="run"] .mv-dot, .mv-working, #agent-list li.run .stage-note {
    animation: none !important;
  }
  .nav-item::before { transition: none; }
}