/* /assets/css/machines/automotive/disc-brake-vs-drum-brake.css - 本页专属样式（en/zh 共用） */
/* ==== 内联本页样式：原 /assets/css/machines/automotive/disc-brake-vs-drum-brake.css ==== */
/* 共享零件本体/区分色类（与机器类目共用语义） */
.part .body{fill:var(--metal);stroke:#8ea0b5;stroke-width:1.6}
.part .body2{fill:var(--metal-2);stroke:#a9b7c9;stroke-width:1.2}
.part .body3{fill:#c6d0dd;stroke:none}
.part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
.part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
.part.is-active .body3{fill:#1d4ed8}
.part.is-active .accent{stroke:#1d4ed8}
.part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

/* ============ 盘式制动 vs 鼓式制动 · Disc brake vs drum brake ============
   本图专属类统一 dvd-* 前缀；共享类（.part/.body/.body2/.body3/.accent/.tag/.tag-sm/
   .is-running/@keyframes）沿用，不重定义。
   零件区分色与动画用 body[data-topic="disc-vs-drum"] 作用域限定，避免与其它页互扰。 */

/* 主题蓝体系：零件描边 / 小字对比度修正（页面作用域） */
body[data-topic="disc-vs-drum"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="disc-vs-drum"] .part .body2{stroke:#60a5fa}
body[data-topic="disc-vs-drum"] .tag-sm{fill:#5b6472}

/* 各部件区分色（作用域限定 · per-part distinct fills，均在中灰蓝值域内） */
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-rotor"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-rotor"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-rotor"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-caliper"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-caliper"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-pad"]:not(.is-active) .body{fill:#aab9cd}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-pad"]:not(.is-active) .body2{fill:#d5e1f1}
body[data-topic="disc-vs-drum"] .part[data-id="part-disc-piston"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="disc-vs-drum"] .part[data-id="part-drum"]:not(.is-active) .body{fill:#c4d1e3}
body[data-topic="disc-vs-drum"] .part[data-id="part-drum"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="disc-vs-drum"] .part[data-id="part-wheel-cylinder"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="disc-vs-drum"] .part[data-id="part-wheel-cylinder"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="disc-vs-drum"] .part[data-id="part-shell-housing"] .body{fill:none;stroke:#9aa6b8;stroke-width:2}

/* 制动蹄（厚描边弧）/ 回位弹簧（折线）：stroke 角色，随高亮换色 */
.dvd-shoe{fill:none;stroke:#8ea0b5;stroke-width:16;stroke-linecap:round}
body[data-topic="disc-vs-drum"] .part.is-active .dvd-shoe{stroke:#1d4ed8;stroke-width:18}
.dvd-spring-line{fill:none;stroke:#8ea0b5;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
body[data-topic="disc-vs-drum"] .part.is-active .dvd-spring-line{stroke:#1d4ed8}

/* ============ 动画 ============ */
/* 盘式：制动盘（边缘视角）表面刻线向上滚动 = 随轮旋转 */
.dvd-rotor-spin{animation:dvd-rotor-spin 2.6s linear infinite;animation-play-state:paused}
.is-running .dvd-rotor-spin{animation-play-state:running}
@keyframes dvd-rotor-spin{to{transform:translateY(-40px)}}

/* 盘式：卡钳活塞推制动片夹向制动盘（左片右移 / 右片左移） */
.dvd-clamp-l{animation:dvd-clamp-l 1.5s ease-in-out infinite alternate;animation-play-state:paused}
.is-running .dvd-clamp-l{animation-play-state:running}
@keyframes dvd-clamp-l{from{transform:translateX(0)}to{transform:translateX(7px)}}
.dvd-clamp-r{animation:dvd-clamp-r 1.5s ease-in-out infinite alternate;animation-play-state:paused}
.is-running .dvd-clamp-r{animation-play-state:running}
@keyframes dvd-clamp-r{from{transform:translateX(0)}to{transform:translateX(-7px)}}

/* 鼓式：制动轮缸顶开制动蹄贴鼓内壁（左蹄左移 / 右蹄右移） */
.dvd-press-l{animation:dvd-press-l 1.7s ease-in-out infinite alternate;animation-play-state:paused}
.is-running .dvd-press-l{animation-play-state:running}
@keyframes dvd-press-l{from{transform:translateX(0)}to{transform:translateX(-13px)}}
.dvd-press-r{animation:dvd-press-r 1.7s ease-in-out infinite alternate;animation-play-state:paused}
.is-running .dvd-press-r{animation-play-state:running}
@keyframes dvd-press-r{from{transform:translateX(0)}to{transform:translateX(13px)}}

/* 鼓式：回位弹簧随蹄片张开被拉伸 */
.dvd-spring-stretch{transform-box:view-box;transform-origin:900px 480px;animation:dvd-spring-stretch 1.7s ease-in-out infinite alternate;animation-play-state:paused}
.is-running .dvd-spring-stretch{animation-play-state:running}
@keyframes dvd-spring-stretch{from{transform:scaleX(1)}to{transform:scaleX(1.09)}}