/* /assets/css/physics/electromagnetism/capacitor-vs-inductor-energy-storage.css — 本页专属样式（en/zh 共用） */
/* ============ 电容 vs 电感储能 · Capacitor vs inductor ============ */
/* 图形/动画样式，自 svgs/todo/physics-36-capacitor-vs-inductor-energy-storage.html 预览 <style> 并入驻此
   （页面禁止内联 <style>）。规则按 body[data-topic="capacitor-vs-inductor"] 作用域限定，避免与 physics 其他页面同名类冲突；
   动画由 #stage 的 .is-running 驱动，减弱动效在本文件末尾兜底。 */

/* ============ 零件本体/区分色（part bodies & per-part distinct fills） ============ */
body[data-topic="capacitor-vs-inductor"] .part .body{fill:#c2d1e4;stroke:#2563eb;stroke-width:1.6}
body[data-topic="capacitor-vs-inductor"] .part .body2{fill:#dde7f4;stroke:#60a5fa;stroke-width:1.2}
body[data-topic="capacitor-vs-inductor"] .part .body3{fill:#aab9cd;stroke:none}
body[data-topic="capacitor-vs-inductor"] .part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-topic="capacitor-vs-inductor"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="capacitor-vs-inductor"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
body[data-topic="capacitor-vs-inductor"] .part.is-active .body3{fill:#1d4ed8}
body[data-topic="capacitor-vs-inductor"] .part.is-active .accent{stroke:#1d4ed8}
body[data-topic="capacitor-vs-inductor"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}
body[data-topic="capacitor-vs-inductor"] .tag{font-size:13.5px}
body[data-topic="capacitor-vs-inductor"] .tag-sm{fill:#5b6472;font-size:11px}

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="capacitor-vs-inductor"] .part[data-id="part-capacitor-plates"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="capacitor-vs-inductor"] .part[data-id="part-capacitor-plates"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="capacitor-vs-inductor"] .part[data-id="part-source"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="capacitor-vs-inductor"] .part[data-id="part-source"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="capacitor-vs-inductor"] .part[data-id="part-source"]:not(.is-active) .body3{fill:#aab9cd}

/* 导线导体 + 电流虚线（统一主题蓝） */
body[data-topic="capacitor-vs-inductor"] .ci-wire{fill:none;stroke:#8ea0b5;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
body[data-topic="capacitor-vs-inductor"] .ci-flow{fill:none;stroke:#1d4ed8;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7 14}

/* 电容器：极板间电场（均匀虚线）与极板电荷 */
body[data-topic="capacitor-vs-inductor"] .ci-efield{fill:none;stroke:#3b82f6;stroke-width:2;stroke-linecap:round;stroke-dasharray:10 8;opacity:.92}
body[data-topic="capacitor-vs-inductor"] .ci-charge-plus{font-family:var(--mono);font-size:18px;font-weight:700;fill:#1d4ed8}
body[data-topic="capacitor-vs-inductor"] .ci-charge-minus{font-family:var(--mono);font-size:18px;font-weight:700;fill:#be123c}

/* 电感器：线圈 + 环绕磁场 */
body[data-topic="capacitor-vs-inductor"] .ci-turn{fill:none;stroke:#7f93ab;stroke-width:6;stroke-linecap:round}
body[data-topic="capacitor-vs-inductor"] .part.is-active .ci-turn{stroke:#1d4ed8}
body[data-topic="capacitor-vs-inductor"] .ci-mfield{fill:none;stroke:#3b82f6;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:9 7;opacity:.9}

/* 公式框 / 分栏 / vs 徽标 */
body[data-topic="capacitor-vs-inductor"] .ci-formula{fill:#ffffff;stroke:var(--line);stroke-width:1.5}
body[data-topic="capacitor-vs-inductor"] .ci-formula-eq{fill:#16202c;font-family:var(--mono);font-size:20px;font-weight:600}
body[data-topic="capacitor-vs-inductor"] .ci-formula-cap{fill:#5b6472;font-family:var(--sans);font-size:12px}
body[data-topic="capacitor-vs-inductor"] .ci-divider{stroke:#c3ccd9;stroke-width:1.5;stroke-dasharray:6 8}
body[data-topic="capacitor-vs-inductor"] .ci-vs{fill:#ffffff;stroke:var(--accent);stroke-width:1.5}
body[data-topic="capacitor-vs-inductor"] .ci-vs-text{fill:var(--accent-2);font-family:var(--mono);font-size:16px;font-weight:700}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
/* 电场 / 磁场 / 电流淡入 */
body[data-topic="capacitor-vs-inductor"] .ci-flow-wrap{opacity:0;animation:ci-on .6s ease .5s both}
body[data-topic="capacitor-vs-inductor"] .ci-efield-wrap{opacity:0;animation:ci-on .6s ease .9s both}
body[data-topic="capacitor-vs-inductor"] .ci-mfield-wrap{opacity:0;animation:ci-on .6s ease 1.1s both}
@keyframes ci-on{from{opacity:0}to{opacity:1}}

/* 电流沿线流动 */
body[data-topic="capacitor-vs-inductor"] .ci-flow{animation:ci-flow-dash 1.1s linear infinite}
@keyframes ci-flow-dash{to{stroke-dashoffset:-26}}

/* 电场流动 + 脉动（电容在充电） */
body[data-topic="capacitor-vs-inductor"] .ci-efield{animation:ci-efield-dash 2.4s linear infinite,ci-efield-pulse 3s ease-in-out infinite}
@keyframes ci-efield-dash{to{stroke-dashoffset:-36}}
@keyframes ci-efield-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 磁场流动 + 脉动（电感在建场） */
body[data-topic="capacitor-vs-inductor"] .ci-mfield{animation:ci-mfield-dash 2.6s linear infinite,ci-mfield-pulse 3.2s ease-in-out infinite}
@keyframes ci-mfield-dash{to{stroke-dashoffset:-32}}
@keyframes ci-mfield-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 统一动画开关（引擎给 #stage 加 .is-running 后运行） */
body[data-topic="capacitor-vs-inductor"] .ci-anim{animation-play-state:paused}
body[data-topic="capacitor-vs-inductor"] .is-running .ci-anim{animation-play-state:running}

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="capacitor-vs-inductor"] .ci-anim{animation:none !important}
  body[data-topic="capacitor-vs-inductor"] .ci-flow-wrap,
  body[data-topic="capacitor-vs-inductor"] .ci-efield-wrap,
  body[data-topic="capacitor-vs-inductor"] .ci-mfield-wrap{opacity:1}
  body[data-topic="capacitor-vs-inductor"] .ci-flow,
  body[data-topic="capacitor-vs-inductor"] .ci-efield,
  body[data-topic="capacitor-vs-inductor"] .ci-mfield{stroke-dashoffset:0}
}