/* /assets/css/machines/automotive/how-a-fuel-injector-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))}

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

/* 各部件区分色（作用域限定 · per-part distinct fills，均落在 §4.9 值域内） */
body[data-topic="fuel-injector"] .part[data-id="part-fuel-rail"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="fuel-injector"] .part[data-id="part-fuel-rail"]:not(.is-active) .body2{fill:#e6eef8}
body[data-topic="fuel-injector"] .part[data-id="part-injector-body"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="fuel-injector"] .part[data-id="part-injector-body"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="fuel-injector"] .part[data-id="part-solenoid-coil"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="fuel-injector"] .part[data-id="part-solenoid-coil"]:not(.is-active) .body2{fill:#d5e1f1}
body[data-topic="fuel-injector"] .part[data-id="part-plunger"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="fuel-injector"] .part[data-id="part-plunger"]:not(.is-active) .body2{fill:#e0eaf5}
body[data-topic="fuel-injector"] .part[data-id="part-needle"]:not(.is-active) .body{fill:#cad6e6}
body[data-topic="fuel-injector"] .part[data-id="part-needle"]:not(.is-active) .body2{fill:#e4edf7}
body[data-topic="fuel-injector"] .part[data-id="part-seat"]:not(.is-active) .body{fill:#c9d5e6}
body[data-topic="fuel-injector"] .part[data-id="part-seat"]:not(.is-active) .body2{fill:#e3ecf6}
body[data-topic="fuel-injector"] .part[data-id="part-nozzle-tip"]:not(.is-active) .body{fill:#becfe3}
body[data-topic="fuel-injector"] .part[data-id="part-nozzle-tip"]:not(.is-active) .body2{fill:#dce7f3}
body[data-topic="fuel-injector"] .part[data-id="part-ecu-pulse"]:not(.is-active) .body{fill:#c5d2e4}
body[data-topic="fuel-injector"] .part[data-id="part-ecu-pulse"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="fuel-injector"] .part[data-id="part-shell-housing"]:not(.is-active) .body{fill:#dfe6ef;stroke:#9aa6b8}

/* 燃油材质（本图专属饱和暖色，不受 §4.9 未高亮限制） */
.fi-rail-fuel{fill:#f6c453;stroke:none;opacity:.9}
.fi-fuel-flow{fill:none;stroke:#e0a52a;stroke-width:3;stroke-dasharray:9 11;stroke-linecap:round;opacity:.85}
.part .fi-spray{fill:url(#fi-spray-grad);stroke:none}
.fi-drop{fill:#f0b429;stroke:none}
.fi-wire{fill:none;stroke:#5b6472;stroke-width:2;stroke-dasharray:6 7;opacity:.85}
.fi-pulse-line{fill:none;stroke:#2563eb;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}

/* ============ 动画 ============ */
/* ECU 脉冲指示 */
.fi-pulse-dot{transform-box:view-box;animation:fi-pulse 2s steps(1,end) infinite;animation-play-state:paused}
.is-running .fi-pulse-dot{animation-play-state:running}
@keyframes fi-pulse{0%,4%{opacity:.25}6%,46%{opacity:1}52%,100%{opacity:.25}}

/* 线圈通电发光 */
.fi-coil-glow{opacity:0;animation:fi-glow 2s ease-in-out infinite;animation-play-state:paused}
.is-running .fi-coil-glow{animation-play-state:running}
@keyframes fi-glow{0%,4%{opacity:0}14%,48%{opacity:.6}60%,100%{opacity:0}}

/* 柱塞（衔铁）抬升 / 落座 */
.fi-plunger{transform-box:view-box;animation:fi-lift 2s ease-in-out infinite;animation-play-state:paused}
.is-running .fi-plunger{animation-play-state:running}
@keyframes fi-lift{0%,4%{transform:translateY(0)}16%,52%{transform:translateY(-16px)}64%,100%{transform:translateY(0)}}

/* 针阀开启 / 关闭（与柱塞同步） */
.fi-needle{transform-box:view-box;animation:fi-lift 2s ease-in-out infinite;animation-play-state:paused}
.is-running .fi-needle{animation-play-state:running}

/* 锥形油雾脉冲喷出 */
.fi-spray-g{transform-box:view-box;transform-origin:560px 592px;animation:fi-spray 2s ease-in-out infinite;animation-play-state:paused}
.is-running .fi-spray-g{animation-play-state:running}
@keyframes fi-spray{0%,6%{opacity:0;transform:scaleY(.35)}18%,50%{opacity:.95;transform:scaleY(1)}62%,100%{opacity:0;transform:scaleY(.35)}}

/* 油雾液滴下落 */
.fi-drop{animation:fi-drop 2s linear infinite;animation-play-state:paused;opacity:0}
.is-running .fi-drop{animation-play-state:running}
@keyframes fi-drop{0%,8%{opacity:0;transform:translateY(0)}22%{opacity:.9}50%{opacity:.7;transform:translateY(70px)}60%,100%{opacity:0;transform:translateY(90px)}}

/* 燃油在导轨/本体内流动 */
.is-running .fi-fuel-flow{animation:fi-flow 1.4s linear infinite}
@keyframes fi-flow{to{stroke-dashoffset:-40}}

/* ECU 线束脉冲信号 */
.is-running .fi-wire{animation:fi-flow 1s linear infinite}