/* /assets/css/machines/automotive/how-a-shock-absorber-damper-internal-valve-stack-works-cutaway.css — 本页专属样式（en/zh 共用） */
/* 共享零件本体/区分色类（与机器类目共用语义） */
.part .body{fill:var(--metal);stroke:#8ea0b5;stroke-width:1.6}
.part .body2{fill:var(--metal-2);stroke:#a9b7c9;stroke-width:1.2}
.part .body3{fill:#c6d0dd;stroke:none}
.part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
.part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
.part.is-active .body3{fill:#1d4ed8}
.part.is-active .accent{stroke:#1d4ed8}
.part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

/* ============ 减振器内部阀片堆剖面图 · Shock absorber valve stack cutaway ============
   本图专属类统一 sav-* 前缀；共享类（.part/.body/.body2/.body3/.accent/.tag/.tag-sm/
   @keyframes flow/@keyframes spin/@keyframes sav-*）沿用或新建，不重定义。
   零件区分色与动画用 body[data-topic="shock-absorber"] 作用域限定，避免与其它页互扰。 */

/* 主题蓝体系：零件描边 / 小字对比度修正（页面作用域） */
body[data-topic="shock-absorber"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="shock-absorber"] .part .body2{stroke:#60a5fa}
body[data-topic="shock-absorber"] .part .body3{fill:#aab9cd;stroke:none}
body[data-topic="shock-absorber"] .tag-sm{fill:#5b6472}

/* 各部件区分色（作用域限定 · per-part distinct fills，均落在 §4.9 值域内） */
body[data-topic="shock-absorber"] .part[data-id="part-outer-tube"]:not(.is-active) .body{fill:#b9c9de}
body[data-topic="shock-absorber"] .part[data-id="part-outer-tube"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="shock-absorber"] .part[data-id="part-pressure-tube"]:not(.is-active) .body{fill:#c3d0e1}
body[data-topic="shock-absorber"] .part[data-id="part-piston-rod"]:not(.is-active) .body{fill:#cad6e6}
body[data-topic="shock-absorber"] .part[data-id="part-piston-assembly"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="shock-absorber"] .part[data-id="part-piston-assembly"]:not(.is-active) .body2{fill:#d5e1f1}
body[data-topic="shock-absorber"] .part[data-id="part-valve-stack"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="shock-absorber"] .part[data-id="part-valve-stack"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="shock-absorber"] .part[data-id="part-valve-stack"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="shock-absorber"] .part[data-id="part-rebound-disc"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="shock-absorber"] .part[data-id="part-compression-disc"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="shock-absorber"] .part[data-id="part-spring-seat"]:not(.is-active) .body{fill:#c9d5e6}
body[data-topic="shock-absorber"] .part[data-id="part-spring-seat"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="shock-absorber"] .part[data-id="part-top-mount"]:not(.is-active) .body{fill:#c9d5e6}
body[data-topic="shock-absorber"] .part[data-id="part-top-mount"]:not(.is-active) .body2{fill:#e3ecf6}
body[data-topic="shock-absorber"] .part[data-id="part-top-mount"]:not(.is-active) .body3{fill:#b0bed1}
body[data-topic="shock-absorber"] .part[data-id="part-shell-housing"]:not(.is-active) .body{fill:#dfe6ef;stroke:#9aa6b8}

/* 减振器油（本图专属材质 · 暖黄，不受 §4.9 限制） */
.sav-oil{fill:#f2cf6b;stroke:#d9a92f;stroke-width:1}

/* 放大镜圈 / 图框 / 缸壁 / 杆 / 引线（装饰，非零件） */
.sav-lens{fill:none;stroke:#2563eb;stroke-width:1.6;stroke-dasharray:6 6}
.sav-leader{fill:none;stroke:#b8c4d4;stroke-width:1.2;stroke-dasharray:4 5}
.sav-frame{fill:#ffffff;stroke:#cbd5e1;stroke-width:1.5}
.sav-wall{fill:#d7dfe9;stroke:#a9b7c9;stroke-width:1}
.sav-rod{fill:#cdd7e3;stroke:#a9b7c9;stroke-width:1}
.sav-axis{fill:none;stroke:#8ea0b5;stroke-width:1.6;stroke-dasharray:3 4}

/* ============ 动画 ============ */
/* 活塞杆往复（复原↔压缩），2.8s 一个循环；活塞总成随杆同步 */
.sav-recip{transform-box:view-box;animation:sav-recip 2.8s ease-in-out infinite;animation-play-state:paused}
.is-running .sav-recip{animation-play-state:running}
@keyframes sav-recip{0%,100%{transform:translateY(-14px)}50%{transform:translateY(14px)}}

/* 复原阀片开合：循环两端（复原行程）抬起 */
.sav-disc-rebound{transform-box:view-box;animation:sav-open-rebound 2.8s ease-in-out infinite;animation-play-state:paused}
.is-running .sav-disc-rebound{animation-play-state:running}
@keyframes sav-open-rebound{0%{transform:translateY(-4px)}30%{transform:translateY(0)}55%{transform:translateY(0)}100%{transform:translateY(-4px)}}

/* 压缩阀片开合：循环中点（压缩行程）下压 */
.sav-disc-compress{transform-box:view-box;animation:sav-open-compress 2.8s ease-in-out infinite;animation-play-state:paused}
.is-running .sav-disc-compress{animation-play-state:running}
@keyframes sav-open-compress{0%{transform:translateY(0)}30%{transform:translateY(0)}50%{transform:translateY(4px)}70%{transform:translateY(0)}100%{transform:translateY(0)}}

/* 阀簧随行程微压 */
.sav-spring{transform-box:view-box;animation:sav-spring 2.8s ease-in-out infinite;animation-play-state:paused}
.is-running .sav-spring{animation-play-state:running}
@keyframes sav-spring{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}

/* 油液经阀片孔流动（虚线描边） */
.sav-flow{fill:none;stroke:#d9a92f;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 12;opacity:.9}
.is-running .sav-flow{animation:sav-dash 1.2s linear infinite}
@keyframes sav-dash{to{stroke-dashoffset:-40}}

/* 复原 / 压缩行程的流动权重（哪一组阀片在工作） */
.sav-flow-up{opacity:.9}
.is-running .sav-flow-up{animation:sav-glow-up 2.8s ease-in-out infinite}
@keyframes sav-glow-up{0%,20%{opacity:.95}45%,100%{opacity:.15}}
.sav-flow-down{opacity:.5}
.is-running .sav-flow-down{animation:sav-glow-down 2.8s ease-in-out infinite}
@keyframes sav-glow-down{0%,35%{opacity:.12}55%,70%{opacity:.95}85%,100%{opacity:.12}}