/* /assets/css/physics/electromagnetism/how-an-induction-motor-stator-rotor-magnetic-field-rotates-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 感应电机 · Induction motor ============ */
/* 图形/动画样式，自 svgs/todo/physics-32-how-an-induction-motor-stator-rotor-magnetic-field-rotates-explained.html 预览 <style> 并入驻此
   （页面禁止内联 <style>）。零件区分色按 body[data-topic="induction-motor"] 作用域限定，避免与 physics 其他页面同名类冲突；
   动画由 #stage 的 .is-running 驱动，减弱动效在本文件末尾兜底。 */

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

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="induction-motor"] .part[data-id="part-rotor-core"]:not(.is-active) .body{fill:#bccbe0}
body[data-topic="induction-motor"] .part[data-id="part-shaft"]:not(.is-active) .body{fill:#a9bccf}
body[data-topic="induction-motor"] .part[data-id="part-shaft"]:not(.is-active) .body2{fill:#cbd7e7}

/* 定子铁芯 / stator core（环形叠片） */
body[data-topic="induction-motor"] .im-core{fill:#c2d1e4;stroke:#2563eb;stroke-width:2}
body[data-topic="induction-motor"] .part[data-id="part-stator-core"].is-active .im-core{fill:#9dc3f5;stroke:#1d4ed8}

/* 定子绕组三相 / three-phase windings */
body[data-topic="induction-motor"] .im-wind{stroke:#2563eb;stroke-width:1;opacity:.9}
body[data-topic="induction-motor"] .im-wind-a{fill:#c2d1e4}
body[data-topic="induction-motor"] .im-wind-b{fill:#b9c9de}
body[data-topic="induction-motor"] .im-wind-c{fill:#cbd7e7}

/* 气隙 / air gap */
body[data-topic="induction-motor"] .im-gap{fill:none;stroke:#c3ccd9;stroke-width:15}
body[data-topic="induction-motor"] .part[data-id="part-air-gap"].is-active .im-gap{stroke:#9dc3f5}

/* 转子导条（鼠笼）/ squirrel-cage bars */
body[data-topic="induction-motor"] .im-bar{fill:#a9bccf;stroke:#5b6a7d;stroke-width:1.4}
body[data-topic="induction-motor"] .part[data-id="part-rotor-cage"].is-active .im-bar{fill:#1d4ed8;stroke:#1e40af}

/* 旋转磁场 / rotating field */
body[data-topic="induction-motor"] .im-field-ring{fill:none;stroke:#3b82f6;stroke-width:2;stroke-dasharray:9 8;opacity:.9}
body[data-topic="induction-motor"] .im-pole-n{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2}
body[data-topic="induction-motor"] .im-pole-s{fill:#b9c9de;stroke:#64748b;stroke-width:2}
body[data-topic="induction-motor"] .im-pole-tag{fill:#1d4ed8;font-family:var(--mono);font-size:26px;font-weight:700}
body[data-topic="induction-motor"] .im-pole-tag-s{fill:#334155;font-family:var(--mono);font-size:26px;font-weight:700}
body[data-topic="induction-motor"] .im-field-arrow{fill:none;stroke:#1d4ed8;stroke-width:3;stroke-linecap:round}

/* 电机外壳（机座） */
body[data-topic="induction-motor"] .im-frame{fill:#e6ecf4;stroke:#8b96a3;stroke-width:3}
body[data-topic="induction-motor"] .part.is-active .im-frame{stroke:#1d4ed8}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
/* 旋转磁场（较转子略快，体现转差） */
.im-field{transform-box:view-box;transform-origin:500px 430px;animation:im-field 3s linear infinite}
/* 转子被拖动，始终略落后于磁场 */
.im-rotor{transform-box:view-box;transform-origin:500px 430px;animation:im-rotor 3.18s linear infinite}
@keyframes im-field{to{transform:rotate(360deg)}}
@keyframes im-rotor{to{transform:rotate(360deg)}}

/* 三相电流依次脉动 */
.im-wind{animation:im-phase 1.5s ease-in-out infinite;animation-play-state:paused}
.im-wind-b{animation-delay:.5s}
.im-wind-c{animation-delay:1s}
@keyframes im-phase{0%,100%{opacity:.5}33%{opacity:1}}

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

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  .im-anim,.im-wind,.im-field,.im-rotor{animation:none !important}
  .im-wind{opacity:.9}
}