/* /assets/machines/automotive/how-a-car-automatic-transmission-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))}

/* 共享标签文字类（小字文字色 ≥4.5:1） */
.tag{fill:#475569;font-family:var(--mono);font-size:13px;letter-spacing:.02em;transition:fill .3s;pointer-events:none}
.part.is-active .tag{fill:var(--accent-2)}
.tag-sm{font-size:10.5px;fill:#5b6472}
.part.is-active .tag-sm{fill:var(--accent)}

/* 管道流动（共享类） */
.pipe-case{fill:none;stroke:#94a3b8;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.pipe-flow{
  fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:10 16;opacity:0;transition:opacity .4s;
}
.pipe-flow.hot{stroke:#ea580c}
.pipe-flow.cold{stroke:#2563eb}
.is-running .pipe-flow{opacity:.95;animation:flow 1.15s linear infinite}
.is-running .pipe-flow.hot{animation-duration:.9s}
@keyframes flow{to{stroke-dashoffset:-26}}

/* 无障碍：小字文字色 ≥4.5:1 */
body[data-topic="automatic-transmission"] .tag-sm{fill:#5b6472}

/* 各部件区分色（作用域限定） */
body[data-topic="automatic-transmission"] .part[data-id="part-torque-converter"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="automatic-transmission"] .part[data-id="part-torque-converter"]:not(.is-active) .body2{fill:#e0eaf5}
body[data-topic="automatic-transmission"] .part[data-id="part-oil-pump"]:not(.is-active) .body{fill:#b9c9de}
body[data-topic="automatic-transmission"] .part[data-id="part-oil-pump"]:not(.is-active) .body2{fill:#d5e1f1}
body[data-topic="automatic-transmission"] .part[data-id="part-planetary-gearset"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="automatic-transmission"] .part[data-id="part-planetary-gearset"]:not(.is-active) .body2{fill:#d9e4f2}
body[data-topic="automatic-transmission"] .part[data-id="part-clutch-pack"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="automatic-transmission"] .part[data-id="part-clutch-pack"]:not(.is-active) .body2{fill:#e6eef8}
body[data-topic="automatic-transmission"] .part[data-id="part-valve-body"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="automatic-transmission"] .part[data-id="part-valve-body"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="automatic-transmission"] .part[data-id="part-solenoid"]:not(.is-active) .body{fill:#c9d5e6}
body[data-topic="automatic-transmission"] .part[data-id="part-solenoid"]:not(.is-active) .body2{fill:#e3ecf6}
body[data-topic="automatic-transmission"] .part[data-id="part-output-shaft"]:not(.is-active) .body{fill:#c3d0e1}
body[data-topic="automatic-transmission"] .part[data-id="part-output-shaft"]:not(.is-active) .body2{fill:#dce7f3}

/* 壳体外壳（浅灰 · 默认半透明） */
body[data-topic="automatic-transmission"] .part.shell-layer{opacity:.85}
body[data-topic="automatic-transmission"] .part.shell-layer .body{fill:#e5e9ef;stroke:#b6c0cd;stroke-width:1.6}

/* ATF 油路液体（红色 · 虚线段流动） */
.at-flow{
  fill:none;stroke:#dc2626;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:10 16;opacity:0;transition:opacity .4s;
}
.is-running .at-flow{opacity:.95;animation:flow 1s linear infinite}
.at-flow-circ{fill:none;stroke:#dc2626;stroke-width:5;stroke-dasharray:8 14;opacity:0;transition:opacity .4s}
.is-running .at-flow-circ{opacity:.85;animation:flow 1.4s linear infinite}
.at-fluid-surface{fill:none;stroke:#dc2626;stroke-width:3;opacity:.8}

/* 传动轴 / 花键 / 阀体油道 */
.at-shaft-core{stroke:#5b6a7d;stroke-width:9;stroke-linecap:round}
.at-shaft-spline{stroke:#7c8aa0;stroke-width:2;stroke-dasharray:8 10;fill:none}
.is-running .at-shaft-spline{animation:flow 1.2s linear infinite}
.at-gallery{fill:none;stroke:#8ea0b5;stroke-width:2}
.at-gallery path{fill:none}

/* 旋转：液力变矩器叶轮 / 涡轮 · 油泵 · 行星齿轮 */
.at-impeller{transform-origin:205px 380px;animation:at-spin 2.4s linear infinite}
.at-turbine{transform-origin:205px 380px;animation:at-spin 1.9s linear infinite reverse}
.at-pump-rotor{transform-origin:352px 380px;animation:at-spin 1.1s linear infinite}
.at-pump-rotor2{transform-origin:368px 380px;animation:at-spin 1.1s linear infinite reverse}
.at-sun{transform-origin:680px 380px;animation:at-spin 2.2s linear infinite}
.at-planet-a{transform-origin:680px 304px;animation:at-spin 1.3s linear infinite reverse}
.at-planet-b{transform-origin:614px 342px;animation:at-spin 1.3s linear infinite reverse}
.at-planet-c{transform-origin:746px 342px;animation:at-spin 1.3s linear infinite reverse}
.at-impeller,.at-turbine,.at-pump-rotor,.at-pump-rotor2,.at-sun,.at-planet-a,.at-planet-b,.at-planet-c{transform-box:view-box;animation-play-state:paused}
.is-running .at-impeller,.is-running .at-turbine,.is-running .at-pump-rotor,.is-running .at-pump-rotor2,.is-running .at-sun,.is-running .at-planet-a,.is-running .at-planet-b,.is-running .at-planet-c{animation-play-state:running}
@keyframes at-spin{to{transform:rotate(360deg)}}

/* 离合器压盘 / 制动带 / 阀芯 / 电磁阀衔铁 */
.at-clutch{animation:at-clutch 1.8s ease-in-out infinite;animation-play-state:paused}
.is-running .at-clutch{animation-play-state:running}
@keyframes at-clutch{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}

.at-band{fill:none;stroke:#2563eb;stroke-width:9;stroke-linecap:round;opacity:.85}
.is-running .at-band{animation:at-band 2.6s ease-in-out infinite}
@keyframes at-band{0%,100%{stroke-width:9;opacity:.7}50%{stroke-width:15;opacity:1}}

.at-spool{animation:at-spool 1.8s ease-in-out infinite;animation-play-state:paused}
.is-running .at-spool{animation-play-state:running}
@keyframes at-spool{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
.at-spool2{animation-delay:.5s}
.at-spool3{animation-delay:1s}

.at-armature{animation:at-armature 1.2s ease-in-out infinite;animation-play-state:paused}
.is-running .at-armature{animation-play-state:running}
@keyframes at-armature{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}