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

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

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="permanent-magnet-domain"] .part[data-id="part-magnet"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="permanent-magnet-domain"] .part[data-id="part-magnet"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="permanent-magnet-domain"] .part[data-id="part-random-domains"]:not(.is-active) .body{fill:#cedbe9}
body[data-topic="permanent-magnet-domain"] .part[data-id="part-random-domains"]:not(.is-active) .body2{fill:#e1eaf5}

/* 磁力线：外部自 N 极绕回 S 极 */
body[data-topic="permanent-magnet-domain"] .pm-field{fill:none;stroke:#3b82f6;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:9 7;opacity:.9}

/* 磁畴小箭头 */
body[data-topic="permanent-magnet-domain"] .pm-dom{fill:none;stroke:#1d4ed8;stroke-width:3;stroke-linecap:round}
body[data-topic="permanent-magnet-domain"] .pm-random{fill:none;stroke:#8ea0b5;stroke-width:3;stroke-linecap:round}

/* 磁极标记与引线 */
body[data-topic="permanent-magnet-domain"] .pm-pole-cap{fill:#3b82f6;stroke:#1d4ed8;stroke-width:1}
body[data-topic="permanent-magnet-domain"] .pm-pole-cap-s{fill:#9aa8bd;stroke:#64748b;stroke-width:1}
body[data-topic="permanent-magnet-domain"] .pm-pole-text{font-family:var(--mono);font-size:22px;font-weight:700;fill:#1d4ed8}
body[data-topic="permanent-magnet-domain"] .pm-pole-text-s{font-family:var(--mono);font-size:22px;font-weight:700;fill:#475569}
body[data-topic="permanent-magnet-domain"] .part.is-active .pm-pole-cap{fill:#1d4ed8}
body[data-topic="permanent-magnet-domain"] .part.is-active .pm-pole-text{fill:#1d4ed8}

/* 对照小方框（未磁化铁） */
body[data-topic="permanent-magnet-domain"] .pm-inset{fill:#ffffff;stroke:var(--line);stroke-width:1.5}
body[data-topic="permanent-magnet-domain"] .pm-inset-head{fill:#16202c;font-family:var(--mono);font-size:13px;font-weight:600}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
/* 磁力线淡入 + 流动 + 脉动 */
body[data-topic="permanent-magnet-domain"] .pm-field-wrap{opacity:0;animation:pm-on .6s ease 1.1s both}
@keyframes pm-on{from{opacity:0}to{opacity:1}}
body[data-topic="permanent-magnet-domain"] .pm-field{animation:pm-field-dash 2.6s linear infinite,pm-field-pulse 3.2s ease-in-out infinite}
@keyframes pm-field-dash{to{stroke-dashoffset:-32}}
@keyframes pm-field-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 磁畴整齐排列：小箭头依次就位（略带角度→水平） */
body[data-topic="permanent-magnet-domain"] .pm-dom-wrap{opacity:0;animation:pm-on .5s ease .4s both}
body[data-topic="permanent-magnet-domain"] .pm-dom{transform-box:fill-box;transform-origin:center;
  animation:pm-dom .9s cubic-bezier(.34,1.2,.64,1) both;
  animation-delay:calc(.5s + var(--i,0) * .08s)}
@keyframes pm-dom{from{transform:rotate(var(--a0,80deg))}to{transform:rotate(0deg)}}

/* 未磁化铁里的磁畴：轻微抖动、杂乱 */
body[data-topic="permanent-magnet-domain"] .pm-random-wrap{opacity:0;animation:pm-on .5s ease 1.2s both}
body[data-topic="permanent-magnet-domain"] .pm-random{transform-box:fill-box;transform-origin:center;animation:pm-jiggle 3s ease-in-out infinite;animation-delay:calc(var(--j,0) * .2s)}
@keyframes pm-jiggle{0%,100%{transform:rotate(0deg)}50%{transform:rotate(14deg)}}

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

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="permanent-magnet-domain"] .pm-anim{animation:none !important}
  body[data-topic="permanent-magnet-domain"] .pm-field-wrap,
  body[data-topic="permanent-magnet-domain"] .pm-dom-wrap,
  body[data-topic="permanent-magnet-domain"] .pm-random-wrap{opacity:1}
  body[data-topic="permanent-magnet-domain"] .pm-field,
  body[data-topic="permanent-magnet-domain"] .pm-dom,
  body[data-topic="permanent-magnet-domain"] .pm-random{stroke-dashoffset:0;transform:none}
}