/* /assets/machines/fluid-pump-valve/how-a-solenoid-valve-works.css — 本页专属样式（en/zh 共用） */
/* ============ 特殊材质（Solid-fill internals） ============ */
.part .water{fill:#6fa8dc;fill-opacity:.6;stroke:#2563eb;stroke-width:1.2}
.part.is-active .water{fill:#2563eb;fill-opacity:.75}
.part .ceramic{fill:#f1f4f8;stroke:#9aa6b8;stroke-width:2}
.part.is-active .ceramic{fill:#ffffff;stroke:var(--accent-2)}
.part .coffee{fill:#6f4a2f;stroke:#4b3220;stroke-width:1}
.part.is-active .coffee{fill:#8a5a38;stroke:#b0703a}
.part .crema{fill:#d9a86c}
.part.is-active .crema{fill:#e8b877}
.stream{fill:none;stroke:#6f4a2f;stroke-width:6;stroke-linecap:round;stroke-dasharray:9 9;opacity:.85}
.is-running .stream{animation:flow 1.1s linear infinite}

/* ============ 零件本体/区分色（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}
/* active highlight stays blue */
.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))}

/* ============ 动画：叶轮 / 光环（motion） ============ */
.impeller{transform-box:view-box;animation:spin 1.4s linear infinite;animation-play-state:paused}
.is-running .impeller{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

.halo{opacity:0;transition:opacity .5s}
.is-running .halo{opacity:1;animation:halo 2.2s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.35}50%{opacity:.85}}

/* ============ 管道流动（flow） ============ */
.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}}
/* ============ 电磁阀 · Solenoid valve ============ */
/* solenoid-valve · merged from source <style> */

/* ===== 图形基础 ===== */
body[data-topic="solenoid-valve"] .tag   {fill:#334155;font-size:20px;font-weight:600;text-anchor:middle;}
body[data-topic="solenoid-valve"] .tag-sm{fill:#5b6472;font-size:15px;text-anchor:middle;}
body[data-topic="solenoid-valve"] .svg-title{fill:#16202c;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
           font-size:18px;font-weight:600;letter-spacing:.08em;text-anchor:middle;}
body[data-topic="solenoid-valve"] .svg-sub{fill:#64748b;font-size:12px;text-anchor:middle;}

/* ===== 阀体（钢色外壳） ===== */
body[data-topic="solenoid-valve"] .shell    {fill:#dbe3ee;stroke:#64748b;stroke-width:2.5;stroke-linejoin:round;}
body[data-topic="solenoid-valve"] .shell-in {fill:#f1f5f9;stroke:#94a3b8;stroke-width:1.6;stroke-linejoin:round;}

/* ===== 流体管路（青色） ===== */
body[data-topic="solenoid-valve"] .pipe-out {fill:#0e7490;stroke:#155e75;stroke-width:2;stroke-linejoin:round;}
body[data-topic="solenoid-valve"] .pipe-in  {fill:#cffafe;stroke:#0891b2;stroke-width:1.8;stroke-linejoin:round;}

/* ===== 线圈（铜色绕组 + 琥珀骨架） ===== */
body[data-topic="solenoid-valve"] .coil-frame{fill:#fef3c7;stroke:#d97706;stroke-width:2;stroke-linejoin:round;}
body[data-topic="solenoid-valve"] .coil-turn{
  fill:none;stroke:#d97706;stroke-width:3.5;stroke-linecap:round;
  opacity:.55;transition:opacity .35s ease;
}
body[data-topic="solenoid-valve"] .coil-turn.on{opacity:1;stroke:#b45309;}

/* 通电发光 */
body[data-topic="solenoid-valve"] .coil-glow{
  fill:none;stroke:#fbbf24;stroke-width:16;stroke-linecap:round;
  opacity:0;
  animation:coilPulse 2.2s ease-in-out infinite;
}
@keyframes coilPulse{
  0%,100%{opacity:0}
  50%{opacity:.55}
}

/* ===== 阀芯 / 衔铁（深铁灰） ===== */
body[data-topic="solenoid-valve"] .plunger-body {fill:#475569;stroke:#1e293b;stroke-width:2;stroke-linejoin:round;}
body[data-topic="solenoid-valve"] .plunger-face {fill:#94a3b8;stroke:#475569;stroke-width:1.4;}
body[data-topic="solenoid-valve"] .plunger-tip  {fill:#ef4444;stroke:#991b1b;stroke-width:2;stroke-linejoin:round;}

body[data-topic="solenoid-valve"] .plunger{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:plungerMove 3.2s ease-in-out infinite;
}
@keyframes plungerMove{
  0%,18%  {transform:translateX(0)}
  40%,68% {transform:translateX(-26px)}
  90%,100%{transform:translateX(0)}
}

/* ===== 弹簧（银色） ===== */
body[data-topic="solenoid-valve"] .spring{
  fill:none;stroke:#94a3b8;stroke-width:3;stroke-linecap:round;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:sol-springSquash 3.2s ease-in-out infinite;
}
@keyframes sol-springSquash{
  0%,18%  {transform:scaleX(1)}
  40%,68% {transform:scaleX(.62)}
  90%,100%{transform:scaleX(1)}
}

/* ===== 阀座（深色） ===== */
body[data-topic="solenoid-valve"] .seat{fill:#334155;stroke:#0f172a;stroke-width:2;stroke-linejoin:round;}

/* ===== 流体流线（青色） ===== */
body[data-topic="solenoid-valve"] .stream{
  fill:none;stroke:#06b6d4;stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:18 14;stroke-dashoffset:0;
  animation:sv-flow 1.1s linear infinite;
}
@keyframes sv-flow{to{stroke-dashoffset:-64}}

/* 流体通断 */
body[data-topic="solenoid-valve"] .flow-gate{animation:gateFade 3.2s ease-in-out infinite;}
@keyframes gateFade{
  0%,18%  {opacity:1}
  40%,68% {opacity:0}
  90%,100%{opacity:1}
}

/* ===== 状态标签交替 ===== */
body[data-topic="solenoid-valve"] .state-on {
  fill:#10b981;
  animation:stateOn 3.2s ease-in-out infinite;
}
body[data-topic="solenoid-valve"] .state-off{
  fill:#ef4444;
  animation:stateOff 3.2s ease-in-out infinite;
}
@keyframes stateOn {0%,18%{opacity:.15} 40%,68%{opacity:1} 90%,100%{opacity:.15}}
@keyframes stateOff{0%,18%{opacity:1}   40%,68%{opacity:.15} 90%,100%{opacity:1}}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="solenoid-valve"] .stream,
  body[data-topic="solenoid-valve"] .plunger,
  body[data-topic="solenoid-valve"] .spring,
  body[data-topic="solenoid-valve"] .coil-glow,
  body[data-topic="solenoid-valve"] .flow-gate,
  body[data-topic="solenoid-valve"] .state-on,
  body[data-topic="solenoid-valve"] .state-off{animation:none;}
  body[data-topic="solenoid-valve"] .coil-turn{opacity:1;}
  body[data-topic="solenoid-valve"] .plunger{transform:translateX(-26px);}
  body[data-topic="solenoid-valve"] .spring{transform:scaleX(.62);}
  body[data-topic="solenoid-valve"] .flow-gate{opacity:0;}
  body[data-topic="solenoid-valve"] .state-on{opacity:1;}
  body[data-topic="solenoid-valve"] .state-off{opacity:.25;}
}