/* /assets/css/machines/industrial-mech/how-pneumatic-circuit-works-cutaway.css — 本页专属样式（en/zh 共用） */

/* ============ 机器类目基线（part bodies & distinct fills） ============ */
.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:#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))}

/* ============ 管道流动（flow） ============ */
.pipe-case{fill:none;stroke:#94a3b8;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.pipe-flow{fill:none;stroke:#38bdf8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:10 16;opacity:0;transition:opacity .4s}
.pipe-flow.exh{stroke:#5b6a7d}
.is-running .pipe-flow{opacity:.95;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-26}}

/* ============ 本页专属材质 / 动画 ============ */
.part .air{fill:#7cc7ef;fill-opacity:.55;stroke:#0284c7;stroke-width:1.2}
.part.is-active .air{fill:#38bdf8;fill-opacity:.8}

.fan{transform-box:view-box;transform-origin:120px 510px;animation:spin 1.1s linear infinite;animation-play-state:paused}
.is-running .fan{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

.ram-move{animation:ram 5s ease-in-out infinite;animation-play-state:paused}
.is-running .ram-move{animation-play-state:running}
@keyframes ram{0%,100%{transform:translateX(0)}50%{transform:translateX(52px)}}

.spool{transform-box:view-box;transform-origin:700px 380px;animation:spoolshift 5s ease-in-out infinite;animation-play-state:paused}
.is-running .spool{animation-play-state:running}
@keyframes spoolshift{0%,45%,100%{transform:translateX(0)}55%,95%{transform:translateX(26px)}}

.puff{opacity:0}
.is-running .puff{animation:puff 1.8s ease-out infinite}
.is-running .puff.d2{animation-delay:.6s}
.is-running .puff.d3{animation-delay:1.2s}
@keyframes puff{0%{opacity:0;transform:translateY(0)}30%{opacity:.7}100%{opacity:0;transform:translateY(-26px)}}

/* ============ 各部件区分色（:not(.is-active) 保证全局高亮仍生效） ============ */
body[data-topic="pneumatic-circuit"] .part[data-id="part-compressor"]:not(.is-active) .body{fill:#bcc9db}
body[data-topic="pneumatic-circuit"] .part[data-id="part-compressor"]:not(.is-active) .body2{fill:#dae4f0}
body[data-topic="pneumatic-circuit"] .part[data-id="part-receiver"]:not(.is-active) .body{fill:#bfe0f5}
body[data-topic="pneumatic-circuit"] .part[data-id="part-frl"]:not(.is-active) .body{fill:#c8c1e5}
body[data-topic="pneumatic-circuit"] .part[data-id="part-frl"]:not(.is-active) .body2{fill:#e2ddf3}
body[data-topic="pneumatic-circuit"] .part[data-id="part-solenoid"]:not(.is-active) .body{fill:#bcc9db}
body[data-topic="pneumatic-circuit"] .part[data-id="part-solenoid"]:not(.is-active) .body2{fill:#dae4f0}
body[data-topic="pneumatic-circuit"] .part[data-id="part-cylinder"]:not(.is-active) .body{fill:#b7c9dd}
body[data-topic="pneumatic-circuit"] .part[data-id="part-piston"]:not(.is-active) .body{fill:#a9bccf}
body[data-topic="pneumatic-circuit"] .part[data-id="part-muffler"]:not(.is-active) .body{fill:#c6cfda}
body[data-topic="pneumatic-circuit"] .part[data-id="part-gauge"]:not(.is-active) .body{fill:#c6cfda}
body[data-topic="pneumatic-circuit"] .part[data-id="part-shell-cover"]:not(.is-active) .body{fill:#cbd7e7}