/* assets/css/physics/fluid-dynamics/flow-separation-wake-vortex-shedding-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 流动分离 · 尾流与涡脱落 ============
   源图：svgs/done/physics-06-flow-separation-wake-vortex-shedding-explained.html。
   本图专属类统一 fs-* 前缀；共享类（.part/.body/.body2/.body3/.accent/.tag/.tag-sm/
   .is-running/@keyframes）沿用，不重定义。
   零件区分色与动画用 body[data-topic="flow-separation"] 作用域限定，避免互扰。 */

/* 零件本体 / 区分色类（沿用机器类目语义） */
.part .body{fill:#c2d1e4;stroke:#8ea0b5;stroke-width:1.6}
.part .body2{fill:#dde7f4;stroke:#a9b7c9;stroke-width:1.2}
.part .body3{fill:#aab9cd;stroke:none}
.part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
.part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
.part.is-active .body3{fill:#1d4ed8}
.part.is-active .accent{stroke:#1d4ed8}
.part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

body[data-topic="flow-separation"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="flow-separation"] .part .body2{stroke:#60a5fa}
body[data-topic="flow-separation"] .tag-sm{fill:#5b6472}

/* 各部件区分色（均在中灰蓝值域内，互不重复） */
body[data-topic="flow-separation"] .part[data-id="part-cylinder"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="flow-separation"] .part[data-id="part-cylinder"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="flow-separation"] .part[data-id="part-separation-bubble"]:not(.is-active) .body2{fill:#dfe9f5}
body[data-topic="flow-separation"] .part[data-id="part-wake"]:not(.is-active) .body2{fill:#e6eef8}
body[data-topic="flow-separation"] .part[data-id="part-vortex-top"]:not(.is-active) .body2{fill:#cbd7e7}
body[data-topic="flow-separation"] .part[data-id="part-vortex-bottom"]:not(.is-active) .body2{fill:#d5e1f1}

/* 流线 / 箭头：统一主题蓝，虚线作流动描边动画 */
.fs-stream{fill:none;stroke:#2563eb;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:18 6;
  animation:fs-flow 1.1s linear infinite;animation-play-state:paused}
.is-running .fs-stream{animation-play-state:running}
.part.is-active .fs-stream{stroke:#1d4ed8;stroke-width:3.2}
.fs-quiet{fill:none;stroke:#2563eb;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fs-lead{fill:none;stroke:#8ea0b5;stroke-width:1.4;stroke-linecap:round}
.part.is-active .fs-lead{stroke:#1d4ed8}

/* 分离区（回流泡）轮廓、尾流边界 */
.fs-bubble{fill:none;stroke:#2563eb;stroke-width:2}
.fs-wake{fill:none;stroke:#3b82f6;stroke-width:1.4}

/* 涡旋螺旋 */
.fs-swirl{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .fs-swirl{stroke:#1d4ed8;stroke-width:4}

/* ============ 动画 ============ */
@keyframes fs-flow{to{stroke-dashoffset:-48}}

/* 涡旋生长 → 向下游漂移 → 消散（上下交替脱落） */
.fs-vortex{animation:fs-shed 4.2s linear infinite;animation-play-state:paused}
.is-running .fs-vortex{animation-play-state:running}
@keyframes fs-shed{
  0%{transform:translateX(-190px);opacity:0}
  14%{opacity:.95}
  72%{opacity:.95}
  100%{transform:translateX(210px);opacity:0}
}

/* 涡旋自转（上下涡旋转向相反） */
.fs-spin{transform-box:fill-box;transform-origin:center;animation:fs-spin 1.7s linear infinite;animation-play-state:paused}
.is-running .fs-spin{animation-play-state:running}
.fs-vortex-bottom .fs-spin{animation-direction:reverse}
@keyframes fs-spin{to{transform:rotate(360deg)}}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="flow-separation"] .fs-stream,
  body[data-topic="flow-separation"] .fs-vortex,
  body[data-topic="flow-separation"] .fs-spin{animation:none}
}