/* /assets/css/physics/electromagnetism/how-capacitor-charges-and-discharges-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 电容器充放电 · Capacitor charge & discharge ============ */
/* 图形/动画样式，自 svgs/todo/physics-31-how-capacitor-charges-and-discharges-explained.html 预览 <style> 并入驻此
   （页面禁止内联 <style>）。零件区分色按 body[data-topic="capacitor"] 作用域限定，避免与 physics 其他页面同名类冲突；
   动画由 #stage 的 .is-running 驱动，减弱动效在本文件末尾兜底。 */

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

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="capacitor"] .part[data-id="part-plate-positive"]:not(.is-active) .body{fill:#c3d6ee}
body[data-topic="capacitor"] .part[data-id="part-plate-negative"]:not(.is-active) .body{fill:#b9c9de}
body[data-topic="capacitor"] .part[data-id="part-battery"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="capacitor"] .part[data-id="part-load"]:not(.is-active) .body{fill:#c6d3e5}

/* 电介质 / dielectric */
body[data-topic="capacitor"] .cap-dielectric{fill:#e6ecf5;stroke:#9aa8bd;stroke-width:1.2;stroke-dasharray:6 4}
body[data-topic="capacitor"] .part.is-active .cap-dielectric{fill:#d3dff0;stroke:#1d4ed8}

/* 电荷 / charge glyphs */
body[data-topic="capacitor"] .cap-pos{fill:#1d4ed8;font-family:var(--mono);font-size:20px;font-weight:700}
body[data-topic="capacitor"] .cap-neg{fill:#475569;font-family:var(--mono);font-size:20px;font-weight:700}
body[data-topic="capacitor"] .part.is-active .cap-pos,
body[data-topic="capacitor"] .part.is-active .cap-neg{fill:#1e40af}

/* 电场线 / field lines */
body[data-topic="capacitor"] .cap-field-line{fill:none;stroke:#3b82f6;stroke-width:2;stroke-dasharray:8 6;opacity:.9}

/* 导线 / wires */
body[data-topic="capacitor"] .cap-wire{fill:none;stroke:#8ea0b5;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* 开关刀闸 / switch blade */
body[data-topic="capacitor"] .cap-switch-blade{stroke:#2563eb;stroke-width:7;stroke-linecap:round}
body[data-topic="capacitor"] .part.is-active .cap-switch-blade{stroke:#1d4ed8;stroke-width:8}

/* 电流流动 / current flow */
body[data-topic="capacitor"] .cap-flow-line{fill:none;stroke:#1d4ed8;stroke-width:2.6;stroke-dasharray:7 13;stroke-linecap:round}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
.cap-switch-blade{transform-box:view-box;transform-origin:250px 610px;
  animation:cap-blade 9s ease-in-out infinite}
.cap-flow-charge{animation:cap-flow-charge 9s linear infinite,cap-dash 1.1s linear infinite}
.cap-flow-discharge{animation:cap-flow-discharge 9s linear infinite,cap-dash 1.1s linear infinite}
.cap-charges{animation:cap-show 9s linear infinite}
.cap-field{animation:cap-show 9s linear infinite}
.cap-field-line{animation:cap-dash 2.2s linear infinite}
@keyframes cap-blade{0%,44%{transform:rotate(0deg)}50%,94%{transform:rotate(-90deg)}100%{transform:rotate(0deg)}}
@keyframes cap-flow-charge{0%,40%{opacity:1}46%,100%{opacity:0}}
@keyframes cap-flow-discharge{0%,46%{opacity:0}52%,100%{opacity:1}}
@keyframes cap-show{0%{opacity:0}14%,40%{opacity:1}52%,100%{opacity:0}}
@keyframes cap-dash{to{stroke-dashoffset:-40}}

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

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  .cap-anim,.cap-switch-blade,.cap-field-line{animation:none !important}
  .cap-switch-blade{transform:rotate(0deg)}
  .cap-flow-charge{opacity:1}
  .cap-flow-discharge{opacity:0}
  .cap-charges,.cap-field{opacity:1}
}