/* /assets/css/machines/automotive/how-a-variable-valve-timing-phaser-works-cutaway.css - 本页专属样式（en/zh 共用） */
/* ==== 内联本页样式：原 /assets/css/machines/automotive/how-a-variable-valve-timing-phaser-works-cutaway.css ==== */
/* 共享零件本体/区分色类（与机器类目共用语义） */
.part .body{fill:#c2d1e4;stroke:#8ea0b5;stroke-width:1.6}
.part .body2{fill:#dde7f4;stroke:#a9b7c9;stroke-width:1.2}
.part .body3{fill:#aab9cd;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))}

/* ============ 可变气门正时相位器剖面图 · VVT phaser cutaway ============
   本图专属类统一 vvt-* 前缀；共享类（.part/.body/.body2/.body3/.accent/.tag/
   .tag-sm/.is-running/@keyframes）沿用，不重定义。
   零件区分色与动画用 body[data-topic="vvt-phaser"] 作用域限定，避免与其它页互扰。 */

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

/* 各部件区分色（作用域限定 · per-part distinct fills，均在中灰蓝值域内） */
body[data-topic="vvt-phaser"] .part[data-id="part-timing-chain-sprocket"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="vvt-phaser"] .part[data-id="part-timing-chain-sprocket"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="vvt-phaser"] .part[data-id="part-stator-housing"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="vvt-phaser"] .part[data-id="part-stator-housing"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="vvt-phaser"] .part[data-id="part-stator-housing"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="vvt-phaser"] .part[data-id="part-rotor"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="vvt-phaser"] .part[data-id="part-rotor"]:not(.is-active) .body2{fill:#dce7f3}
body[data-topic="vvt-phaser"] .part[data-id="part-vane"]:not(.is-active) .body{fill:#ccd8e8}
body[data-topic="vvt-phaser"] .part[data-id="part-vane"]:not(.is-active) .body3{fill:#b3c2d6}
body[data-topic="vvt-phaser"] .part[data-id="part-camshaft"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="vvt-phaser"] .part[data-id="part-camshaft"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="vvt-phaser"] .part[data-id="part-camshaft"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="vvt-phaser"] .part[data-id="part-oil-control-valve"]:not(.is-active) .body{fill:#c4d1e3}
body[data-topic="vvt-phaser"] .part[data-id="part-oil-control-valve"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="vvt-phaser"] .part[data-id="part-oil-control-valve"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="vvt-phaser"] .part[data-id="part-shell-housing"]:not(.is-active) .body{fill:#dfe6ef;stroke:#9aa6b8}

/* 流体油腔（材质专属饱和色，不受中灰蓝值域限制） */
.vvt-oil{stroke-width:1.4;transition:fill .3s,stroke .3s}
.vvt-oil--adv{fill:#f0a53a;stroke:#c47f10}
.vvt-oil--ret{fill:#6fa8dc;stroke:#3b7fd4}
body[data-topic="vvt-phaser"] .part.is-active .vvt-oil--adv{fill:#fbbf24;stroke:#b45309;stroke-width:2}
body[data-topic="vvt-phaser"] .part.is-active .vvt-oil--ret{fill:#7db6ea;stroke:#1d4ed8;stroke-width:2}

/* 链轮齿与链条：厚虚线描边模拟齿/链节 */
.vvt-teeth{fill:none;stroke:#7f93ab;stroke-width:12;stroke-dasharray:9 9.7;stroke-linecap:butt}
.vvt-chain{fill:none;stroke:#9aa6b8;stroke-width:8;stroke-dasharray:16 10;stroke-linecap:round}
body[data-topic="vvt-phaser"] .part.is-active .vvt-teeth{stroke:#1d4ed8}
body[data-topic="vvt-phaser"] .part.is-active .vvt-chain{stroke:#3b82f6}

/* 油道虚线流动（材质色 + 箭头） */
.vvt-flow{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 8}

/* ============ 动画 ============ */
/* 转子 + 叶片 + 凸轮轴：相对定子做相位提前/延迟偏转（±7°，8s 循环） */
.vvt-rotate{transform-box:view-box;transform-origin:600px 330px;
  animation:vvt-phase 8s ease-in-out infinite;animation-play-state:paused}
.is-running .vvt-rotate{animation-play-state:running}
@keyframes vvt-phase{0%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}100%{transform:rotate(-7deg)}}

/* 机油控制阀阀芯：左右滑动切换油路（与相位同步） */
.vvt-spool{transform-box:fill-box;transform-origin:center;
  animation:vvt-spool 8s ease-in-out infinite;animation-play-state:paused}
.is-running .vvt-spool{animation-play-state:running}
@keyframes vvt-spool{0%{transform:translateX(-24px)}50%{transform:translateX(24px)}100%{transform:translateX(-24px)}}

/* 正时链条：持续滚动 */
.vvt-chain-run{animation:vvt-chain 3s linear infinite;animation-play-state:paused}
.is-running .vvt-chain-run{animation-play-state:running}
@keyframes vvt-chain{to{stroke-dashoffset:-52}}

/* 油道内机油流动（虚线位移） */
.vvt-flow{animation:vvt-dash 1.1s linear infinite;animation-play-state:paused}
.is-running .vvt-flow{animation-play-state:running}
@keyframes vvt-dash{to{stroke-dashoffset:-18}}

/* 提前/延迟油道交替送油：前半程提前油道亮、后半程延迟油道亮 */
.vvt-adv-flow{animation:vvt-adv 8s ease-in-out infinite;animation-play-state:paused}
.is-running .vvt-adv-flow{animation-play-state:running}
@keyframes vvt-adv{0%,42%{opacity:1}50%,92%{opacity:.15}100%{opacity:1}}
.vvt-ret-flow{animation:vvt-ret 8s ease-in-out infinite;animation-play-state:paused}
.is-running .vvt-ret-flow{animation-play-state:running}
@keyframes vvt-ret{0%,42%{opacity:.15}50%,92%{opacity:1}100%{opacity:.15}}