/* Decorative signal flow: the two agents alternate, then the provider responds. */
.signal-flow .wires{display:block;position:relative;height:43px}
.signal-flow .wires::after{content:none}
.signal-flow .wire{width:100%;height:30px;border:0;position:relative}
.signal-flow .flow-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.signal-flow .route-track{stroke:#656b78;stroke-width:1;vector-effect:non-scaling-stroke}
.signal-flow .wire .route-track{stroke:#81b5ff80}
.signal-flow .route-pulse{stroke:#b6d7ff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:14 200;stroke-dashoffset:14;opacity:0;filter:drop-shadow(0 0 3px #0066ff) drop-shadow(0 0 7px #0066ff88);animation:eclink-signal 6s linear infinite}
.signal-flow .route-claude{animation-delay:3s}
.signal-flow .route-provider{stroke:#81b5ff;stroke-width:2.5;stroke-dasharray:24 200;stroke-dashoffset:24;animation:eclink-provider-signal 3s 2.05s linear infinite}
.signal-flow .connection-agents>span{animation:eclink-agent-glow 6s ease-in-out infinite}
.signal-flow .connection-agents>span:nth-child(2){animation-delay:3s}
.signal-flow .link-core{animation:eclink-core-glow 3s 1.8s ease-in-out infinite}
.signal-flow .core-dot{animation:eclink-dot-glow 3s 1.8s ease-in-out infinite}
.signal-flow .provider-node{animation:eclink-provider-glow 3s 3.4s ease-in-out infinite}
@keyframes eclink-signal{
  0%{stroke-dashoffset:14;opacity:0}
  3%{opacity:1}
  34%{stroke-dashoffset:-100;opacity:1}
  39%,100%{stroke-dashoffset:-100;opacity:0}
}
@keyframes eclink-provider-signal{
  0%{stroke-dashoffset:24;opacity:0}
  8%{opacity:1}
  55%{stroke-dashoffset:-100;opacity:1}
  65%,100%{stroke-dashoffset:-100;opacity:0}
}
@keyframes eclink-agent-glow{
  0%,36%,100%{border-color:#ffffff1a;box-shadow:0 0 0 #0066ff00}
  8%{border-color:#81b5ff66;box-shadow:0 0 20px #0066ff12}
}
@keyframes eclink-core-glow{
  0%,65%,100%{border-color:#0066ff77;box-shadow:0 0 24px #0066ff0c;background:#101622}
  10%{border-color:#81b5ffb3;box-shadow:0 0 30px #0066ff26,inset 0 0 20px #0066ff08;background:#111b2c}
}
@keyframes eclink-dot-glow{
  0%,65%,100%{box-shadow:0 0 10px #0066ff66;transform:scale(1);background:#0066ff}
  10%{box-shadow:0 0 0 5px #0066ff12,0 0 20px #0066ffcc;transform:scale(1.2);background:#81b5ff}
}
@keyframes eclink-provider-glow{
  0%,70%,100%{border-color:#ffffff1a;box-shadow:0 0 0 #0066ff00}
  10%{border-color:#81b5ff77;box-shadow:0 0 22px #0066ff12,inset 0 0 15px #0066ff06}
}
/* Pause work when the illustration cannot be seen. */
.signal-flow.flow-suspended .route-pulse,.signal-flow.flow-suspended .connection-agents>span,.signal-flow.flow-suspended .link-core,.signal-flow.flow-suspended .core-dot,.signal-flow.flow-suspended .provider-node{animation-play-state:paused}
/* The existing Motion toggle and OS preference leave a clean static diagram. */
.motion-paused .signal-flow .route-pulse,.motion-paused .signal-flow .connection-agents>span,.motion-paused .signal-flow .link-core,.motion-paused .signal-flow .core-dot,.motion-paused .signal-flow .provider-node{animation:none}
.motion-paused .signal-flow .route-pulse{opacity:0}
@media(prefers-reduced-motion:reduce){
 .signal-flow .route-pulse,.signal-flow .connection-agents>span,.signal-flow .link-core,.signal-flow .core-dot,.signal-flow .provider-node{animation:none}
 .signal-flow .route-pulse{opacity:0}
}