/* assets/css/physics/basic-mechanics/inclined-plane-force-decomposition-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 斜面受力分解 · Inclined-plane force decomposition ============ */
/* 页面专属类统一 ip- 前缀；基础骨架与 .part/.body/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="inclined-plane"] 作用域限定，避免与其它页互扰。 */
body[data-topic="inclined-plane"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="inclined-plane"] .part .body2{stroke:#60a5fa;stroke-width:1.2}
body[data-topic="inclined-plane"] .tag{font-size:14px}
body[data-topic="inclined-plane"] .tag-sm{fill:#5b6472;font-size:11.5px}

/* 高亮态：换色 + 描边加粗 + 发光（SVG-SPEC §4.9） */
body[data-topic="inclined-plane"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="inclined-plane"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
body[data-topic="inclined-plane"] .part.is-active .body3{fill:#1d4ed8}
body[data-topic="inclined-plane"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁近白） */
body[data-topic="inclined-plane"] .part[data-id="part-incline"]:not(.is-active) .body{fill:#c7d4e6}
body[data-topic="inclined-plane"] .part[data-id="part-incline"]:not(.is-active) .body2{fill:#dbe6f4}
body[data-topic="inclined-plane"] .part[data-id="part-block"]:not(.is-active) .body{fill:#b7c9dd}
body[data-topic="inclined-plane"] .part[data-id="part-block"]:not(.is-active) .body2{fill:#d8e3ef}
body[data-topic="inclined-plane"] .part[data-id="part-block"]:not(.is-active) .body3{fill:#aab9cd}

/* 力箭头：重力橙红 / 分力蓝虚线 / 法向绿 */
body[data-topic="inclined-plane"] .ip-force{fill:none;stroke:#b91c1c;stroke-width:4.2;stroke-linecap:round}
body[data-topic="inclined-plane"] .ip-comp{fill:none;stroke:#1d4ed8;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:9 7}
body[data-topic="inclined-plane"] .ip-normal{fill:none;stroke:#047857;stroke-width:3.6;stroke-linecap:round}
body[data-topic="inclined-plane"] .ip-guide{fill:none;stroke:#94a3b8;stroke-width:1.6;stroke-dasharray:6 5}
body[data-topic="inclined-plane"] .ip-angle{fill:none;stroke:#475569;stroke-width:1.8}
body[data-topic="inclined-plane"] .ip-ground{fill:none;stroke:#94a3b8;stroke-width:2.4;stroke-linecap:round}
body[data-topic="inclined-plane"] .part.is-active .ip-force{stroke:#7f1d1d;stroke-width:4.8}
body[data-topic="inclined-plane"] .part.is-active .ip-comp{stroke:#1e40af;stroke-width:3.8}
body[data-topic="inclined-plane"] .part.is-active .ip-normal{stroke:#065f46;stroke-width:4.2}

/* ============ 动画（纯 CSS · 打开即运行） ============ */
body[data-topic="inclined-plane"] .ip-pulse-w{transform-box:view-box;transform-origin:520px 339px;animation:ip-pulse-w 3.6s ease-in-out infinite}
@keyframes ip-pulse-w{0%,100%{transform:scaleY(.9)}50%{transform:scaleY(1.08)}}
body[data-topic="inclined-plane"] .ip-flow{animation:ip-flow 1.3s linear infinite}
@keyframes ip-flow{to{stroke-dashoffset:-32}}
body[data-topic="inclined-plane"] .ip-pulse-n{transform-box:view-box;transform-origin:520px 384px;animation:ip-pulse-n 3.6s ease-in-out infinite}
@keyframes ip-pulse-n{0%,100%{transform:scaleX(.92)}50%{transform:scaleX(1.06)}}

@media (prefers-reduced-motion:reduce){
  body[data-topic="inclined-plane"] .ip-pulse-w,
  body[data-topic="inclined-plane"] .ip-flow,
  body[data-topic="inclined-plane"] .ip-pulse-n{animation:none}
}