/* assets/css/physics/basic-mechanics/how-pulley-block-system-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 滑轮组（定滑轮 + 动滑轮）· Pulley block system ============ */
/* 页面专属类统一 pl- 前缀；基础骨架与 .part/.tag 等共享类在 /assets/css/style.css。
   零件区分色与动画用 body[data-topic="pulley"] 作用域限定，避免与其它页互扰。 */

/* 零件本体 / 高亮配色模型（SVG-SPEC §4.9，未高亮一律中灰蓝，禁近白） */
body[data-topic="pulley"] .part .body{fill:#c2d1e4;stroke:#2563eb;stroke-width:1.6}
body[data-topic="pulley"] .part .body2{fill:#dde7f4;stroke:#60a5fa;stroke-width:1.2}
body[data-topic="pulley"] .part .body3{fill:#aab9cd;stroke:none}
body[data-topic="pulley"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="pulley"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
body[data-topic="pulley"] .part.is-active .body3{fill:#1d4ed8}
body[data-topic="pulley"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}
body[data-topic="pulley"] .tag-sm{fill:#5b6472}

/* 各部件区分色（作用域限定 · 均落在中灰蓝值域内，禁近白） */
body[data-topic="pulley"] .part[data-id="part-ceiling-anchor"]:not(.is-active) .body{fill:#bccbe0}
body[data-topic="pulley"] .part[data-id="part-ceiling-anchor"]:not(.is-active) .body2{fill:#d9e4f3}
body[data-topic="pulley"] .part[data-id="part-fixed-pulley"]:not(.is-active) .body{fill:#c3d2e5}
body[data-topic="pulley"] .part[data-id="part-fixed-pulley"]:not(.is-active) .body2{fill:#dfe9f5}
body[data-topic="pulley"] .part[data-id="part-fixed-pulley"]:not(.is-active) .body3{fill:#adbcd0}
body[data-topic="pulley"] .part[data-id="part-movable-pulley"]:not(.is-active) .body{fill:#c9d6e8}
body[data-topic="pulley"] .part[data-id="part-movable-pulley"]:not(.is-active) .body2{fill:#e3ecf7}
body[data-topic="pulley"] .part[data-id="part-movable-pulley"]:not(.is-active) .body3{fill:#b2c1d5}
body[data-topic="pulley"] .part[data-id="part-load-block"]:not(.is-active) .body{fill:#c0cfe2}
body[data-topic="pulley"] .part[data-id="part-load-block"]:not(.is-active) .body2{fill:#dce7f3}
body[data-topic="pulley"] .part[data-id="part-load-block"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="pulley"] .part[data-id="part-effort-rope-end"]:not(.is-active) .body{fill:#c6d3e6}
body[data-topic="pulley"] .part[data-id="part-effort-rope-end"]:not(.is-active) .body2{fill:#e0e9f5}
body[data-topic="pulley"] .part[data-id="part-effort-rope-end"]:not(.is-active) .body3{fill:#b4c3d7}

/* 绳索：填色小带 + 绕轮圆弧，同宽同色 */
body[data-topic="pulley"] .pl-rope{fill:#6b7688;stroke:none}
body[data-topic="pulley"] .pl-rope-arc{fill:none;stroke:#6b7688;stroke-width:6;stroke-linecap:round}
body[data-topic="pulley"] .part.is-active .pl-rope{fill:#1d4ed8}
body[data-topic="pulley"] .part.is-active .pl-rope-arc{stroke:#1d4ed8;stroke-width:7}

/* 力 / 张力箭头、引线 */
body[data-topic="pulley"] .pl-tension{fill:none;stroke:#1d4ed8;stroke-width:3;stroke-linecap:round}
body[data-topic="pulley"] .pl-leader{fill:none;stroke:#8ea0b5;stroke-width:1.4}

/* 图内标题与文字注记 */
body[data-topic="pulley"] .pl-title{fill:#16202c;font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.08em}
body[data-topic="pulley"] .pl-note{fill:#3c4a5a;font-family:var(--sans);font-size:13px}

/* ============ 动画：均匀拉动施力绳端，动滑轮随重物缓慢上升，绳索各段同步收放 ============ */
body[data-topic="pulley"] .pl-rising{animation:pl-lift 4.5s ease-in-out infinite;animation-play-state:paused}
body[data-topic="pulley"] .is-running .pl-rising{animation-play-state:running}
@keyframes pl-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-60px)}}

body[data-topic="pulley"] .pl-pulling{animation:pl-pull 4.5s ease-in-out infinite;animation-play-state:paused}
body[data-topic="pulley"] .is-running .pl-pulling{animation-play-state:running}
@keyframes pl-pull{0%,100%{transform:translateY(0)}50%{transform:translateY(120px)}}

body[data-topic="pulley"] .pl-seg-a{transform-box:fill-box;transform-origin:top;animation:pl-shorten-a 4.5s ease-in-out infinite;animation-play-state:paused}
body[data-topic="pulley"] .is-running .pl-seg-a{animation-play-state:running}
@keyframes pl-shorten-a{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.8256)}}

body[data-topic="pulley"] .pl-seg-b{transform-box:fill-box;transform-origin:top;animation:pl-shorten-b 4.5s ease-in-out infinite;animation-play-state:paused}
body[data-topic="pulley"] .is-running .pl-seg-b{animation-play-state:running}
@keyframes pl-shorten-b{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.7778)}}

body[data-topic="pulley"] .pl-seg-c{transform-box:fill-box;transform-origin:top;animation:pl-lengthen-c 4.5s ease-in-out infinite;animation-play-state:paused}
body[data-topic="pulley"] .is-running .pl-seg-c{animation-play-state:running}
@keyframes pl-lengthen-c{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.3158)}}

@media (prefers-reduced-motion:reduce){
  body[data-topic="pulley"] .pl-rising,
  body[data-topic="pulley"] .pl-pulling,
  body[data-topic="pulley"] .pl-seg-a,
  body[data-topic="pulley"] .pl-seg-b,
  body[data-topic="pulley"] .pl-seg-c{animation:none}
}