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

/* ===== 图形基础 ===== */
body[data-topic="bidet-water-diverter"] .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="bidet-water-diverter"] .tag   {fill:#334155;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:14px;}
body[data-topic="bidet-water-diverter"] .tag-sm{fill:#5b6472;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:12px;}
body[data-topic="bidet-water-diverter"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

/* ===== 阀芯通道旋转：8秒周期，在三个位置停留 ===== */
body[data-topic="bidet-water-diverter"] #core-channel{
  transform-origin: 360px 310px;
  animation: rotateCore 8s ease-in-out infinite;
}
@keyframes rotateCore{
  0%, 18.75%   { transform: rotate(0deg); }
  25%, 43.75%  { transform: rotate(-45deg); }
  50%, 68.75%  { transform: rotate(45deg); }
  75%, 100%    { transform: rotate(0deg); }
}

/* ===== 电机齿轮旋转 ===== */
body[data-topic="bidet-water-diverter"] #motor-gear{
  transform-origin: 360px 155px;
  animation: spin 1.5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 水流虚线流动 ===== */
body[data-topic="bidet-water-diverter"] .flow-line{
  fill: none;
  stroke: #3b82f6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  animation: dashMove 0.8s linear infinite;
}
@keyframes dashMove { to { stroke-dashoffset: -16; } }

/* ===== 出口流动可见性控制 ===== */
body[data-topic="bidet-water-diverter"] .flow-top{
  animation: dashMove 0.8s linear infinite, visTop 8s linear infinite;
}
@keyframes visTop{
  0%, 24.9% { opacity: 0; }
  25%, 43.75% { opacity: 1; }
  43.76%, 100% { opacity: 0; }
}

body[data-topic="bidet-water-diverter"] .flow-mid{
  animation: dashMove 0.8s linear infinite, visMid 8s linear infinite;
}
@keyframes visMid{
  0%, 18.75% { opacity: 1; }
  18.76%, 74.9% { opacity: 0; }
  75%, 93.75% { opacity: 1; }
  93.76%, 100% { opacity: 0; }
}

body[data-topic="bidet-water-diverter"] .flow-bot{
  animation: dashMove 0.8s linear infinite, visBot 8s linear infinite;
}
@keyframes visBot{
  0%, 49.9% { opacity: 0; }
  50%, 68.75% { opacity: 1; }
  68.76%, 100% { opacity: 0; }
}

/* ===== 水滴下落 ===== */
body[data-topic="bidet-water-diverter"] .water-drop{
  fill: #3b82f6;
  animation: dropFall 1.5s ease-in infinite;
}
@keyframes dropFall{
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="bidet-water-diverter"] #core-channel { animation: none; transform: rotate(0deg); }
  body[data-topic="bidet-water-diverter"] #motor-gear { animation: none; }
  body[data-topic="bidet-water-diverter"] .flow-line { animation: none; stroke-dasharray: none; opacity: 0.6; }
  body[data-topic="bidet-water-diverter"] .flow-top { animation: none; opacity: 0; }
  body[data-topic="bidet-water-diverter"] .flow-mid { animation: none; opacity: 1; }
  body[data-topic="bidet-water-diverter"] .flow-bot { animation: none; opacity: 0; }
  body[data-topic="bidet-water-diverter"] .water-drop { animation: none; opacity: 0.5; }
}