/* ============================================================
   LineThru — chain.css
   Owns: .chain-link inline SVG styling + live-state animation.
   Injected SVG markup comes from js/chain.js.
   ============================================================ */

.chain-link {
  display: block;
}

.chain-link svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chain-link path {
  stroke: #6B6B6E;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 6 6;
}

/* ---------- live state ---------- */
#signal-chain.is-live .chain-link path {
  stroke: #D71921;
  animation: chain-flow 0.6s linear infinite;
}

@keyframes chain-flow {
  to {
    stroke-dashoffset: -12;
  }
}

#signal-chain.is-live #node-speakers .chain-illustration {
  filter: drop-shadow(0 0 10px rgba(215, 25, 33, 0.35));
  animation: spk-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes spk-pulse {
  from {
    filter: drop-shadow(0 0 6px rgba(215, 25, 33, 0.22));
  }
  to {
    filter: drop-shadow(0 0 14px rgba(215, 25, 33, 0.5));
  }
}

/* ---------- stacked mobile layout ---------- */
/* In the vertical layout the converging desktop paths squeeze into
   illegible squiggles, so swap the SVG for a single clean dashed
   vertical line drawn with a repeating gradient (animatable via
   background-position for the same flow effect). */
@media (max-width: 900px) {
  .chain-link {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  .chain-link svg {
    display: none;
  }

  .chain-link::before {
    content: "";
    width: 2px;
    background: repeating-linear-gradient(to bottom, #6B6B6E 0 6px, transparent 6px 12px);
  }

  #signal-chain.is-live .chain-link::before {
    background: repeating-linear-gradient(to bottom, #D71921 0 6px, transparent 6px 12px);
    animation: chain-flow-v 0.6s linear infinite;
  }

  @keyframes chain-flow-v {
    to {
      background-position: 0 12px;
    }
  }
}

/* ---------- reduced motion: recolor only, no animation ---------- */
@media (prefers-reduced-motion: reduce) {
  #signal-chain.is-live .chain-link path {
    stroke: #D71921;
    animation: none;
  }

  #signal-chain.is-live .chain-link::before {
    animation: none;
  }

  #signal-chain.is-live #node-speakers .chain-illustration {
    filter: drop-shadow(0 0 10px rgba(215, 25, 33, 0.35));
    animation: none;
  }
}