/* ============================================================
   svg-primitives.css  —  BU-408 (F-059)
   CSS-ONLY motion for the in-house tokenized SVG chart primitive kit
   (SvgBar / SvgArc / SvgRibbon / SvgNode / SvgAxis / CountUp).

   No JS animation library, no <script> animation, no chart-render lib.
   All colour is token-driven in the components themselves (fill/stroke =
   var(--v-*)); this file carries ONLY motion + reduced-motion suppression.
   ============================================================ */

/* Entrance: bars grow from baseline, arcs/ribbons/nodes fade in. Pure CSS keyframes. */
@keyframes svgp-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes svgp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes svgp-ribbon-flow {
  from { opacity: 0; stroke-dashoffset: 12; }
  to   { opacity: var(--svgp-ribbon-opacity, 0.55); stroke-dashoffset: 0; }
}

.svg-bar {
  transform-box: fill-box;
  transform-origin: left center;
  animation: svgp-grow-x 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.15s ease;
}

.svg-arc {
  animation: svgp-fade-in 0.45s ease-out both;
  transition: opacity 0.15s ease;
}

.svg-ribbon {
  animation: svgp-fade-in 0.55s ease-out both;
  transition: stroke-opacity 0.15s ease, stroke-width 0.2s ease;
}

.svg-node {
  animation: svgp-fade-in 0.4s ease-out both;
}

/* CountUp: animate a registered custom property from 0 to its target and render it
   through counter(). Pure CSS — no JS tween. Falls back to the static final value
   (always present in the DOM) where @property is unsupported or motion is reduced. */
@property --countup-num {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
@keyframes svgp-countup {
  from { --countup-num: 0; }
}
.countup-anim {
  /* The static text is the source of truth; the animated counter overlays it only
     where supported. Keeping the real text visible guarantees accessibility/testability. */
  animation: svgp-countup 1s ease-out both;
}

/* prefers-reduced-motion: kill every entrance animation; show final state instantly. */
@media (prefers-reduced-motion: reduce) {
  .svg-bar,
  .svg-arc,
  .svg-ribbon,
  .svg-node,
  .countup-anim {
    animation: none !important;
    transition: none !important;
  }
  .svg-bar {
    transform: none !important;
  }
}

/* ============================================================
   BU-530 — Position visualization classes (studio-warm system).
   All color resolves from the --viz-* semantic tokens declared in
   jargan-semantic-tokens.css; components carry classes, never hex.
   ============================================================ */
.vz-line          { stroke: var(--viz-line); }
.vz-connector     { stroke: var(--viz-line); opacity: .55; }
.vz-beam          { fill: var(--viz-line); }
.vz-focal-node    { fill: var(--viz-focal-tint); stroke: var(--viz-focal); }
.vz-focal-half    { fill: var(--viz-focal-tint); }
.vz-focal-arrow   { fill: var(--viz-focal); }
.vz-structure-node      { fill: var(--viz-structure-tint); stroke: var(--viz-structure-border); }
.vz-structure-node-deep { fill: var(--viz-structure-tint-deep); stroke: var(--viz-structure-border); }
.vz-structure-half      { fill: var(--viz-structure-tint); }
.vz-neutral-node  { fill: var(--viz-neutral-fill); stroke: var(--viz-line); }
.vz-text          { fill: var(--viz-ink); font-family: var(--font-ui); }
.vz-text-muted    { fill: var(--viz-ink-muted); font-family: var(--font-ui); }
.vz-micro         { fill: var(--viz-structure-text); font-family: var(--font-mono); letter-spacing: .13em; }
.vz-micro-focal   { fill: var(--viz-focal-deep); }
.vz-micro-muted   { fill: var(--viz-ink-muted); font-family: var(--font-mono); letter-spacing: .13em; }
.vz-arrow         { fill: var(--viz-ink-muted); }
.vz-annot         { stroke: var(--viz-ink-muted); }