/* assets/css/physics/basic-mechanics/simple-harmonic-motion-mass-spring-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 简谐运动（弹簧振子）· Simple harmonic motion, mass on a spring ============ */
/* 页面专属类统一 sh- 前缀；基础骨架与 .part/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="simple-harmonic-motion"] 作用域限定，避免与其它页互扰。
   各部件区分色均落在中灰蓝值域内，禁用近白。 */

/* 零件本体 / 高亮配色模型（SVG-SPEC §4.9） */
body[data-topic="simple-harmonic-motion"] .part .body{fill:#c2d1e4;stroke:#2563eb;stroke-width:1.6}
body[data-topic="simple-harmonic-motion"] .part .body2{fill:#dde7f4;stroke:#60a5fa;stroke-width:1.2}
body[data-topic="simple-harmonic-motion"] .part .body3{fill:#aab9cd;stroke:none}
body[data-topic="simple-harmonic-motion"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="simple-harmonic-motion"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
body[data-topic="simple-harmonic-motion"] .part.is-active .body3{fill:#1d4ed8}
body[data-topic="simple-harmonic-motion"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}
body[data-topic="simple-harmonic-motion"] .tag{font-size:14px}
body[data-topic="simple-harmonic-motion"] .tag-sm{fill:#5b6472;font-size:11.5px}

/* 各部件区分色（作用域限定） */
body[data-topic="simple-harmonic-motion"] .part[data-id="part-mass"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="simple-harmonic-motion"] .part[data-id="part-mass"]:not(.is-active) .body2{fill:#d6e9fb}
body[data-topic="simple-harmonic-motion"] .part[data-id="part-support"]:not(.is-active) .body{fill:#bfcde0}
body[data-topic="simple-harmonic-motion"] .part[data-id="part-support"]:not(.is-active) .body2{fill:#dbe5f1}

/* 图内标题 / 质量标注 / 底部公式 */
body[data-topic="simple-harmonic-motion"] .sh-title{fill:#16202c;font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.08em;text-anchor:middle}
body[data-topic="simple-harmonic-motion"] .sh-mass{fill:#1e40af;font-family:var(--mono);font-size:20px;font-weight:700;text-anchor:middle}
body[data-topic="simple-harmonic-motion"] .sh-eq{fill:#1e40af;font-family:var(--mono);font-size:15px;font-weight:600;text-anchor:middle}

/* 墙面 / 地面 */
body[data-topic="simple-harmonic-motion"] .sh-hatch{stroke:#8ea0b5;stroke-width:1.4}
body[data-topic="simple-harmonic-motion"] .sh-floor{stroke:#8ea0b5;stroke-width:3;stroke-linecap:round}

/* 弹簧（线圈） */
body[data-topic="simple-harmonic-motion"] .sh-spring{fill:none;stroke:#5b6a7d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* 平衡位置虚线 */
body[data-topic="simple-harmonic-motion"] .sh-eqline{fill:none;stroke:#94a3b8;stroke-width:1.8;stroke-dasharray:7 6}

/* 位移尺寸线 */
body[data-topic="simple-harmonic-motion"] .sh-dim{fill:none;stroke:#475569;stroke-width:1.6;stroke-linecap:round}
body[data-topic="simple-harmonic-motion"] .part.is-active .sh-dim{stroke:#1d4ed8;stroke-width:2.2}

/* 恢复力箭头（实线指向平衡位置，呼吸） */
body[data-topic="simple-harmonic-motion"] .sh-force{fill:none;stroke:#1d4ed8;stroke-width:5;stroke-linecap:round;animation:sh-breathe 2.6s ease-in-out infinite}
@keyframes sh-breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* 位移曲线 + 沿线行进的脉冲 */
body[data-topic="simple-harmonic-motion"] .sh-axis{fill:none;stroke:#c3ccd9;stroke-width:1.6;stroke-dasharray:5 5}
body[data-topic="simple-harmonic-motion"] .sh-trace{fill:none;stroke:#9fb6d6;stroke-width:2.6}
body[data-topic="simple-harmonic-motion"] .sh-marker{fill:none;stroke:#ea580c;stroke-width:6;stroke-linecap:round;stroke-dasharray:14 986;animation:sh-run 3.4s linear infinite}
@keyframes sh-run{to{stroke-dashoffset:-1000}}

@media (prefers-reduced-motion:reduce){
  body[data-topic="simple-harmonic-motion"] .sh-force,
  body[data-topic="simple-harmonic-motion"] .sh-marker{animation:none}
}