/* /assets/css/machines/home-equipment/how-a-electric-kettle-thermal-cutout-safety-switch-works-cutaway.css — 本页专属样式（en/zh 共用） */

/* ===== 文字（对比度 ≥4.5:1） ===== */
body[data-topic="electric-kettle"] .svg-title{fill:#16202c}
body[data-topic="electric-kettle"] .tag   {fill:#334155;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:15px}
body[data-topic="electric-kettle"] .tag-sm{fill:#5b6472;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:13px}
body[data-topic="electric-kettle"] .legend{fill:#5b6472}

/* ===== 交互高亮 ===== */
body[data-topic="electric-kettle"] .part{cursor:pointer}
body[data-topic="electric-kettle"] .part.is-active{filter:drop-shadow(0 0 8px rgba(37,99,235,.65))}

/* ===== 外壳（半透明玻璃，可隐藏） ===== */
body[data-topic="electric-kettle"] .shell-layer{fill:#cbd5e1;stroke:#94a3b8;stroke-width:2}
body[data-topic="electric-kettle"] .stage[data-shell="glass"] .shell-layer{opacity:.15}

/* ===== 电流流动 ===== */
body[data-topic="electric-kettle"] .current-line{
  fill:none;stroke:#f59e0b;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:8 8;
  animation:electric-kettle-currentFlow 1s linear infinite,electric-kettle-currentVisibility 8s infinite;
}
/* 加热光晕 */
body[data-topic="electric-kettle"] .heat-glow{
  animation:electric-kettle-heatGlow 8s infinite;
}
/* 热量波浪 */
body[data-topic="electric-kettle"] .heat-wave{
  fill:none;stroke:#f97316;stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:8 8;
  animation:electric-kettle-heatWaveMove 1.2s linear infinite,electric-kettle-heatWaveFade 8s infinite;
}
/* 合金珠熔化 */
body[data-topic="electric-kettle"] #alloy{
  transform-box:fill-box;
  transform-origin:center;
  animation:electric-kettle-alloyMelt 8s infinite;
}
/* 动触点移动 */
body[data-topic="electric-kettle"] #moving-contact{
  animation:electric-kettle-contactMove 8s infinite;
}
/* 弹簧伸展 */
body[data-topic="electric-kettle"] #spring{
  transform-box:view-box;
  transform-origin:720px 265px;
  animation:electric-kettle-springExtend 8s infinite;
}
/* 状态文字切换 */
body[data-topic="electric-kettle"] #state-normal{animation:electric-kettle-stateNormal 8s infinite}
body[data-topic="electric-kettle"] #state-fault {animation:electric-kettle-stateFault 8s infinite}

@keyframes electric-kettle-currentFlow{to{stroke-dashoffset:-16}}
@keyframes electric-kettle-currentVisibility{0%,55%{opacity:1}60%,100%{opacity:0}}
@keyframes electric-kettle-heatGlow{0%{opacity:.15}25%{opacity:.5}50%{opacity:.15}55%,100%{opacity:0}}
@keyframes electric-kettle-heatWaveMove{to{stroke-dashoffset:-16}}
@keyframes electric-kettle-heatWaveFade{0%,50%{opacity:.7}55%,100%{opacity:0}}
@keyframes electric-kettle-alloyMelt{
  0%,48%{fill:#93c5fd;transform:scale(1);opacity:1}
  52%{fill:#f87171;transform:scale(1.1);opacity:1}
  56%{fill:#ef4444;transform:scale(.2);opacity:0}
  100%{fill:#ef4444;transform:scale(.2);opacity:0}
}
@keyframes electric-kettle-contactMove{0%,55%{transform:translateX(0)}60%{transform:translateX(35px)}65%,100%{transform:translateX(30px)}}
@keyframes electric-kettle-springExtend{0%,55%{transform:scaleX(1)}60%{transform:scaleX(1.25)}65%,100%{transform:scaleX(1.2)}}
@keyframes electric-kettle-stateNormal{0%,55%{opacity:1}60%,100%{opacity:0}}
@keyframes electric-kettle-stateFault{0%,55%{opacity:0}60%,100%{opacity:1}}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="electric-kettle"] .current-line,
  body[data-topic="electric-kettle"] .heat-wave,
  body[data-topic="electric-kettle"] .heat-glow,
  body[data-topic="electric-kettle"] #alloy,
  body[data-topic="electric-kettle"] #moving-contact,
  body[data-topic="electric-kettle"] #spring,
  body[data-topic="electric-kettle"] #state-normal,
  body[data-topic="electric-kettle"] #state-fault{animation:none}
  body[data-topic="electric-kettle"] .current-line{opacity:1}
  body[data-topic="electric-kettle"] .heat-wave{opacity:.5}
  body[data-topic="electric-kettle"] .heat-glow{opacity:.3}
  body[data-topic="electric-kettle"] #alloy{fill:#93c5fd;transform:scale(1);opacity:1}
  body[data-topic="electric-kettle"] #moving-contact{transform:translateX(0)}
  body[data-topic="electric-kettle"] #spring{transform:scaleX(1)}
  body[data-topic="electric-kettle"] #state-normal{opacity:1}
  body[data-topic="electric-kettle"] #state-fault{opacity:0}
}