/* /assets/css/machines/fluid-pump-valve/how-a-piston-positive-displacement-pump-works-cutaway.css — 本页专属样式（en/zh 共用） */

/* ============ 零件本体/区分色（part bodies & per-part 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:#c6d0dd;stroke:none}
.part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .body{fill:#cfe3fb;stroke:var(--accent)}
.part.is-active .body2{fill:#e3eefc;stroke:#60a5fa}
.part.is-active .body3{fill:var(--accent)}
.part.is-active .accent{stroke:var(--accent-2)}
.part.is-active{filter:drop-shadow(0 0 10px rgba(37,99,235,.35))}

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

/* ============ 曲柄 / 连杆 / 活塞 / 单向阀运动（motion） ============ */
.crank{animation:crank-spin 2.4s linear infinite;animation-play-state:paused}
.conrod{animation:conrod-move 2.4s linear infinite;animation-play-state:paused}
.piston{animation:piston-move 2.4s linear infinite;animation-play-state:paused}
.ball-in{transform-box:fill-box;transform-origin:center;animation:valve-in 2.4s ease-in-out infinite;animation-play-state:paused}
.ball-out{transform-box:fill-box;transform-origin:center;animation:valve-out 2.4s ease-in-out infinite;animation-play-state:paused}
.is-running .crank,.is-running .conrod,.is-running .piston,.is-running .ball-in,.is-running .ball-out{animation-play-state:running}
body[data-topic="piston-pump"] .crank{transform-box:view-box;transform-origin:120px 400px}
@keyframes crank-spin{to{transform:rotate(360deg)}}
@keyframes conrod-move{
  0%{transform:translate(0,0)} 12.5%{transform:translate(-14.6px,35.4px)} 25%{transform:translate(-50px,50px)}
  37.5%{transform:translate(-85.4px,35.4px)} 50%{transform:translate(-100px,0)} 62.5%{transform:translate(-85.4px,-35.4px)}
  75%{transform:translate(-50px,-50px)} 87.5%{transform:translate(-14.6px,-35.4px)} 100%{transform:translate(0,0)}
}
@keyframes piston-move{
  0%{transform:translateX(0)} 12.5%{transform:translateX(-14.6px)} 25%{transform:translateX(-50px)}
  37.5%{transform:translateX(-85.4px)} 50%{transform:translateX(-100px)} 62.5%{transform:translateX(-85.4px)}
  75%{transform:translateX(-50px)} 87.5%{transform:translateX(-14.6px)} 100%{transform:translateX(0)}
}
@keyframes valve-in{0%{transform:translateY(0)} 25%{transform:translateY(-26px)} 50%{transform:translateY(-26px)} 75%{transform:translateY(0)} 100%{transform:translateY(0)}}
@keyframes valve-out{0%{transform:translateY(0)} 25%{transform:translateY(0)} 50%{transform:translateY(-22px)} 75%{transform:translateY(-22px)} 100%{transform:translateY(0)}}

/* 流向开合（suction / discharge） */
.is-running .in-flow{animation:flow 1.15s linear infinite,in-gate 2.4s step-end infinite}
.is-running .out-flow{animation:flow 1.15s linear infinite,out-gate 2.4s step-end infinite}
@keyframes in-gate{0%,50%{opacity:.95} 50.01%,100%{opacity:.15}}
@keyframes out-gate{0%,50%{opacity:.15} 50.01%,100%{opacity:.95}}

/* ============ 各部件区分色 ============ */
body[data-topic="piston-pump"] .part[data-id="part-piston"]:not(.is-active) .body{fill:#b7c9dd}
body[data-topic="piston-pump"] .part[data-id="part-piston"]:not(.is-active) .body2{fill:#d8e3ef}
body[data-topic="piston-pump"] .part[data-id="part-crank"]:not(.is-active) .body{fill:#aab9cd}
body[data-topic="piston-pump"] .part[data-id="part-conrod"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="piston-pump"] .part[data-id="part-inlet"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="piston-pump"] .part[data-id="part-inlet"]:not(.is-active) .body2{fill:#d6e9fb}
body[data-topic="piston-pump"] .part[data-id="part-outlet"]:not(.is-active) .body{fill:#bfe0f5}
body[data-topic="piston-pump"] .part[data-id="part-outlet"]:not(.is-active) .body2{fill:#e0f1fc}
body[data-topic="piston-pump"] .part[data-id="part-suction-valve"] .body3{fill:#d3b184}
body[data-topic="piston-pump"] .part[data-id="part-discharge-valve"] .body3{fill:#d3b184}

@media (prefers-reduced-motion:reduce){
  .crank,.conrod,.piston,.ball-in,.ball-out{animation:none !important}
  .crank{transform:rotate(0deg)}
  .piston{transform:translateX(-50px)}
  .conrod{transform:translate(-50px,50px)}
  .ball-in{transform:translateY(-26px)}
  .ball-out{transform:translateY(0)}
}