/* /assets/css/systems/bio-systems/how-human-heart-four-chamber-blood-flow-beat-cutaway.css — 本页专属样式（en/zh 共用） */
/* ============ 人的心脏四腔血流 · Human heart four-chamber cutaway (systems / bio-systems) ============
   简化教学解剖剖面：左右心房心室 + 四个瓣膜 + 大血管，外壳 = 心壁（shell-layer，glass 半透明）。
   共享类（.part/.body/.body2/.body3/.tag/.tag-sm/.is-running/@keyframes）已在 base 定义；
   零件区分色与动画用 body[data-topic="human-heart"] 作用域限定，避免与其它页互扰。
   去氧血（右心）用蓝、含氧血（左心）用红——血液属材质专用色，不受灰蓝值域限制。
   红线：仅作简化教学解剖模型，不构成任何医疗诊断或临床建议。 */

/* 主题描边 / 小字对比度修正（页面作用域） */
body[data-topic="human-heart"] .part .body{stroke-width:1.6}
body[data-topic="human-heart"] .tag-sm{fill:#5b6472;font-size:11px}

/* 去氧血（右心）：蓝 */
body[data-topic="human-heart"] .part[data-id="part-vc"]:not(.is-active) .body{fill:#c2d6ef}
body[data-topic="human-heart"] .part[data-id="part-ra"]:not(.is-active) .body{fill:#b8cfe8}
body[data-topic="human-heart"] .part[data-id="part-rv"]:not(.is-active) .body{fill:#aec6e2}
body[data-topic="human-heart"] .part[data-id="part-pa"]:not(.is-active) .body{fill:#c2d6ef}
body[data-topic="human-heart"] .part[data-id="part-pulmonary-valve"]:not(.is-active) .body{fill:#b4c7de}

/* 含氧血（左心）：红 */
body[data-topic="human-heart"] .part[data-id="part-pv"]:not(.is-active) .body{fill:#f0cfcf}
body[data-topic="human-heart"] .part[data-id="part-la"]:not(.is-active) .body{fill:#eec6c6}
body[data-topic="human-heart"] .part[data-id="part-lv"]:not(.is-active) .body{fill:#e7b6b6}
body[data-topic="human-heart"] .part[data-id="part-aorta"]:not(.is-active) .body{fill:#f0cfcf}
body[data-topic="human-heart"] .part[data-id="part-aortic-valve"]:not(.is-active) .body{fill:#e0b9b9}

/* 心肌 / 瓣膜：中性 */
body[data-topic="human-heart"] .part[data-id="part-septum"]:not(.is-active) .body{fill:#d6dde8}
body[data-topic="human-heart"] .part[data-id="part-tricuspid"]:not(.is-active) .body{fill:#c8d3e0}
body[data-topic="human-heart"] .part[data-id="part-mitral"]:not(.is-active) .body{fill:#dcc7cd}

/* 高亮态（页面引擎 is-active 时） */
.part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
.part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

/* 血流（虚线流动）：去氧蓝 / 含氧红 */
.heart-flow-blue{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 10;animation:hh-flow 1.5s linear infinite;animation-play-state:paused}
.heart-flow-red{fill:none;stroke:#be123c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 10;animation:hh-flow 1.5s linear infinite;animation-play-state:paused}
.is-running .heart-flow-blue,.is-running .heart-flow-red{animation-play-state:running}
@keyframes hh-flow{to{stroke-dashoffset:-44}}

/* 心跳脉冲环 */
.heart-beat{transform-box:fill-box;transform-origin:center;animation:hh-beat 2.4s ease-out infinite;animation-play-state:paused}
.is-running .heart-beat{animation-play-state:running}
@keyframes hh-beat{0%{transform:scale(.82);opacity:0}20%{opacity:.55}100%{transform:scale(1.42);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .is-running .heart-flow-blue,.is-running .heart-flow-red,.is-running .heart-beat{animation:none}
}