/* Viz-core — Universal Visualization System primitives for ICore sovereign surfaces.
   Zero-CDN, system-font, reduced-motion-native. Sibling of EI-core.
   Animation grammar is declarative + GPU-cheap (transform/opacity only). */

:root {
  --viz-ok: #3ddc84;
  --viz-bad: #ff5f6d;
  --viz-pending: #4f8cff;
  --viz-accent: #00bfa5;
  --viz-line: rgba(79,140,255,.35);
}

/* ══ Proof seal — attestation as motion ══ */
.viz-seal {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
}
.viz-seal .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--viz-line);
}
.viz-seal .core {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--viz-dim, #6b6b80);
}
/* pending: rotating arc */
.viz-seal.pending .ring {
  border-color: transparent;
  border-top-color: var(--viz-pending);
  animation: vizSpin 1.1s linear infinite;
}
.viz-seal.pending .core { background: var(--viz-pending); opacity: .5; }
/* ok: lock snaps + green glow */
.viz-seal.ok .ring { border-color: var(--viz-ok); }
.viz-seal.ok .core { background: var(--viz-ok); animation: vizLock .4s cubic-bezier(.2,.9,.3,1.4); }
.viz-seal.ok { box-shadow: 0 0 10px rgba(61,220,132,.6); }
/* bad: red shake */
.viz-seal.bad .ring { border-color: var(--viz-bad); }
.viz-seal.bad .core { background: var(--viz-bad); animation: vizShake .4s ease-in-out; }

@keyframes vizSpin { to { transform: rotate(360deg); } }
@keyframes vizLock { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
@keyframes vizShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-2px) } 75% { transform: translateX(2px) } }

/* ══ Node constellation — agent spine ══ */
.viz-constellation { position: relative; }
.viz-spine { position: relative; padding-left: 18px; }
.viz-spine::before {
  content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px;
  width: 2px; background: linear-gradient(180deg, var(--viz-accent), var(--viz-line));
  border-radius: 2px;
}
.viz-node-dot {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--viz-pending);
  margin-left: -22px; margin-bottom: -12px;
  box-shadow: 0 0 8px rgba(79,140,255,.5);
  animation: vizHeart 2.4s ease-in-out infinite;
}
.viz-node-dot.self { background: var(--viz-accent); box-shadow: 0 0 10px rgba(0,191,165,.6); }
.viz-node-dot.ok { background: var(--viz-ok); box-shadow: 0 0 8px rgba(61,220,132,.5); }
@keyframes vizHeart { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.18); opacity: 1 } }

/* ══ Reasoning trace (inline cognition) ══ */
.viz-trace { display: flex; flex-direction: column; gap: 4px; }
.viz-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ei-dim); }
.viz-step .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--viz-line); }
.viz-step.lit { color: var(--ei-fg); }
.viz-step.lit .pip { background: var(--viz-ok); box-shadow: 0 0 6px rgba(61,220,132,.6); animation: vizLock .35s ease-out; }

/* ══ Reduced motion — sovereignty includes neuro-inclusion ══ */
@media (prefers-reduced-motion: reduce) {
  .viz-seal.pending .ring,
  .viz-node-dot,
  .viz-seal.ok .core,
  .viz-seal.bad .core,
  .viz-step.lit .pip { animation: none !important; }
  .viz-seal.pending .ring { border-top-color: var(--viz-pending); }
}

/* Visibility pause (sovereign-device CPU bound) */
.viz-paused .viz-node-dot,
.viz-paused .viz-seal.pending .ring { animation-play-state: paused; }