/* assets/css/physics/basic-chem/how-distillation-separation-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 蒸馏分离 · Distillation ============ */
/* 图形/动画样式自 svgs/physics-38-how-distillation-separation-works-explained.html 预览 <style> 并入驻。
   规则按 body[data-topic="distillation"] 作用域限定，避免与 physics 其他页面同名类冲突；
   动画由 #stage 的 .is-running 驱动，减弱动效在本文件末尾兜底。 */

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

/* ============ 玻璃器皿与加热 ============ */
body[data-topic="distillation"] .flask{fill:#ffffff;stroke:#1e293b;stroke-width:3;stroke-linejoin:round;}
body[data-topic="distillation"] .mixture{fill:#fbbf24;opacity:.85;}
body[data-topic="distillation"] .flame{fill:#fb923c;stroke:#ea580c;stroke-width:1.5;}
body[data-topic="distillation"] .flame2{fill:#fde68a;}

/* ============ 蒸馏头管路 ============ */
body[data-topic="distillation"] .tube-wall{fill:none;stroke:#1e293b;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;}
body[data-topic="distillation"] .tube-bore{fill:none;stroke:#e0f2fe;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}

/* ============ 蒸气流动（虚线动画） ============ */
body[data-topic="distillation"] .vapor{fill:none;stroke:#d97706;stroke-width:5;stroke-linecap:round;stroke-dasharray:14 12;}
body[data-topic="distillation"] .is-running .vapor{animation:dist-flow 1.3s linear infinite;}
@keyframes dist-flow{to{stroke-dashoffset:-52}}

/* ============ 冷凝器与冷却水 ============ */
body[data-topic="distillation"] .condenser-jacket{fill:#dbeafe;stroke:#60a5fa;stroke-width:2;stroke-linejoin:round;}
body[data-topic="distillation"] .cool{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;}
body[data-topic="distillation"] .is-running .cool-flow{animation:dist-cool 1.4s ease-in-out infinite;}
@keyframes dist-cool{0%,100%{opacity:.6}50%{opacity:1}}

/* ============ 冷凝液滴 ============ */
body[data-topic="distillation"] .condensate{fill:#2563eb;}
body[data-topic="distillation"] .is-running .drop{animation:dist-drop 1.6s ease-in infinite;}
@keyframes dist-drop{0%{opacity:0;transform:translateY(-14px)}30%{opacity:1}100%{opacity:0;transform:translateY(26px)}}

/* ============ 接收瓶 ============ */
body[data-topic="distillation"] .receiver{fill:#ffffff;stroke:#1e293b;stroke-width:3;stroke-linejoin:round;}
body[data-topic="distillation"] .distillate{fill:#93c5fd;opacity:.85;}

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