/* /assets/machines/automotive/how-a-car-differential-works-cutaway.css — 本页专属样式（en/zh 共用） */
/* 共享零件本体/区分色类（与机器类目共用语义） */
.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))}

/* ============ 汽车差速器剖面图 · Car differential cutaway ============
   本图专属类统一 df-* 前缀；共享类（.part/.body/.body2/.body3/.accent/.tag/.tag-sm/
   .is-running/@keyframes）沿用，不重定义。
   零件区分色与动画用 body[data-topic="car-differential"] 作用域限定，避免与其它页互扰。 */

/* 主题蓝体系：零件描边 / 小字对比度修正（页面作用域，非重定义共享规则） */
body[data-topic="car-differential"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="car-differential"] .part .body2{stroke:#60a5fa}
body[data-topic="car-differential"] .tag-sm{fill:#5b6472}

/* 各部件区分色（作用域限定 · per-part distinct fills，均在中灰蓝值域内） */
body[data-topic="car-differential"] .part[data-id="part-ring-gear"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="car-differential"] .part[data-id="part-ring-gear"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="car-differential"] .part[data-id="part-pinion"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="car-differential"] .part[data-id="part-pinion"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="car-differential"] .part[data-id="part-pinion"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="car-differential"] .part[data-id="part-carrier"]:not(.is-active) .body2{fill:#e0eaf5}
body[data-topic="car-differential"] .part[data-id="part-carrier"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="car-differential"] .part[data-id="part-side-gear"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="car-differential"] .part[data-id="part-side-gear"]:not(.is-active) .body2{fill:#dce7f3}
body[data-topic="car-differential"] .part[data-id="part-side-gear"]:not(.is-active) .body3{fill:#b3c2d6}
body[data-topic="car-differential"] .part[data-id="part-spider-gear"]:not(.is-active) .body{fill:#ccd8e8}
body[data-topic="car-differential"] .part[data-id="part-spider-gear"]:not(.is-active) .body2{fill:#e2ecf6}
body[data-topic="car-differential"] .part[data-id="part-spider-gear"]:not(.is-active) .body3{fill:#b7c6da}
body[data-topic="car-differential"] .part[data-id="part-spider-shaft"]:not(.is-active) .body2{fill:#dfe8f4}
body[data-topic="car-differential"] .part[data-id="part-spider-shaft"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="car-differential"] .part[data-id="part-axle"]:not(.is-active) .body{fill:#c4d1e3}
body[data-topic="car-differential"] .part[data-id="part-axle"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="car-differential"] .part[data-id="part-axle"]:not(.is-active) .body3{fill:#b0bfd3}
body[data-topic="car-differential"] .part[data-id="part-shell-housing"]:not(.is-active) .body{fill:#dfe6ef;stroke:#9aa6b8}

/* 齿轮齿：厚虚线描边模拟齿（随零件一起旋转） */
.df-tooth{fill:none;stroke-linecap:butt}
.df-tooth-ring{stroke:#7f93ab;stroke-width:22;stroke-dasharray:30 31.3}
.df-tooth-pinion{stroke:#7f93ab;stroke-width:14;stroke-dasharray:10.6 10.6}
.df-tooth-spider{stroke:#7f93ab;stroke-width:11;stroke-dasharray:14 14.3}
body[data-topic="car-differential"] .part.is-active .df-tooth{stroke:#1d4ed8}

/* 半轴花键（滚动花纹） */
.df-tick{stroke:#8395ab;stroke-width:3;stroke-linecap:round}
body[data-topic="car-differential"] .part.is-active .df-tick{stroke:#1d4ed8}

/* ============ 动画 ============ */
/* 齿圈 + 差速器壳 + 行星齿轮轴：随壳一起旋转（绕半轴轴线） */
.df-carrier-spin{transform-box:view-box;transform-origin:600px 400px;animation:df-carrier 7s linear infinite;animation-play-state:paused}
.is-running .df-carrier-spin{animation-play-state:running}
@keyframes df-carrier{to{transform:rotate(360deg)}}

/* 传动小齿轮：反向快速自转，与大齿圈啮合 */
.df-pinion-spin{transform-box:fill-box;transform-origin:center;animation:df-pinion 2.6s linear infinite;animation-play-state:paused}
.is-running .df-pinion-spin{animation-play-state:running}
@keyframes df-pinion{to{transform:rotate(-360deg)}}

/* 行星锥齿轮：绕自身轴自转（转弯时产生转速差） */
.df-spider-spin{transform-box:fill-box;transform-origin:center;animation:df-spider 2s linear infinite;animation-play-state:paused}
.is-running .df-spider-spin{animation-play-state:running}
@keyframes df-spider{to{transform:rotate(360deg)}}

/* 半轴花键滚动：左右轴不同转速（转弯时外轮快、内轮慢） */
.df-axle-roll-l{transform-box:view-box;animation:df-roll 1.5s linear infinite;animation-play-state:paused}
.is-running .df-axle-roll-l{animation-play-state:running}
.df-axle-roll-r{transform-box:view-box;animation:df-roll 3s linear infinite;animation-play-state:paused}
.is-running .df-axle-roll-r{animation-play-state:running}
@keyframes df-roll{to{transform:translateX(-24px)}}