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

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

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="electromagnet"] .part[data-id="part-iron-core"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="electromagnet"] .part[data-id="part-iron-core"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="electromagnet"] .part[data-id="part-battery"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="electromagnet"] .part[data-id="part-battery"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="electromagnet"] .part[data-id="part-battery"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="electromagnet"] .part[data-id="part-switch"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="electromagnet"] .part[data-id="part-switch"]:not(.is-active) .body2{fill:#e0eaf5}
body[data-topic="electromagnet"] .part[data-id="part-attracted-object"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="electromagnet"] .part[data-id="part-attracted-object"]:not(.is-active) .body2{fill:#dce7f3}
body[data-topic="electromagnet"] .part[data-id="part-attracted-object"]:not(.is-active) .body3{fill:#aab9cd}

/* 线圈绕组（导线缠成的螺管） */
body[data-topic="electromagnet"] .em-turn{fill:none;stroke:#7f93ab;stroke-width:6;stroke-linecap:round}
body[data-topic="electromagnet"] .part.is-active .em-turn{stroke:#1d4ed8}

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

/* 磁力线：自 N 极出发，经外部空间回到 S 极 */
body[data-topic="electromagnet"] .em-field-line{fill:none;stroke:#3b82f6;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:9 7;opacity:.9}

/* 磁畴（铁芯内部小箭头）与磁极标记 */
body[data-topic="electromagnet"] .em-domain{fill:#3b82f6}
body[data-topic="electromagnet"] .em-pole-cap{fill:#3b82f6;stroke:#1d4ed8;stroke-width:1}
body[data-topic="electromagnet"] .em-pole-cap-s{fill:#9aa8bd;stroke:#64748b;stroke-width:1}
body[data-topic="electromagnet"] .em-pole-text{font-family:var(--mono);font-size:22px;font-weight:700;fill:#1d4ed8}
body[data-topic="electromagnet"] .em-pole-text-s{font-family:var(--mono);font-size:22px;font-weight:700;fill:#475569}
body[data-topic="electromagnet"] .part.is-active .em-pole-cap{fill:#1d4ed8}
body[data-topic="electromagnet"] .part.is-active .em-pole-text{fill:#1d4ed8}
body[data-topic="electromagnet"] .part.is-active .em-domain{fill:#1d4ed8}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
/* 合上开关：刀闸落下 */
body[data-topic="electromagnet"] .em-switch-blade{transform-box:view-box;transform-origin:540px 650px;
  animation:em-switch .7s cubic-bezier(.34,1.3,.6,1) .1s both}
@keyframes em-switch{from{transform:rotate(-42deg)}to{transform:rotate(0deg)}}

/* 电流出现（开关合上后淡入） */
body[data-topic="electromagnet"] .em-flow-wrap{opacity:0;animation:em-on .5s ease .9s both}
body[data-topic="electromagnet"] .em-field-wrap{opacity:0;animation:em-on .6s ease 1s both}
@keyframes em-on{from{opacity:0}to{opacity:1}}

/* 电流沿导线与线圈流动（虚线动画） */
body[data-topic="electromagnet"] .em-flow-line{animation:em-flow-dash 1.1s linear infinite}
body[data-topic="electromagnet"] .em-flow-turn{animation:em-flow-dash 1.4s linear infinite}
@keyframes em-flow-dash{to{stroke-dashoffset:-26}}

/* 磁力线流动 + 脉动 */
body[data-topic="electromagnet"] .em-field-line{animation:em-field-dash 2.6s linear infinite,em-field-pulse 3.2s ease-in-out infinite}
@keyframes em-field-dash{to{stroke-dashoffset:-32}}
@keyframes em-field-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 铁芯内磁畴：依次转向、整齐排列 */
body[data-topic="electromagnet"] .em-domain{transform-box:fill-box;transform-origin:center;
  animation:em-domain 1.5s cubic-bezier(.34,1.2,.64,1) both;
  animation-delay:calc(.7s + var(--i,0) * .12s)}
@keyframes em-domain{from{transform:rotate(var(--a0,90deg))}to{transform:rotate(0deg)}}

/* 铁钉被磁极吸过去 */
body[data-topic="electromagnet"] .em-nail{animation:em-nail 1.1s cubic-bezier(.3,1.35,.6,1) 1s both}
@keyframes em-nail{0%{transform:translateX(0)}65%{transform:translateX(-18px)}100%{transform:translateX(-16px)}}

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

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="electromagnet"] .em-anim{animation:none !important}
  body[data-topic="electromagnet"] .em-flow-wrap,
  body[data-topic="electromagnet"] .em-field-wrap{opacity:1}
  body[data-topic="electromagnet"] .em-nail{transform:translateX(-16px)}
  body[data-topic="electromagnet"] .em-flow-line,
  body[data-topic="electromagnet"] .em-flow-turn,
  body[data-topic="electromagnet"] .em-field-line{stroke-dashoffset:0}
}