/* assets/css/physics/basic-mechanics/how-lever-mechanical-advantage-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 杠杆与机械利益 · Lever & mechanical advantage ============ */
/* 页面专属类统一 lv- 前缀；基础骨架与 .part/.body/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="lever"] 作用域限定，避免与其它页互扰。 */
body[data-topic="lever"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="lever"] .part .body2{stroke:#60a5fa}
body[data-topic="lever"] .tag{font-size:14px}
body[data-topic="lever"] .tag-sm{fill:#5b6472;font-size:11.5px}

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

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="lever"] .part[data-id="part-lever-bar"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="lever"] .part[data-id="part-lever-bar"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="lever"] .part[data-id="part-lever-bar"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="lever"] .part[data-id="part-fulcrum"]:not(.is-active) .body{fill:#b9c9de}
body[data-topic="lever"] .part[data-id="part-fulcrum"]:not(.is-active) .body2{fill:#d5e1f1}
body[data-topic="lever"] .part[data-id="part-fulcrum"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="lever"] .part[data-id="part-load-force"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="lever"] .part[data-id="part-load-force"]:not(.is-active) .body2{fill:#e0eaf5}

/* 力箭头（统一主题蓝，长度/粗细区分大小） */
body[data-topic="lever"] .lv-force{fill:none;stroke:#1d4ed8;stroke-width:3.4;stroke-linecap:round}
body[data-topic="lever"] .lv-force-big{stroke-width:4.6}
body[data-topic="lever"] .part.is-active .lv-force{stroke:#1e40af}

/* 力臂尺寸线（动力臂 / 阻力臂） */
body[data-topic="lever"] .lv-dim{fill:none;stroke:#475569;stroke-width:1.6;stroke-linecap:round}
body[data-topic="lever"] .part.is-active .lv-dim{stroke:#1d4ed8;stroke-width:2.2}

/* 支点圆点 + 摆动角弧线 */
body[data-topic="lever"] .lv-pivot{fill:#1d4ed8}
body[data-topic="lever"] .lv-angle{fill:none;stroke:#64748b;stroke-width:1.6;stroke-dasharray:5 5}
body[data-topic="lever"] .part.is-active .lv-angle{stroke:#1d4ed8}

/* ============ 动画（纯 CSS · 打开即运行） ============ */
/* 杠杆绕支点轻微往复摆动 */
body[data-topic="lever"] .lv-swing{transform-box:view-box;transform-origin:600px 500px;
  animation:lv-swing 4.6s ease-in-out infinite}
@keyframes lv-swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
/* 力箭头随摆动伸缩 */
body[data-topic="lever"] .lv-pulse-f{transform-box:view-box;transform-origin:205px 446px;
  animation:lv-pulse-f 4.6s ease-in-out infinite}
@keyframes lv-pulse-f{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1.14)}}
body[data-topic="lever"] .lv-pulse-w{transform-box:view-box;transform-origin:815px 352px;
  animation:lv-pulse-w 4.6s ease-in-out infinite}
@keyframes lv-pulse-w{0%,100%{transform:scaleY(.9)}50%{transform:scaleY(1.1)}}
/* 摆动角弧线虚线流动，暗示旋转方向 */
body[data-topic="lever"] .lv-angle{animation:lv-angle 3s linear infinite}
@keyframes lv-angle{to{stroke-dashoffset:-20}}

@media (prefers-reduced-motion:reduce){
  body[data-topic="lever"] .lv-swing,
  body[data-topic="lever"] .lv-pulse-f,
  body[data-topic="lever"] .lv-pulse-w,
  body[data-topic="lever"] .lv-angle{animation:none}
}