/* r57 · how-it-works#path 六站处理流程图的动效(2026-10-09,Yannie:「官网这里的插图没有动效」)
   r55 只给这张图补了 14 处极小的点和线,整幅变化像素不到 0.3%,肉眼等于没动。
   这里补一条贯穿全图的主动效:一枚信号沿底部那条轴从左跑到右,途经每一站时,
   该站的竖线落一道光、轴下那枚封存方片点亮一下;跑到最后一站,终点的环外扩一圈。
   只在 [data-theme="dark"] 生效;只动 transform / opacity / stroke-dashoffset,不写 filter;
   不新增任何颜色(只用 --c-primary-500)。叠层元素由 path-flow-r57.js 补进去,
   回退 = 页面里删这一行 link + 一行 script。 */

svg.pf-on { --pf-T: 9s; }
.pf-run, .pf-drop, .pf-seal, .pf-end { display: none; }

[data-theme="dark"] svg.pf-on .pf-run,
[data-theme="dark"] svg.pf-on .pf-drop,
[data-theme="dark"] svg.pf-on .pf-seal,
[data-theme="dark"] svg.pf-on .pf-end { display: inline; pointer-events: none; }

/* ── 信号:一枚亮点 + 向后拖的尾迹,6.5s 跑完全轴,其余时间隐去 ── */
[data-theme="dark"] svg.pf-on .pf-run { opacity: 0; animation: pf-run var(--pf-T) linear infinite; }
.pf-run-dot  { fill: var(--c-primary-500); }
.pf-run-tail { fill: none; stroke-width: 3.2; stroke-linecap: butt; }
@keyframes pf-run {
  0%    { transform: translateX(0);     opacity: 0; }
  2.5%  { opacity: 1; }
  70%   { opacity: 1; }
  72.2% { transform: translateX(860px); opacity: 0; }
  100%  { transform: translateX(860px); opacity: 0; }
}

/* ── 落光:每站的竖线上,一段亮光自上而下落到轴上 ── */
[data-theme="dark"] svg.pf-on .pf-drop {
  fill: none; stroke: var(--c-primary-500); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 22 200; stroke-dashoffset: 22; opacity: 0;
  animation: pf-drop var(--pf-T) linear infinite; animation-delay: calc(var(--pf-at, 0s) - .5s);
}
@keyframes pf-drop {
  0%   { stroke-dashoffset: 22;   opacity: 1; }
  7%   { stroke-dashoffset: -100; opacity: 1; }
  7.1%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* ── 封存:信号到站时,轴下那枚方片点亮并轻轻弹一下,然后缓缓暗回 ── */
[data-theme="dark"] svg.pf-on .pf-seal {
  fill: var(--c-primary-500); opacity: 0;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: pf-seal var(--pf-T) ease-out infinite; animation-delay: var(--pf-at, 0s);
}
@keyframes pf-seal {
  0%   { opacity: 0;   transform: scale(.8); }
  2.5% { opacity: 1;   transform: scale(1.5); }
  7%   { opacity: 1;   transform: scale(1); }
  24%  { opacity: .6;  transform: scale(1); }
  38%, 100% { opacity: 0; transform: scale(1); }
}

/* ── 终点:最后一站的环向外扩一圈 ── */
[data-theme="dark"] svg.pf-on .pf-end {
  fill: none; stroke: var(--c-primary-500); stroke-width: 1.6; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: pf-end var(--pf-T) ease-out infinite; animation-delay: var(--pf-at, 0s);
}
@keyframes pf-end {
  0%   { opacity: .9; transform: scale(1); }
  14%  { opacity: 0;  transform: scale(1.7); }
  100% { opacity: 0;  transform: scale(1.7); }
}

/* ── 离屏暂停(与 r55 同一套 dm-off 开关) / 降低动效 ── */
[data-theme="dark"] svg.pf-on.dm-off .pf-run,
[data-theme="dark"] svg.pf-on.dm-off .pf-drop,
[data-theme="dark"] svg.pf-on.dm-off .pf-seal,
[data-theme="dark"] svg.pf-on.dm-off .pf-end { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pf-run, .pf-drop, .pf-seal, .pf-end { display: none !important; }
}