/* Connect (/products/connect/): page layout and the Fig. 01 timeline packet.
   Shared classes are never redefined here; page-only classes carry the connect- prefix.
   The packet is a zero-length round-capped stroke (stays round in the stretched vertical svg);
   it walks the whole timeline once, after the four segments have drawn (4 x 300 ms). */

.connect-packet { fill: none; stroke: var(--fig-packet); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; }
.js .path-ink[data-reveal="draw"] .connect-packet { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; opacity: 0; }

@supports (offset-path: path("M0 0")) {
  .connect-packet { offset-rotate: 0deg; offset-distance: 0%; }
  html[data-motion="full"].js .path-ink.is-in .connect-packet { animation: connect-walk var(--dur-packet) linear calc(var(--dur-xl) + 300ms) 1 both; }
  /* each station lights as the packet reaches it (linear walk: the stations sit at about 12, 41, 71
     and 100% of the line), and stays lit: the record has passed through it */
  html[data-motion="full"].js .connect-fig .path:has(.path-ink.is-in) .path-station .num { animation: connect-hit var(--dur-s) var(--ease-out) var(--hit) 1 both; }
  html[data-motion="full"].js .connect-fig .path:has(.path-ink.is-in) .path-station::before { animation: connect-hit-dot var(--dur-s) var(--ease-out) var(--hit) 1 both; }
  .connect-fig .path-station:nth-child(1) { --hit: calc(var(--dur-xl) + 300ms + var(--dur-packet) * 0.12); }
  .connect-fig .path-station:nth-child(2) { --hit: calc(var(--dur-xl) + 300ms + var(--dur-packet) * 0.41); }
  .connect-fig .path-station:nth-child(3) { --hit: calc(var(--dur-xl) + 300ms + var(--dur-packet) * 0.71); }
  .connect-fig .path-station:nth-child(4) { --hit: calc(var(--dur-xl) + 300ms + var(--dur-packet) * 0.97); }
}
@keyframes connect-hit { from { color: var(--text-2); } to { color: var(--accent); } }
@keyframes connect-hit-dot { 0% { box-shadow: 0 0 0 3px var(--bg); } 45% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 9px var(--accent-ghost); } 100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-soft); } }

/* the timeline reads at the weight of the other paths: solid crimson dots, not the 45% line */
.connect-fig .path-seg { stroke: var(--accent-soft); }

@keyframes connect-walk {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* reduced motion: drawn, stations filled, no packet */
html[data-motion="reduce"] .connect-packet { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root .connect-packet { display: none; animation: none; }
}