/* assets/physics/fluid-dynamics/how-a-siphon-works.css — 本页专属样式（en/zh 共用） */
/* ============ 虹吸现象 · Siphon ============ */
/* siphon · merged from source <style> */
/* 虹吸图形/动画样式，自 svgs/physics-03-how-siphon-works-explained.html 预览 <style> 并入驻。
   规则按 body[data-topic="siphon"] 作用域限定，避免与 physics 其他页面同名类冲突；
   动画由 #stage 的 .is-running 驱动，减弱动效在本文件末尾兜底。 */

/* ============ 图形基础 ============ */
body[data-topic="siphon"] .svg-title{fill:#16202c;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;font-weight:600;letter-spacing:.08em;text-anchor:middle;}
body[data-topic="siphon"] .svg-sub{fill:#64748b;font-size:12px;text-anchor:middle;}
body[data-topic="siphon"] .tag{fill:#334155;font-size:19px;font-weight:600;text-anchor:middle;}
body[data-topic="siphon"] .tag-sm{fill:#5b6472;font-size:14px;text-anchor:middle;}
body[data-topic="siphon"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

/* ============ 容器 ============ */
body[data-topic="siphon"] .basin{fill:#ffffff;stroke:#1e293b;stroke-width:2.5;stroke-linejoin:round;}
body[data-topic="siphon"] .liquid-high{fill:#fb923c;opacity:.9;}
body[data-topic="siphon"] .liquid-low{fill:#22d3ee;opacity:.75;}
body[data-topic="siphon"] .liquid-line{fill:none;stroke:#ffffff;stroke-width:2;opacity:.6;}

/* ============ 虹吸管 ============ */
body[data-topic="siphon"] .tube-wall{fill:none;stroke:#1e293b;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;}
body[data-topic="siphon"] .tube-bore{fill:none;stroke:#e0f2fe;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;}

/* ============ 管内流体流动（虚线动画） ============ */
body[data-topic="siphon"] .flow{fill:none;stroke:#2563eb;stroke-width:5;stroke-linecap:round;stroke-dasharray:16 12;stroke-dashoffset:0;}
body[data-topic="siphon"] .is-running .flow{animation:siphon-flow 1s linear infinite;}
@keyframes siphon-flow{to{stroke-dashoffset:-56}}

/* ============ 大气压箭头 ============ */
body[data-topic="siphon"] .atm-arrow{fill:none;stroke:#0ea5e9;stroke-width:3;stroke-linecap:round;}
body[data-topic="siphon"] .is-running .atm-arrow{animation:siphon-push 1.8s ease-in-out infinite;}
@keyframes siphon-push{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-4px)}
}

/* ============ 高度差标记 ============ */
body[data-topic="siphon"] .height-line{fill:none;stroke:#ef4444;stroke-width:2;stroke-dasharray:5 4;}
body[data-topic="siphon"] .height-mark{fill:none;stroke:#ef4444;stroke-width:2;stroke-linecap:round;}

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="siphon"] .flow,
  body[data-topic="siphon"] .atm-arrow{animation:none;}
}