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

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

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="transformer"] .part[data-id="part-core"]:not(.is-active) .body{fill:#bcc9dc}
body[data-topic="transformer"] .part[data-id="part-primary-coil"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="transformer"] .part[data-id="part-secondary-coil"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="transformer"] .part[data-id="part-insulation"]:not(.is-active) .body{fill:#d3c4b6}
body[data-topic="transformer"] .part[data-id="part-primary-leads"]:not(.is-active) .body3{fill:#a9bccf}
body[data-topic="transformer"] .part[data-id="part-secondary-leads"]:not(.is-active) .body3{fill:#a9bccf}

/* 铁芯：叠片（lamination）与绕组匝（turns） */
body[data-topic="transformer"] .tr-core{fill:#c2d1e4;stroke:#2563eb;stroke-width:2}
body[data-topic="transformer"] .part[data-id="part-core"].is-active .tr-core{fill:#9dc3f5;stroke:#1d4ed8}
body[data-topic="transformer"] .tr-lam{fill:none;stroke:#8ea0b5;stroke-width:1;opacity:.65}
body[data-topic="transformer"] .tr-turn{fill:none;stroke:#7f93ab;stroke-width:7;stroke-linecap:round}
body[data-topic="transformer"] .part[data-id="part-primary-coil"].is-active .tr-turn,
body[data-topic="transformer"] .part[data-id="part-secondary-coil"].is-active .tr-turn{stroke:#1d4ed8}

/* 绝缘：绕线骨架（bobbin）/ 绝缘纸 */
body[data-topic="transformer"] .tr-bobbin{fill:#cbbba9;stroke:#9a8874;stroke-width:1}

/* 导线与引出线 */
body[data-topic="transformer"] .tr-wire{fill:none;stroke:#8ea0b5;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
body[data-topic="transformer"] .tr-lead-flow{fill:none;stroke:#1d4ed8;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7 14}

/* 磁通：沿铁芯闭合流动（虚线 + 箭头） */
body[data-topic="transformer"] .tr-flux{fill:none;stroke:#3b82f6;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:10 12;opacity:.95}

/* 外壳：油箱 / 机壳（剖面） */
body[data-topic="transformer"] .tr-tank{fill:#e6ecf4;stroke:#8b96a3;stroke-width:2.5;stroke-linejoin:round}
body[data-topic="transformer"] .part.is-active .tr-tank{stroke:#1d4ed8}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
body[data-topic="transformer"] .is-running .tr-flux{animation:tr-flux 1.6s linear infinite}
@keyframes tr-flux{to{stroke-dashoffset:-44}}

body[data-topic="transformer"] .is-running .tr-lead-flow{animation:tr-lead 1.1s linear infinite}
@keyframes tr-lead{to{stroke-dashoffset:-42}}

body[data-topic="transformer"] .is-running .tr-core{animation:tr-hum 3.2s ease-in-out infinite}
@keyframes tr-hum{0%,100%{stroke-width:2}50%{stroke-width:2.8}}

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="transformer"] .tr-flux,
  body[data-topic="transformer"] .tr-lead-flow,
  body[data-topic="transformer"] .tr-core{animation:none !important}
}