/* assets/css/physics/basic-mechanics/centrifugal-centripetal-force-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 离心力与向心力 · Centrifugal & centripetal force ============ */
/* 页面专属类统一 cs- 前缀；基础骨架与 .part/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="centrifugal-force"] 作用域限定，避免与其它页互扰。
   各部件区分色均落在中灰蓝值域内，禁用近白。 */

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

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

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

/* 圆形轨道（虚线环，流动暗示绕行方向） */
body[data-topic="centrifugal-force"] .cs-orbit{fill:none;stroke:#9fb6d6;stroke-width:2.4;stroke-dasharray:14 12;animation:cs-dash 1.5s linear infinite}
@keyframes cs-dash{to{stroke-dashoffset:-26}}

/* 半径尺寸线 */
body[data-topic="centrifugal-force"] .cs-dim{fill:none;stroke:#475569;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:6 5}
body[data-topic="centrifugal-force"] .part.is-active .cs-dim{stroke:#1d4ed8;stroke-width:2}

/* 切向速度箭头（虚线流动） */
body[data-topic="centrifugal-force"] .cs-vel{fill:none;stroke:#1d4ed8;stroke-width:4;stroke-linecap:round;stroke-dasharray:12 12;animation:cs-flow 1.1s linear infinite}
@keyframes cs-flow{to{stroke-dashoffset:-24}}

/* 向心力（实线向内，呼吸） */
body[data-topic="centrifugal-force"] .cs-force-in{fill:none;stroke:#1d4ed8;stroke-width:5;stroke-linecap:round;animation:cs-breathe-in 2.4s ease-in-out infinite}
@keyframes cs-breathe-in{0%,100%{opacity:.55}50%{opacity:1}}

/* 离心力（虚线向外，呼吸反相） */
body[data-topic="centrifugal-force"] .cs-force-out{fill:none;stroke:#d97706;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:10 9;animation:cs-breathe-out 2.4s ease-in-out infinite}
@keyframes cs-breathe-out{0%,100%{opacity:1}50%{opacity:.5}}

/* 绕行位标（小点沿轨道旋转，强化“在转动”） */
body[data-topic="centrifugal-force"] .cs-run{transform-box:view-box;transform-origin:600px 430px;animation:cs-spin 3.4s linear infinite}
@keyframes cs-spin{to{transform:rotate(-360deg)}}
body[data-topic="centrifugal-force"] .cs-run-dot{fill:#1d4ed8;stroke:#ffffff;stroke-width:2}

@media (prefers-reduced-motion:reduce){
  body[data-topic="centrifugal-force"] .cs-orbit,
  body[data-topic="centrifugal-force"] .cs-vel,
  body[data-topic="centrifugal-force"] .cs-force-in,
  body[data-topic="centrifugal-force"] .cs-force-out,
  body[data-topic="centrifugal-force"] .cs-run{animation:none}
}