/* assets/css/physics/basic-mechanics/momentum-transfer-and-collision-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 动量传递与碰撞 · Momentum transfer & collision ============ */
/* 页面专属类统一 cm- 前缀；基础骨架与 .part/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="momentum"] 作用域限定，避免与其它页互扰。 */

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

/* 各部件区分色（作用域限定 · 均落在中灰蓝值域内，禁近白） */
body[data-topic="momentum"] .part[data-id="part-collision-track"]:not(.is-active) .body{fill:#bfcde0}
body[data-topic="momentum"] .part[data-id="part-collision-track"]:not(.is-active) .body2{fill:#dbe5f1}
body[data-topic="momentum"] .part[data-id="part-ball-a"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="momentum"] .part[data-id="part-ball-a"]:not(.is-active) .body2{fill:#d6e9fb}
body[data-topic="momentum"] .part[data-id="part-ball-b"]:not(.is-active) .body{fill:#c9d3e0}
body[data-topic="momentum"] .part[data-id="part-ball-b"]:not(.is-active) .body2{fill:#e0e8f2}
body[data-topic="momentum"] .part[data-id="part-momentum-readout"]:not(.is-active) .body{fill:#c8c1e5}
body[data-topic="momentum"] .part[data-id="part-momentum-readout"]:not(.is-active) .body2{fill:#e5e1f4}

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

/* 速度箭头（虚线流动） */
body[data-topic="momentum"] .cm-vel{fill:none;stroke:#1d4ed8;stroke-width:4;stroke-linecap:round;stroke-dasharray:12 14;
  animation:cm-flow 1.2s linear infinite}
@keyframes cm-flow{to{stroke-dashoffset:-26}}

/* 碰撞点：竖直虚线 + 闪烁星芒 */
body[data-topic="momentum"] .cm-contact-line{fill:none;stroke:#94a3b8;stroke-width:1.6;stroke-dasharray:6 6}
body[data-topic="momentum"] .cm-flash-ring{fill:none;stroke:#ea580c;stroke-width:3}
body[data-topic="momentum"] .cm-flash-spark{fill:none;stroke:#ea580c;stroke-width:3;stroke-linecap:round}

/* ============ 动画（纯 CSS · 打开即运行） ============ */
/* 球 A：向右接近，接触后立即停住（等质量对心弹性碰撞） */
body[data-topic="momentum"] .cm-ball-a{transform-box:view-box;animation:cm-a 5s ease-in-out infinite}
@keyframes cm-a{0%{transform:translateX(0)}40%{transform:translateX(248px)}100%{transform:translateX(248px)}}

/* 球 B：静止等待，碰撞后被推着以同样速度离开 */
body[data-topic="momentum"] .cm-ball-b{transform-box:view-box;animation:cm-b 5s ease-in-out infinite}
@keyframes cm-b{0%,40%{transform:translateX(0)}100%{transform:translateX(260px)}}

/* 接触瞬间的橙色星芒闪烁 */
body[data-topic="momentum"] .cm-flash{transform-box:view-box;transform-origin:634px 300px;opacity:0;
  animation:cm-flash 5s ease-in-out infinite}
@keyframes cm-flash{0%,34%{opacity:0;transform:scale(.5)}42%{opacity:1;transform:scale(1)}56%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}

@media (prefers-reduced-motion:reduce){
  body[data-topic="momentum"] .cm-ball-a,
  body[data-topic="momentum"] .cm-ball-b,
  body[data-topic="momentum"] .cm-flash,
  body[data-topic="momentum"] .cm-vel{animation:none}
}