/* /assets/css/machines/home-equipment/how-a-thermostatic-radiator-valve-works-cutaway.css — 本页专属样式（en/zh 共用） */

/* ===== 图形基础 ===== */
body[data-topic="thermostatic-radiator-valve"] .svg-title{fill:#16202c;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
           font-size:17px;font-weight:600;letter-spacing:.08em;text-anchor:middle;}
body[data-topic="thermostatic-radiator-valve"] .tag   {fill:#334155;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:14px;}
body[data-topic="thermostatic-radiator-valve"] .tag-sm{fill:#5b6472;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:12px;}
body[data-topic="thermostatic-radiator-valve"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

/* ===== 感温包内蜡膨胀/收缩 ===== */
body[data-topic="thermostatic-radiator-valve"] #wax{
  transform-origin:380px 178px;
  animation:waxExpand 8s ease-in-out infinite;
}
@keyframes waxExpand{
  0%, 30%   { transform: scale(0.6, 0.55); }
  45%, 80%  { transform: scale(1.15, 1.35); }
  95%, 100% { transform: scale(0.6, 0.55); }
}

/* ===== 阀杆与阀芯移动 ===== */
body[data-topic="thermostatic-radiator-valve"] #stem-plug{
  animation:stemMove 8s ease-in-out infinite;
}
@keyframes stemMove{
  0%, 30%   { transform: translateY(-10px); }
  45%, 80%  { transform: translateY(10px); }
  95%, 100% { transform: translateY(-10px); }
}

/* ===== 弹簧压缩/伸展 ===== */
body[data-topic="thermostatic-radiator-valve"] #spring{
  animation:springMove 8s ease-in-out infinite;
}
@keyframes springMove{
  0%, 30%   { transform: translateY(-10px); }
  45%, 80%  { transform: translateY(10px); }
  95%, 100% { transform: translateY(-10px); }
}

/* ===== 水流虚线流动 ===== */
body[data-topic="thermostatic-radiator-valve"] .hot-flow{
  fill:none; stroke:#ef4444; stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:10 10;
  animation: flowMove 1s linear infinite, flowFade 8s ease-in-out infinite;
}
@keyframes flowMove { to { stroke-dashoffset:-20; } }
@keyframes flowFade {
  0%, 30%   { opacity:1; }
  45%, 80%  { opacity:0.12; }
  95%, 100% { opacity:1; }
}

/* ===== 散热器内水流 ===== */
body[data-topic="thermostatic-radiator-valve"] .rad-hot-flow{
  fill:none; stroke:#ef4444; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:8 8;
  animation: flowMove 1.2s linear infinite, radFade 8s ease-in-out infinite;
}
@keyframes radFade {
  0%, 30%   { opacity:0.9; }
  45%, 80%  { opacity:0.1; }
  95%, 100% { opacity:0.9; }
}

/* ===== 回水 ===== */
body[data-topic="thermostatic-radiator-valve"] .rad-cold-flow{
  fill:none; stroke:#60a5fa; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:8 8;
  animation: flowMove 1.4s linear infinite, coldFade 8s ease-in-out infinite;
}
@keyframes coldFade {
  0%, 30%   { opacity:0.9; }
  45%, 80%  { opacity:0.3; }
  95%, 100% { opacity:0.9; }
}

/* ===== 温度指示器 ===== */
body[data-topic="thermostatic-radiator-valve"] #temp-indicator{
  animation: tempGlow 8s ease-in-out infinite;
}
@keyframes tempGlow {
  0%, 30%   { opacity:0.15; }
  45%, 80%  { opacity:0.6; }
  95%, 100% { opacity:0.15; }
}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="thermostatic-radiator-valve"] #wax,
  body[data-topic="thermostatic-radiator-valve"] #stem-plug,
  body[data-topic="thermostatic-radiator-valve"] #spring,
  body[data-topic="thermostatic-radiator-valve"] .hot-flow,
  body[data-topic="thermostatic-radiator-valve"] .rad-hot-flow,
  body[data-topic="thermostatic-radiator-valve"] .rad-cold-flow,
  body[data-topic="thermostatic-radiator-valve"] #temp-indicator{
    animation:none;
  }
  body[data-topic="thermostatic-radiator-valve"] #wax { transform:scale(0.85); }
  body[data-topic="thermostatic-radiator-valve"] #stem-plug { transform:translateY(0); }
  body[data-topic="thermostatic-radiator-valve"] #spring { transform:translateY(0); }
  body[data-topic="thermostatic-radiator-valve"] .hot-flow,
  body[data-topic="thermostatic-radiator-valve"] .rad-hot-flow,
  body[data-topic="thermostatic-radiator-valve"] .rad-cold-flow { opacity:0.5; }
  body[data-topic="thermostatic-radiator-valve"] #temp-indicator { opacity:0.3; }
}