/* Northing Labs — hero schematic (FIG. 01). Owner: hero agent.
   The SVG is injected by hero.js; nothing here hides content (all intro states are set by GSAP at runtime,
   so the drawing is fully visible without JS animation). */

#hero-schematic {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 495;            /* reserves space before the SVG is injected (no layout shift) */
  will-change: transform, opacity;
}
@media (max-width: 639px) {
  #hero-schematic { aspect-ratio: 360 / 600; max-width: 440px; margin-inline: auto; }
}

.hs {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.hs * { pointer-events: none; }
.hs .hs-hit { pointer-events: all; fill: transparent; stroke: none; cursor: crosshair; }

/* ---- line work ---- */
.hs-ln,
.hs-icon {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--stroke, 1.5);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hs-icon { stroke-width: 1.3; }
.hs-dim { opacity: .45; }
.hs-note-ln { opacity: .7; stroke: var(--muted-on-dark); stroke-width: 1.2; }
.hs-dot { fill: var(--line); opacity: .6; }

.hs-panel { fill: var(--ink-2); }
.hs-term { fill: var(--ink); stroke: var(--line); stroke-width: var(--stroke, 1.5); vector-effect: non-scaling-stroke; }
.hs-screw { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.hs-box { fill: var(--ink); transition: stroke .35s var(--ease-out); }

/* ---- text ---- */
.hs-t {
  font-family: var(--font-mono);
  fill: var(--muted-on-dark);
  letter-spacing: .1em;
}
.hs-label { fill: currentColor; letter-spacing: .08em; transition: fill .35s var(--ease-out); }
.hs-wn, .hs-io, .hs-mod { opacity: .75; }
.hs-mod { letter-spacing: .14em; }
.hs-head { fill: var(--text-on-dark); opacity: .8; letter-spacing: .14em; }
.hs-tagname { fill: var(--text-on-dark); letter-spacing: .14em; }
.hs-evt { fill: var(--text-on-dark); letter-spacing: .12em; }
.hs-note {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
  fill: var(--muted-on-dark);
}

/* ---- LEDs ---- */
.hs-led { fill: var(--ink); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hs-led-lit {
  fill: var(--signal);
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--signal));
}

/* ---- wires ---- */
.hs-trail, .hs-hot { stroke: var(--signal); opacity: 0; }
.hs-hot { transition: opacity .35s var(--ease-out); }
.hs-hot.is-hover { opacity: 1; }

.hs-pulse-glow,
.hs-pulse-core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hs-pulse-glow { stroke: var(--signal); stroke-width: 7; opacity: .7; filter: url(#hs-blur); }
.hs-pulse-core { stroke: color-mix(in srgb, var(--signal) 55%, var(--text-on-dark)); stroke-width: 2.2; }

/* ---- breathing halo behind the controller ---- */
.hs-g0 { stop-color: var(--signal); stop-opacity: .2; }
.hs-g1 { stop-color: var(--signal); stop-opacity: .06; }
.hs-g2 { stop-color: var(--signal); stop-opacity: 0; }
.hs-breath { opacity: .45; }

/* ---- nodes (inputs / outputs) ---- */
.hs-node { color: var(--muted-on-dark); }
.hs-node .hs-icon { transition: stroke .35s var(--ease-out); }
.hs-out { color: var(--text-on-dark); }
.hs-node.is-hot,
.hs-node.is-hover { color: var(--signal); }
.hs-node.is-hot .hs-icon,
.hs-node.is-hover .hs-icon,
.hs-node.is-hot .hs-box,
.hs-node.is-hover .hs-box { stroke: var(--signal); }

/* ---- static state: reduced motion or no GSAP — fully drawn, outputs calmly energized ---- */
.hs--static .hs-led-lit[data-led="run"],
.hs--static .hs-led-lit[data-led^="out-"],
.hs--static .hs-led-lit[data-led^="tag-"] { opacity: 1; }
.hs--static [data-hot^="out-"] { opacity: .55; }
.hs--static .hs-out .hs-icon { stroke: var(--signal); }