/* assets/css/systems/info-systems/how-ip-packet-routing-across-networks-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ IP 数据包跨网络路由 · IP packet routing ============ */
/* ip-routing · merged from source <style>; scoped by body[data-topic="ip-routing"] */

body[data-topic="ip-routing"] .svg-title{fill:var(--strong);font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.08em;text-anchor:middle;}
body[data-topic="ip-routing"] .svg-sub{fill:#5b6a7d;font-size:12px;text-anchor:middle;}
body[data-topic="ip-routing"] .tag{fill:#475569;font-family:var(--mono);font-size:13px;letter-spacing:.02em;}
body[data-topic="ip-routing"] .tag-sm{fill:#5b6472;font-size:11px;}
body[data-topic="ip-routing"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

body[data-topic="ip-routing"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="ip-routing"] .part .body2{stroke:#60a5fa;stroke-width:1.2}

body[data-topic="ip-routing"] .part[data-id="part-source"]{--db:0s;--base:#c2d1e4;--base2:#dde7f4}
body[data-topic="ip-routing"] .part[data-id="part-router-a"]{--db:.7s;--base:#bfcee2;--base2:#dae6f4}
body[data-topic="ip-routing"] .part[data-id="part-router-b"]{--db:1.4s;--base:#c6d3e5;--base2:#e0eaf5}
body[data-topic="ip-routing"] .part[data-id="part-router-c"]{--db:2.1s;--base:#c4d1e3;--base2:#dce7f3}
body[data-topic="ip-routing"] .part[data-id="part-destination"]{--db:2.8s;--base:#c0cfe6;--base2:#dbe6f4}
body[data-topic="ip-routing"] .part[data-id="part-routing-table"]{--db:1.4s;--base:#c9d5e6;--base2:#e2ecf6}
body[data-topic="ip-routing"] .part[data-id="part-packet"]{--db:.7s;--base:#bccbe0;--base2:#d8e4f3}

body[data-topic="ip-routing"] .ipr-node .body{fill:var(--base,#c2d1e4);animation:ipr-fill-b 12s ease-in-out infinite var(--db,0s)}
body[data-topic="ip-routing"] .ipr-node .body2{fill:var(--base2,#dde7f4);animation:ipr-fill-b2 12s ease-in-out infinite var(--db,0s)}
body[data-topic="ip-routing"] .ipr-node{animation:ipr-glow 12s ease-in-out infinite var(--db,0s)}
@keyframes ipr-glow{0%,100%{filter:none}6%,11%{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}}
@keyframes ipr-fill-b{0%,100%{fill:var(--base,#c2d1e4);stroke:#2563eb;stroke-width:1.6}6%,11%{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}}
@keyframes ipr-fill-b2{0%,100%{fill:var(--base2,#dde7f4);stroke:#60a5fa;stroke-width:1.2}6%,11%{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}}

/* 流动箭头：跳转蓝 / 查表琥珀 */
body[data-topic="ip-routing"] .ipr-flow{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 8}
body[data-topic="ip-routing"] .ipr-fh{stroke:#2563eb}
body[data-topic="ip-routing"] .ipr-fl{stroke:#d97706}
body[data-topic="ip-routing"] .is-running .ipr-flow{animation:ipr-march .7s linear infinite, ipr-seq 12s ease-in-out infinite}
@keyframes ipr-march{to{stroke-dashoffset:-18}}
@keyframes ipr-seq{0%,100%{opacity:.18}6%,11%{opacity:1}}
body[data-topic="ip-routing"] .is-running .ipr-s1{animation-delay:0s,.7s}
body[data-topic="ip-routing"] .is-running .ipr-s2{animation-delay:0s,1.4s}
body[data-topic="ip-routing"] .is-running .ipr-s3{animation-delay:0s,2.1s}
body[data-topic="ip-routing"] .is-running .ipr-s4{animation-delay:0s,2.8s}
body[data-topic="ip-routing"] .is-running .ipr-s5{animation-delay:0s,1.6s}
body[data-topic="ip-routing"] .is-running .ipr-s6{animation-delay:0s,2.3s}
body[data-topic="ip-routing"] .is-running .ipr-s7{animation-delay:0s,3.0s}

/* 高亮态（页面引擎 is-active 时，换色 + 描边 + 发光） */
body[data-topic="ip-routing"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2;animation:none}
body[data-topic="ip-routing"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4;animation:none}
body[data-topic="ip-routing"] .part.is-active .body3{fill:#1d4ed8;animation:none}
body[data-topic="ip-routing"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5));animation:none}

@media (prefers-reduced-motion:reduce){
  body[data-topic="ip-routing"] .ipr-node,
  body[data-topic="ip-routing"] .ipr-node .body,
  body[data-topic="ip-routing"] .ipr-node .body2,
  body[data-topic="ip-routing"] .is-running .ipr-flow{animation:none;opacity:1}
}