/* ==========================================================================
   statics-hl.css — repo-local SVG adaptations of the forged-kit highlight
   classes plus the walkthrough's progressive-reveal helper.

   Rationale: the vendored step-player.css highlight classes use outline and
   box-shadow, which do not render on SVG elements. This file adds
   stroke/filter-based equivalents scoped to `svg`, without editing the
   vendored step-player.css. Load order: forged.css -> step-player.css ->
   statics-hl.css.
   ========================================================================== */

/* ---------------------------------------------------- progressive reveal
   Elements tagged .st-progressive stay hidden until the walkthrough render
   callback unlocks them (adds .st-on) at their reveal step. Combined with
   the fk-hl-reveal animation on the step where they first appear. */
svg .st-progressive {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
svg .st-progressive.st-on {
  opacity: 1;
  pointer-events: auto;
}

/* -------------------------------------------------------- focus (SVG)
   Outline/box-shadow are no-ops on SVG; use stroke emphasis + drop-shadow. */
svg .fk-hl-focus {
  filter: drop-shadow(0 0 4px rgba(var(--fk-accent-rgb), 0.75));
}
svg .fk-hl-focus line,
svg .fk-hl-focus path,
svg .fk-hl-focus polyline,
svg .fk-hl-focus polygon,
svg .fk-hl-focus rect {
  stroke: var(--fk-accent, #FF8800) !important;
}
svg g.st-member.fk-hl-focus line {
  stroke-width: 5 !important;
}
svg .fk-hl-focus circle {
  stroke: var(--fk-accent, #FF8800) !important;
  stroke-width: 2.5 !important;
}
svg g.st-joint.fk-hl-focus text {
  fill: var(--fk-accent, #FF8800);
}

/* -------------------------------------------------------- pulse (SVG)
   One-shot glow, mirroring the ring pulse of the HTML variant. */
svg .fk-hl-pulse {
  animation: st-svg-pulse 0.9s ease-out 1;
}
@keyframes st-svg-pulse {
  0%   { filter: drop-shadow(0 0 7px rgba(var(--fk-accent-rgb), 0.95)); }
  70%  { filter: drop-shadow(0 0 3px rgba(var(--fk-accent-rgb), 0.35)); }
  100% { filter: none; }
}

/* ---------------------------------------------------------- dim (SVG)
   The vendored .fk-hl-dim (opacity) already works on SVG; this just makes
   the de-emphasis a bit stronger on the dense truss canvas. */
svg .fk-hl-dim {
  opacity: 0.22;
}

/* reveal: the vendored .fk-hl-reveal (opacity + translateY animation)
   applies to SVG groups as-is — no override needed. */

/* ----------------------------------------------------- canvas cosmetics */
svg .st-flabel.st-t { fill: #58b46a; }   /* tension  */
svg .st-flabel.st-c { fill: #e05563; }   /* compression */

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  svg .st-progressive { transition: none; }
  svg .fk-hl-pulse {
    animation: none;
    filter: drop-shadow(0 0 4px rgba(var(--fk-accent-rgb), 0.75));
  }
}