/* r55 · 插图动效(2026-10-09,Yannie:「全站所有深色插图一起动」→「官网依旧存在很多插图没有动效」)
   r60 起明暗两版都生效:内联 SVG 插图两个主题用同一套类名,浅色之前只是没人写样式。
   <img> 载入的浅色美术图自带内嵌 keyframes,不经过这里。
   只动 transform / opacity / stroke-dashoffset,不写 filter。
   一个新颜色都没有 —— 只用 --c-primary-500 / 既有 token。
   配套脚本 dark-motion-r55.js 只做四件事:给元素编错峰序号、给指针标转轴、
   给折线补一条「信号」叠层、离屏暂停。回退 = 各页删这一行 link + 一行 script。 */

/* ── 通用:变量 ── */
svg.dm * { --dm-d: calc(var(--dm-i, 0) * -0.43s); }

/* ── 1. 虚线流动:连线 / 管线 ─────────────────────────────── */
svg.dm .fx-dash { animation: dm-flow 2.6s linear infinite; animation-delay: var(--dm-d); }
svg.dm .wz-dash { animation: dm-flow-w 2.4s linear infinite; }
@keyframes dm-flow   { to { stroke-dashoffset: -20; } }   /* fx-dash: 4 6  → 周期 10 */
@keyframes dm-flow-w { to { stroke-dashoffset: -18; } }   /* wz-dash: 4 5  → 周期 9  */

/* ── 2. 信号:沿主线 / 折线跑的一小段亮光(脚本补的叠层) ─── */
.dm-pulse {
  display: inline; fill: none; pointer-events: none;
  stroke: var(--c-primary-500); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 14 86; stroke-dashoffset: 14; opacity: .85;
  animation: dm-run 3.8s linear infinite; animation-delay: var(--dm-d, 0s);
}
@keyframes dm-run { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -86; } }

/* ── 3. 活点:圆点 / 光晕 / 外环 ───────────────────────────── */
svg.dm .fx-dot,
svg.dm .fx-halo,
svg.dm .fx-ring.dm-ping {
  transform-box: fill-box; transform-origin: 50% 50%;
}
svg.dm .fx-dot:not([transform])  { animation: dm-beat 2.8s ease-in-out infinite; animation-delay: var(--dm-d); }
svg.dm .fx-halo:not([transform]) { animation: dm-breathe 2.8s ease-in-out infinite; animation-delay: var(--dm-d); }
svg.dm .fx-ring.dm-ping          { animation: dm-ping 2.8s ease-out infinite; animation-delay: var(--dm-d); }
@keyframes dm-beat    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes dm-breathe { 0%, 100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes dm-ping    { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

svg.dm .fx-node-dot,
svg.dm .fx-tick-dot { animation: dm-blink 3s ease-in-out infinite; animation-delay: var(--dm-d); }
@keyframes dm-blink { 0%, 100% { opacity: .42; } 50% { opacity: 1; } }

/* ── 4. 柱:起伏(只给真柱子;骨架线走 5) ──────────────────── */
svg.dm .dm-bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: dm-grow 3.6s ease-in-out infinite; animation-delay: var(--dm-d);
}
@keyframes dm-grow { 0%, 100% { transform: scaleY(.84); } 50% { transform: scaleY(1.06); } }

/* ── 5. 骨架线:自上而下的扫光 ─────────────────────────────── */
svg.dm .dm-skel { animation: dm-sweep 3.4s ease-in-out infinite; animation-delay: var(--dm-d); }
@keyframes dm-sweep { 0%, 100% { opacity: .5; } 45% { opacity: 1; } }

/* ── 6. K 线 / 占比环 ──────────────────────────────────────── */
svg.dm .fx-candle,
svg.dm .fx-candle--up { animation: dm-blink 3.4s ease-in-out infinite; animation-delay: var(--dm-d); }
svg.dm .fx-ring-seg  { animation: dm-seg 4.4s ease-in-out infinite; animation-delay: var(--dm-d); }
@keyframes dm-seg { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── 7. 仪表指针 ──────────────────────────────────────────── */
svg.dm .fx-needle.dm-pivot {
  transform-box: view-box; animation: dm-swing 3.6s ease-in-out infinite alternate;
}
@keyframes dm-swing { from { transform: rotate(-9deg); } to { transform: rotate(8deg); } }

/* ── 8. 币:缓慢浮动(币与内圈同序号,同步) ─────────────────── */
svg.dm .fx-coin.dm-float,
svg.dm .fx-coin--key.dm-float,
svg.dm .fx-coin-rim.dm-float { animation: dm-float 4.2s ease-in-out infinite alternate; animation-delay: var(--dm-d); }
@keyframes dm-float { from { transform: translateY(0); } to { transform: translateY(-2.4px); } }

/* ── 9. 放大镜:在答案上缓慢扫视(帮助中心首图) ─────────────── */
svg.dm .dm-scan { animation: dm-scan 7s ease-in-out infinite; }
@keyframes dm-scan { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, -26px); } }

/* ── 10. 叠印(ovp):网格缓慢平移一个节距 + 方牌错位 ─────────── */
svg.dm .ovp-raster,
svg.dm .ovp-raster-2 { animation: dm-raster 9s linear infinite; }
@keyframes dm-raster { to { transform: translateX(var(--dm-p, 12px)); } }
svg.dm .ovp-plane-2 { animation: dm-slip 11s ease-in-out infinite alternate; }
@keyframes dm-slip { from { transform: translate(0, 0); } to { transform: translate(4px, -3px); } }
svg.dm .ovp-tab,
svg.dm .ovp-tab-2,
svg.dm .ovp-tab-3 { animation: dm-tab 7s ease-in-out infinite alternate; }
@keyframes dm-tab { from { transform: translate(0, 0); } to { transform: translate(3px, 3px); } }

/* ── 11. 叠印其余元素(r61):描边呼吸 / 指针游移 / 条形伸缩 ─────── */
svg.dm .ovp-strand,
svg.dm .ovp-strand-2 { animation: dm-ovp-breathe 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--dm-i, 0) * -0.7s); }
svg.dm .ovp-rule,
svg.dm .ovp-rule-2,
svg.dm .ovp-edge,
svg.dm .ovp-edge-2 { animation: dm-ovp-rule 6s ease-in-out infinite alternate; animation-delay: calc(var(--dm-i, 0) * -0.9s); }
svg.dm .ovp-ghost { animation: dm-ovp-rule 8s ease-in-out infinite alternate; animation-delay: calc(var(--dm-i, 0) * -1.3s); }
svg.dm .ovp-node { animation: dm-ovp-node 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--dm-i, 0) * -0.8s); }
svg.dm .ovp-node-2 { transform-box: fill-box; transform-origin: 0 50%; animation: dm-ovp-bar 5s ease-in-out infinite alternate; animation-delay: calc(var(--dm-i, 0) * -0.6s); }
@keyframes dm-ovp-breathe { from { opacity: .45; transform: translateY(-1.5px); } to { opacity: 1; transform: translateY(1.5px); } }
@keyframes dm-ovp-rule { from { opacity: .35; } to { opacity: 1; } }
@keyframes dm-ovp-node { from { opacity: .4; transform: translate(-3px, 0); } to { opacity: 1; transform: translate(3px, 0); } }
@keyframes dm-ovp-bar { from { opacity: .45; transform: scaleX(.78); } to { opacity: 1; transform: scaleX(1); } }

/* ── 离屏暂停 / 降低动效 ──────────────────────────────────── */
svg.dm.dm-off, svg.dm.dm-off * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  svg.dm *, .dm-pulse { animation: none !important; }
  .dm-pulse { display: none !important; }
}