/* /assets/css/machines/home-equipment/top-load-washer-vs-front-load-washer.css — 本页专属样式（en/zh 共用） */

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

/* ===== 左侧：顶开式波轮动画 ===== */
body[data-topic="top-load-washer-vs-front-load-washer"] .pulsator-spin{
  transform-origin: 220px 520px;
  animation: spinPulse 2.5s ease-in-out infinite;
}
@keyframes spinPulse{
  0%, 100% { transform: rotate(-60deg); }
  50% { transform: rotate(60deg); }
}

/* 涡旋水流 */
body[data-topic="top-load-washer-vs-front-load-washer"] .vortex-water{
  transform-origin: 220px 480px;
  animation: vortex 2.5s ease-in-out infinite;
}
@keyframes vortex{
  0%, 100% { transform: rotate(-15deg) scaleY(1); }
  50% { transform: rotate(15deg) scaleY(1.05); }
}

body[data-topic="top-load-washer-vs-front-load-washer"] .clothes-bob{
  animation: bob 1.5s ease-in-out infinite alternate;
}
@keyframes bob{
  0% { transform: translate(0, 0) rotate(-3deg); }
  100% { transform: translate(6px, -10px) rotate(3deg); }
}

/* ===== 右侧：滚筒翻滚动画 ===== */
body[data-topic="top-load-washer-vs-front-load-washer"] .drum-spin{
  transform-origin: 680px 400px;
  animation: spinDrum 8s linear infinite;
}
@keyframes spinDrum{
  100% { transform: rotate(360deg); }
}
body[data-topic="top-load-washer-vs-front-load-washer"] .spring-sway{
  transform-origin: 680px 120px;
  animation: sway 8s ease-in-out infinite;
}
@keyframes sway{
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="top-load-washer-vs-front-load-washer"] .pulsator-spin,
  body[data-topic="top-load-washer-vs-front-load-washer"] .vortex-water,
  body[data-topic="top-load-washer-vs-front-load-washer"] .clothes-bob,
  body[data-topic="top-load-washer-vs-front-load-washer"] .drum-spin,
  body[data-topic="top-load-washer-vs-front-load-washer"] .spring-sway{
    animation: none;
  }
}