/* ==========================================================================
   Binary Bliss — Signal System visual primitives
   Doctrine: "invisible systems made visible." Fine lines, small nodes,
   trajectories, convergence. Motion explains a system; it never decorates.
   Scoped beneath `.bb-v2`. No !important.
   ========================================================================== */

.bb-v2 .bb-signal {
  --bb-signal-dash: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Stroke roles — shared by every piece of artwork so the family is coherent. */
.bb-v2 .bb-sig-track {
  fill: none;
  stroke: var(--bb-signal-track);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bb-v2 .bb-sig-line {
  fill: none;
  stroke: var(--bb-signal-stroke);
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.bb-v2 .bb-sig-line--soft {
  stroke: var(--bb-signal-stroke-soft);
  stroke-width: 0.75;
}
.bb-v2 .bb-sig-line--dashed {
  stroke-dasharray: 3 4;
}
.bb-v2 .bb-sig-node {
  fill: var(--bb-surface);
  stroke: var(--bb-signal-stroke);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.bb-v2 .bb-sig-node--solid {
  fill: var(--bb-signal-stroke);
}
.bb-v2 .bb-sig-node--accent {
  fill: var(--bb-surface);
  stroke: var(--bb-signal-stroke);
  stroke-width: 2;
}
.bb-v2 .bb-sig-field {
  fill: none;
  stroke: var(--bb-signal-grid);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}
.bb-v2 .bb-sig-plane {
  fill: var(--bb-blue-50);
  stroke: var(--bb-signal-grid);
  stroke-width: 0.75;
}
.bb-v2 .bb-sig-plane--deep {
  fill: var(--bb-blue-100);
}
.bb-v2 .bb-sig-text {
  font-family: var(--bb-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--bb-text-muted);
}
.bb-v2 .bb-sig-glow {
  fill: none;
  stroke: var(--bb-signal-glow);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.bb-v2 .bb-section--dark .bb-sig-line,
.bb-v2 .bb-section--dark .bb-sig-node {
  stroke: var(--bb-signal-on-dark);
}
.bb-v2 .bb-section--dark .bb-sig-node {
  fill: var(--bb-surface-dark);
}
.bb-v2 .bb-section--dark .bb-sig-track {
  stroke: var(--bb-border-dark);
}
.bb-v2 .bb-section--dark .bb-sig-text {
  fill: var(--bb-text-secondary-dark);
}

/* ---- Meaningful motion ------------------------------------------------- */
/* One idea per animation: signals travel the path, nodes activate in order.
   Timings follow the skill: visual 400–800ms, ambient 6–20s. */

.bb-v2 .bb-sig-anim--draw {
  stroke-dasharray: var(--bb-sig-length, 300);
  stroke-dashoffset: var(--bb-sig-length, 300);
  animation: bb-signal-draw var(--bb-motion-visual) var(--bb-ease-out) forwards;
}
.bb-v2 .bb-sig-anim--node {
  opacity: 0;
  animation: bb-signal-node var(--bb-motion-ui) var(--bb-ease-standard) forwards;
}
.bb-v2 .bb-sig-anim--node[data-step="1"] { animation-delay: 120ms; }
.bb-v2 .bb-sig-anim--node[data-step="2"] { animation-delay: 320ms; }
.bb-v2 .bb-sig-anim--node[data-step="3"] { animation-delay: 520ms; }
.bb-v2 .bb-sig-anim--node[data-step="4"] { animation-delay: 720ms; }
.bb-v2 .bb-sig-anim--travel {
  animation: bb-signal-travel var(--bb-motion-visual) var(--bb-ease-out) forwards;
}
.bb-v2 .bb-sig-anim--ambient {
  animation: bb-signal-ambient var(--bb-motion-ambient) ease-in-out infinite alternate;
}

@keyframes bb-signal-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes bb-signal-node {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bb-signal-travel {
  from { transform: translateX(-8px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes bb-signal-ambient {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* Reduced motion: a meaningful static state, not a disabled feature.
   Paths resolve to their finished position so the diagram still reads. */
@media (prefers-reduced-motion: reduce) {
  .bb-v2 .bb-sig-anim--draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
  .bb-v2 .bb-sig-anim--node,
  .bb-v2 .bb-sig-anim--travel,
  .bb-v2 .bb-sig-anim--ambient {
    opacity: 1;
    transform: none;
    animation: none;
  }
}