/* all selectors scoped to .ig-pipe so nothing leaks into the rest of the page */
.ig-pipe { width: 100%; line-height: 0; }
.ig-pipe svg { width: 100%; height: auto; display: block; }
.ig-pipe text { dominant-baseline: middle; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ---- text ---- */
.ig-pipe .t-client { fill: #52b8ec; font-size: 30px; font-weight: 700; }
.ig-pipe .t-gw-title { fill: #9a8bc7; font-size: 21px; font-weight: 600; letter-spacing: 3px; }
.ig-pipe .t-gw-sub { fill: #b6a6e6; font-size: 25px; font-weight: 700; }
.ig-pipe .t-route { fill: #c79a2e; font-size: 23px; font-weight: 700; }
.ig-pipe .t-w-title { fill: #5a9d80; font-size: 19px; font-weight: 600; letter-spacing: 2px; }
.ig-pipe .t-w-gpu { fill: #34d39a; font-size: 29px; font-weight: 700; }
.ig-pipe .t-w-pct { fill: #5a9d80; font-size: 21px; font-weight: 600; }
.ig-pipe .t-resp-title { fill: #5a93b0; font-size: 23px; font-weight: 600; letter-spacing: 3px; }
.ig-pipe .t-resp-sub { fill: #52b8ec; font-size: 29px; font-weight: 700; }

/* ---- connectors (marching ants) ---- */
.ig-pipe .wire { fill: none; stroke-width: 2.5; stroke-dasharray: 6 9; stroke-linecap: round; }
.ig-pipe .wire-teal { stroke: #2f7392; animation: igp-ants .7s linear infinite; }
.ig-pipe .wire-purple { stroke: #6a5a9c; animation: igp-ants .9s linear infinite; }
.ig-pipe .wire-blue { stroke: #33536f; animation: igp-ants 1.1s linear infinite; }
@keyframes igp-ants { to { stroke-dashoffset: -15; } }

/* ---- glow halos ---- */
.ig-pipe .glow { fill: none; stroke-width: 3; opacity: 0; }
.ig-pipe .glow-client { stroke: #52b8ec; animation: igp-cG 4.8s ease-in-out infinite; }
.ig-pipe .glow-gw { stroke: #7d6bc0; animation: igp-gG 4.8s ease-in-out infinite; }
.ig-pipe .glow-w1 { stroke: #34c98e; animation: igp-wG 4.8s ease-in-out infinite; }
.ig-pipe .glow-w2 { stroke: #34c98e; animation: igp-wG 4.8s ease-in-out infinite; }
.ig-pipe .glow-w3 { stroke: #34c98e; animation: igp-wG 4.8s ease-in-out infinite; }
.ig-pipe .glow-resp { stroke: #52b8ec; animation: igp-rG 4.8s ease-in-out infinite; }

@keyframes igp-cG { 0% { opacity: .55; } 6% { opacity: .9; } 15% { opacity: 0; } 100% { opacity: 0; } }
@keyframes igp-gG { 0%, 10% { opacity: 0; } 16% { opacity: .85; } 26% { opacity: 0; } 100% { opacity: 0; } }
@keyframes igp-wG { 0%, 33% { opacity: 0; } 41% { opacity: .85; } 52% { opacity: 0; } 100% { opacity: 0; } }
@keyframes igp-rG { 0%, 62% { opacity: 0; } 70% { opacity: .85; } 82% { opacity: 0; } 100% { opacity: 0; } }

/* ---- vRAM fills ---- */
.ig-pipe .vfill { transform: scaleX(0); transform-box: view-box; animation: igp-vram 4.8s ease-out infinite; }
@keyframes igp-vram {
  0%, 28% { transform: scaleX(0); }
  44% { transform: scaleX(1.02); }
  49% { transform: scaleX(1); }
  90% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* ---- travelling packets ---- */
.ig-pipe .pkt { transform-box: view-box; transform-origin: 0 0; }
.ig-pipe .p1 { animation: igp-p1 4.8s linear infinite; }
.ig-pipe .fL { animation: igp-fL 4.8s linear infinite; }
.ig-pipe .fM { animation: igp-fM 4.8s linear infinite; }
.ig-pipe .fR { animation: igp-fR 4.8s linear infinite; }
.ig-pipe .r1 { animation: igp-r1 4.8s linear infinite; }
.ig-pipe .r2 { animation: igp-r2 4.8s linear infinite; }
.ig-pipe .r3 { animation: igp-r3 4.8s linear infinite; }

@keyframes igp-p1 {
  0%, 3% { transform: translate(410px, 146px); opacity: 0; }
  4% { opacity: 1; }
  14% { transform: translate(410px, 200px); opacity: 1; }
  16% { transform: translate(410px, 200px); opacity: 0; }
  100% { transform: translate(410px, 146px); opacity: 0; }
}
@keyframes igp-fL {
  0%, 21% { transform: translate(345px, 366px); opacity: 0; }
  23% { opacity: 1; }
  37% { transform: translate(177px, 422px); opacity: 1; }
  39% { transform: translate(177px, 422px); opacity: 0; }
  100% { transform: translate(345px, 366px); opacity: 0; }
}
@keyframes igp-fM {
  0%, 21% { transform: translate(410px, 366px); opacity: 0; }
  23% { opacity: 1; }
  37% { transform: translate(410px, 422px); opacity: 1; }
  39% { transform: translate(410px, 422px); opacity: 0; }
  100% { transform: translate(410px, 366px); opacity: 0; }
}
@keyframes igp-fR {
  0%, 21% { transform: translate(475px, 366px); opacity: 0; }
  23% { opacity: 1; }
  37% { transform: translate(643px, 422px); opacity: 1; }
  39% { transform: translate(643px, 422px); opacity: 0; }
  100% { transform: translate(475px, 366px); opacity: 0; }
}
@keyframes igp-r1 {
  0%, 49% { transform: translate(177px, 662px); opacity: 0; }
  51% { opacity: 1; }
  66% { transform: translate(177px, 746px); opacity: 1; }
  68% { transform: translate(177px, 746px); opacity: 0; }
  100% { transform: translate(177px, 662px); opacity: 0; }
}
@keyframes igp-r2 {
  0%, 49% { transform: translate(410px, 662px); opacity: 0; }
  51% { opacity: 1; }
  66% { transform: translate(410px, 746px); opacity: 1; }
  68% { transform: translate(410px, 746px); opacity: 0; }
  100% { transform: translate(410px, 662px); opacity: 0; }
}
@keyframes igp-r3 {
  0%, 49% { transform: translate(643px, 662px); opacity: 0; }
  51% { opacity: 1; }
  66% { transform: translate(643px, 746px); opacity: 1; }
  68% { transform: translate(643px, 746px); opacity: 0; }
  100% { transform: translate(643px, 662px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-pipe .wire, .ig-pipe .glow, .ig-pipe .pkt { animation: none !important; }
  .ig-pipe .vfill { animation: none !important; transform: scaleX(1) !important; }
  .ig-pipe .pkt { opacity: 0 !important; }
}