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

/* ============ 图形基础 ============ */
body[data-topic="osmosis"] .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="osmosis"] .svg-sub{fill:#5b6a7d;font-size:12px;text-anchor:middle;}
body[data-topic="osmosis"] .tag{fill:#334155;font-size:16px;font-weight:600;text-anchor:middle;}
body[data-topic="osmosis"] .tag-sm{fill:#5b6472;font-size:13px;text-anchor:middle;}
body[data-topic="osmosis"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

/* ============ 容器与膜 ============ */
body[data-topic="osmosis"] .vessel{fill:none;stroke:#1e293b;stroke-width:4;stroke-linejoin:round;}
body[data-topic="osmosis"] .membrane{stroke:#1e293b;stroke-width:6;stroke-dasharray:10 8;stroke-linecap:round;}

/* ============ 溶液与溶质 ============ */
body[data-topic="osmosis"] .water-dilute{fill:#dbeafe;stroke:#93c5fd;stroke-width:1;}
body[data-topic="osmosis"] .water-conc{fill:#bfdbfe;stroke:#60a5fa;stroke-width:1;}
body[data-topic="osmosis"] .solute{fill:#f97316;stroke:#c2410c;stroke-width:1.5;}

/* ============ 水的净流动（虚线动画） ============ */
body[data-topic="osmosis"] .flow{fill:none;stroke:#2563eb;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:12 10;}
body[data-topic="osmosis"] .is-running .flow{animation:osmosis-flow 1.2s linear infinite;}
@keyframes osmosis-flow{to{stroke-dashoffset:-44}}

/* ============ 溶质脉动 ============ */
body[data-topic="osmosis"] .is-running .solute{animation:osmosis-pulse 2.2s ease-in-out infinite;}
@keyframes osmosis-pulse{0%,100%{opacity:.8}50%{opacity:1}}

/* ============ 液位标记 ============ */
body[data-topic="osmosis"] .levels{fill:none;stroke:#dc2626;stroke-width:2;stroke-dasharray:5 4;}

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