/* /assets/css/machines/fluid-pump-valve/how-a-pressure-relief-valve-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-flow{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:10 16;opacity:0;transition:opacity .4s}
.pipe-flow.hot{stroke:#ea580c}
.is-running .pipe-flow{opacity:.95;animation:flow 1.15s linear infinite}
@keyframes flow{to{stroke-dashoffset:-26}}

/* ============ 弹簧（spring） ============ */
.coil{fill:none;stroke:#94a3b8;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .coil{stroke:var(--accent-2)}

/* ============ 阀瓣与弹簧运动（motion） ============ */
.prv-disc{transform-box:view-box;animation:prv-disc 3s ease-in-out infinite;animation-play-state:paused}
.prv-coil{transform-box:view-box;transform-origin:600px 282px;animation:prv-spring 3s ease-in-out infinite;animation-play-state:paused}
.is-running .prv-disc,.is-running .prv-coil{animation-play-state:running}
@keyframes prv-disc{0%,35%{transform:translateY(0)} 45%,65%{transform:translateY(-34px)} 75%,100%{transform:translateY(0)}}
@keyframes prv-spring{0%,35%{transform:scaleY(1)} 45%,65%{transform:scaleY(.69)} 75%,100%{transform:scaleY(1)}}

/* 泄流开合（vent only while the disc is lifted） */
.is-running .out-flow{animation:flow 1.15s linear infinite,out-gate 3s step-end infinite}
@keyframes out-gate{0%,35%{opacity:0} 45%,65%{opacity:.95} 75%,100%{opacity:0}}

/* ============ 各部件区分色 ============ */
body[data-topic="pressure-relief-valve"] .part[data-id="part-inlet"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="pressure-relief-valve"] .part[data-id="part-inlet"]:not(.is-active) .body2{fill:#d6e9fb}
body[data-topic="pressure-relief-valve"] .part[data-id="part-outlet"]:not(.is-active) .body{fill:#bfe0f5}
body[data-topic="pressure-relief-valve"] .part[data-id="part-outlet"]:not(.is-active) .body2{fill:#e0f1fc}
body[data-topic="pressure-relief-valve"] .part[data-id="part-seat"]:not(.is-active) .body2{fill:#aab9cd}
body[data-topic="pressure-relief-valve"] .part[data-id="part-disc"]:not(.is-active) .body{fill:#d3b184}
body[data-topic="pressure-relief-valve"] .part[data-id="part-bonnet"]:not(.is-active) .body2{fill:#c6cfda}

@media (prefers-reduced-motion:reduce){
  .prv-disc,.prv-coil{animation:none !important}
  .prv-disc{transform:translateY(-34px)}
  .prv-coil{transform:scaleY(.69)}
}