/* /assets/css/systems/bio-systems/how-plant-leaf-stomata-gas-exchange-cutaway.css — 本页专属样式（en/zh 共用） */
/* ============ 叶片气孔气体交换剖面 · Plant leaf stoma gas exchange (systems / bio-systems) ============
   简化教学剖面：角质层（外壳）+ 上表皮 + 栅栏组织 + 叶绿体 + 海绵组织 + 叶脉 + 下表皮 + 保卫细胞 + 气孔，
   以及 CO₂ 进 / O₂ 出 / 水蒸气出三种气体箭头。
   共享类（.part/.body/.body2/.body3/.tag/.tag-sm/.is-running/@keyframes）已在 base 定义；
   零件区分色与动画用 body[data-topic="leaf-stomata"] 作用域限定，避免与其它页互扰。
   植物绿属材质专用色，不受灰蓝值域限制；文字统一 #475569 / #5b6472，对比度 ≥4.5:1。
   红线：仅作简化教学模型，不构成任何专业建议。 */

body[data-topic="leaf-stomata"] .part .body{stroke-width:1.6}
body[data-topic="leaf-stomata"] .tag-sm{fill:#5b6472;font-size:11px}

/* 叶片各层：由浅到深的绿 + 叶脉 */
body[data-topic="leaf-stomata"] .part[data-id="part-upper-epidermis"]:not(.is-active) .body{fill:#cfe0c8;stroke:#7ba37a}
body[data-topic="leaf-stomata"] .part[data-id="part-palisade"]:not(.is-active) .body{fill:#d6ead6;stroke:#6f9c6f}
body[data-topic="leaf-stomata"] .part[data-id="part-chloroplast"]:not(.is-active) .body{fill:#9ccb9c;stroke:#4f8a4f}
body[data-topic="leaf-stomata"] .part[data-id="part-spongy"]:not(.is-active) .body{fill:#e2f0e2;stroke:#7ba37a}
body[data-topic="leaf-stomata"] .part[data-id="part-vein"]:not(.is-active) .body{fill:#c8dcc4;stroke:#6f9c6f}
body[data-topic="leaf-stomata"] .part[data-id="part-lower-epidermis"]:not(.is-active) .body{fill:#cfe0c8;stroke:#7ba37a}
body[data-topic="leaf-stomata"] .part[data-id="part-guard-cells"]:not(.is-active) .body{fill:#b7dab7;stroke:#4f8a4f}
body[data-topic="leaf-stomata"] .part[data-id="part-pore"]:not(.is-active) .body{fill:#e0eaf6;stroke:#5b8fc7}

/* 高亮态（页面引擎 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))}

/* 气体交换箭头：CO₂ 进 / O₂ 出 / 水蒸气出 */
.leaf-co2{fill:none;stroke:#2563eb;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:11 9;animation:leaf-flow 1.4s linear infinite;animation-play-state:paused}
.leaf-o2{fill:none;stroke:#047857;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:11 9;animation:leaf-flow 1.4s linear infinite;animation-play-state:paused}
.leaf-h2o{fill:none;stroke:#0891b2;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:9 8;animation:leaf-flow 1.2s linear infinite;animation-play-state:paused}
.is-running .leaf-co2,.is-running .leaf-o2,.is-running .leaf-h2o{animation-play-state:running}
@keyframes leaf-flow{to{stroke-dashoffset:-40}}

/* 气孔开合（两片保卫细胞轻微分离/靠拢，气孔随之张合） */
.leaf-guard-l{transform-box:fill-box;transform-origin:center;animation:leaf-gl 3.4s ease-in-out infinite;animation-play-state:paused}
.leaf-guard-r{transform-box:fill-box;transform-origin:center;animation:leaf-gr 3.4s ease-in-out infinite;animation-play-state:paused}
.is-running .leaf-guard-l,.is-running .leaf-guard-r{animation-play-state:running}
@keyframes leaf-gl{0%,100%{transform:translateX(-4px)}50%{transform:translateX(0)}}
@keyframes leaf-gr{0%,100%{transform:translateX(4px)}50%{transform:translateX(0)}}
.leaf-pore{transform-box:fill-box;transform-origin:center;animation:leaf-pore 3.4s ease-in-out infinite;animation-play-state:paused}
.is-running .leaf-pore{animation-play-state:running}
@keyframes leaf-pore{0%,100%{transform:scaleY(1.35)}50%{transform:scaleY(1)}}

/* 阳光脉冲 */
.leaf-sun{animation:leaf-sun 3s ease-in-out infinite;animation-play-state:paused}
.is-running .leaf-sun{animation-play-state:running}
@keyframes leaf-sun{0%,100%{opacity:.6}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .is-running .leaf-co2,.is-running .leaf-o2,.is-running .leaf-h2o,
  .is-running .leaf-guard-l,.is-running .leaf-guard-r,.is-running .leaf-pore,
  .is-running .leaf-sun{animation:none}
}