/* assets/css/physics/basic-mechanics/friction-static-friction-vs-kinetic-friction.css — 本页专属样式（en/zh 共用） */
/* ============ 静摩擦 vs 动摩擦 · Static vs kinetic friction ============ */
/* 页面专属类统一 fr- 前缀；基础骨架与 .part/.body/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="friction"] 作用域限定，避免与其它页互扰。 */
body[data-topic="friction"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="friction"] .part .body2{stroke:#60a5fa;stroke-width:1.2}
body[data-topic="friction"] .tag-sm{fill:#5b6472}

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

/* 各部件区分色（作用域限定 · 均落在中灰蓝值域内，禁近白） */
body[data-topic="friction"] .part[data-id="part-static-block"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="friction"] .part[data-id="part-static-block"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="friction"] .part[data-id="part-static-block"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="friction"] .part[data-id="part-kinetic-block"]:not(.is-active) .body{fill:#c9d6e8}
body[data-topic="friction"] .part[data-id="part-kinetic-block"]:not(.is-active) .body2{fill:#e0e9f5}
body[data-topic="friction"] .part[data-id="part-kinetic-block"]:not(.is-active) .body3{fill:#b2c1d5}
body[data-topic="friction"] .part[data-id="part-static-surface"]:not(.is-active) .body{fill:#bccbe0}
body[data-topic="friction"] .part[data-id="part-static-surface"]:not(.is-active) .body2{fill:#d9e4f3}
body[data-topic="friction"] .part[data-id="part-kinetic-surface"]:not(.is-active) .body{fill:#bccbe0}
body[data-topic="friction"] .part[data-id="part-kinetic-surface"]:not(.is-active) .body2{fill:#d9e4f3}

/* 力箭头（统一 marker · 主题蓝，饱和色不受近白限制） */
body[data-topic="friction"] .fr-force{fill:none;stroke:#1d4ed8;stroke-width:4;stroke-linecap:round}
body[data-topic="friction"] .part.is-active .fr-force{stroke:#1d4ed8;stroke-width:4.8}

/* 接触面粗糙纹理 */
body[data-topic="friction"] .fr-rough{fill:none;stroke:#93a3b8;stroke-width:2;stroke-linecap:round}

/* 面板标题 / 分隔 / 文字注记 */
body[data-topic="friction"] .fr-title{fill:#16202c;font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.08em}
body[data-topic="friction"] .fr-panel{fill:#1e40af;font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.06em}
body[data-topic="friction"] .fr-panel-card{fill:#eef2f7;fill-opacity:.55;stroke:#dde4ee;stroke-width:1.4}
body[data-topic="friction"] .fr-divider{stroke:#c3ccd9;stroke-width:2;stroke-dasharray:9 7;fill:none}
body[data-topic="friction"] .fr-note{fill:#5b6472;font-family:var(--sans);font-size:12.5px}

/* ============ 动画（纯 CSS · 打开即运行） ============ */
/* 左（静摩擦）：推力与静摩擦力同步增大到最大静摩擦再回缩，滑块始终不动 → 两箭头等长 */
body[data-topic="friction"] .fr-reveal-r{transform-box:fill-box;transform-origin:left center;
  animation:fr-reveal 4s ease-in-out infinite;animation-play-state:paused}
body[data-topic="friction"] .fr-reveal-l{transform-box:fill-box;transform-origin:right center;
  animation:fr-reveal 4s ease-in-out infinite;animation-play-state:paused}
body[data-topic="friction"] .is-running .fr-reveal-r,
body[data-topic="friction"] .is-running .fr-reveal-l{animation-play-state:running}
@keyframes fr-reveal{0%,100%{transform:scaleX(.5)}42%,58%{transform:scaleX(1)}}

/* 右（动摩擦）：推力大于动摩擦力，滑块持续向右加速滑行（循环） */
body[data-topic="friction"] .fr-slide{animation:fr-slide 3.6s ease-in-out infinite;animation-play-state:paused}
body[data-topic="friction"] .is-running .fr-slide{animation-play-state:running}
@keyframes fr-slide{0%,10%{transform:translateX(0)}72%,100%{transform:translateX(70px)}}

@media (prefers-reduced-motion:reduce){
  body[data-topic="friction"] .fr-reveal-r,
  body[data-topic="friction"] .fr-reveal-l,
  body[data-topic="friction"] .fr-slide{animation:none}
}