/* assets/css/systems/info-systems/how-tcp-three-way-handshake-timing-explained.css — 本页专属样式（en/zh 共用） */
/* ============ TCP 三次握手时序 · TCP three-way handshake timing ============ */

body[data-topic="tcp-handshake"] .svg-title{fill:var(--strong);font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.06em}
body[data-topic="tcp-handshake"] .tag{fill:#475569;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
body[data-topic="tcp-handshake"] .tag-sm{fill:#5b6472;font-size:11px}

/* 零件本体 */
body[data-topic="tcp-handshake"] .part .body{fill:#c2d1e4;stroke:#2563eb;stroke-width:1.6}
body[data-topic="tcp-handshake"] .part .body2{fill:#dde7f4;stroke:#60a5fa;stroke-width:1.2}

/* 端点区分色 */
body[data-topic="tcp-handshake"] .part[data-id="part-client"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="tcp-handshake"] .part[data-id="part-server"]:not(.is-active) .body{fill:#c8c1e5}

/* 生命线 */
body[data-topic="tcp-handshake"] .hs-lifeline{stroke:#c3ccd9;stroke-width:1.6;stroke-dasharray:5 6}
body[data-topic="tcp-handshake"] .part[data-id="part-lifelines"] .hs-lifeline{stroke:#c3ccd9}

/* 三条消息：SYN 蓝 / SYN-ACK 橙 / ACK 绿 */
body[data-topic="tcp-handshake"] .hs-msg{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:11 8}
body[data-topic="tcp-handshake"] .hs-syn{stroke:#2563eb}
body[data-topic="tcp-handshake"] .hs-synack{stroke:#ea580c}
body[data-topic="tcp-handshake"] .hs-ack{stroke:#047857}

/* 状态标签 */
body[data-topic="tcp-handshake"] .hs-state{fill:#5b6472;font-size:11px;font-family:var(--mono)}

/* 连接建立区 */
body[data-topic="tcp-handshake"] .hs-band{fill:#dcfce7;stroke:#047857;stroke-width:1.4}

/* 动画 */
body[data-topic="tcp-handshake"] .is-running .hs-msg{animation:hs-march .7s linear infinite}
body[data-topic="tcp-handshake"] .is-running .hs-syn{animation:hs-march .7s linear infinite, hs-seq 3s ease-in-out infinite 0s}
body[data-topic="tcp-handshake"] .is-running .hs-synack{animation:hs-march .7s linear infinite, hs-seq 3s ease-in-out infinite 1s}
body[data-topic="tcp-handshake"] .is-running .hs-ack{animation:hs-march .7s linear infinite, hs-seq 3s ease-in-out infinite 2s}
body[data-topic="tcp-handshake"] .is-running .hs-band{animation:hs-band 3s ease-in-out infinite}
@keyframes hs-march{to{stroke-dashoffset:-19}}
@keyframes hs-seq{0%,100%{opacity:.4}20%,58%{opacity:1}}
@keyframes hs-band{0%,100%{fill-opacity:.55}50%{fill-opacity:1}}

/* 高亮态（换色 + 描边加粗 + 发光） */
body[data-topic="tcp-handshake"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="tcp-handshake"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
body[data-topic="tcp-handshake"] .part.is-active .hs-lifeline{stroke:#1d4ed8}
body[data-topic="tcp-handshake"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

@media (prefers-reduced-motion:reduce){
  body[data-topic="tcp-handshake"] .is-running .hs-msg,
  body[data-topic="tcp-handshake"] .is-running .hs-syn,
  body[data-topic="tcp-handshake"] .is-running .hs-synack,
  body[data-topic="tcp-handshake"] .is-running .hs-ack,
  body[data-topic="tcp-handshake"] .is-running .hs-band{animation:none;opacity:1}
}