/* ============================================================
   motion.css — Vox Ordo motion system
   ------------------------------------------------------------
   The workspace must feel ALIVE as agents work — not static,
   not bouncy. Motion is quick, eased, and purposeful: state
   changes snap; living elements (orb, runner pulse) breathe on
   slow loops. No spring/overshoot on UI controls.
   ============================================================ */

:root {
  /* ── Durations ──────────────────────────────────────────── */
  --dur-instant: 0.06s;   /* @kind other */
  --dur-fast:    0.12s;   /* @kind other */
  --dur-base:    0.15s;   /* @kind other */
  --dur-slow:    0.25s;   /* @kind other */
  --dur-reveal:  0.4s;    /* @kind other */

  /* ── Easing ─────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-snap:  cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */

  /* ── Living loops (slow, ambient) ───────────────────────── */
  --loop-breathe: 3.2s;   /* @kind other */
  --loop-pulse:   2s;     /* @kind other */
}

/* Runner heartbeat — green ring that pulses while a machine is online. */
@keyframes vo-runner-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62, 255, 139, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(62, 255, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 255, 139, 0); }
}

/* Orb breathe — the core glows in and out, the system "alive at rest". */
@keyframes vo-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* Voice rings — concentric rings expand outward as Aria listens. */
@keyframes vo-ring {
  0%, 100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}

/* View reveal — sections rise a few px and fade in. */
@keyframes vo-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Notification flash — a pane outlines briefly when state changes. */
@keyframes vo-notif-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35%      { box-shadow: 0 0 0 2px var(--notif, var(--vo-active)); }
}

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