/**
 * 连线流光的效果样式（画布 + 效果预览页共用）。
 *
 * 配色只用两档：主线用主题的 --accent（跟着品牌走），亮芯用一层近白的青，
 * 这样白天不脏、夜晚才发光。**不要在这里写死具体色值以外的颜色逻辑**，
 * 夜晚主题通过 :root[data-theme=dark] 只换亮芯和辉光强度。
 *
 * 动画都是 CSS（dashoffset）或 SMIL（animateMotion）：
 *   · dashoffset 递减 = 光斑朝路径方向前进，而路径一律是"左边出口 → 右边入口"，
 *     所以看上去就是从左往右流
 *   · 段长和间隔决定"一段一段"的颗粒感，速度由 duration 调
 */
:root {
  /* 白天不能是"近白的光"——白底上根本看不见。饱和蓝才有对比 */
  --fx-core: #1f9cf0;
  --fx-glow: rgba(11, 111, 208, 0.5); /* 辉光 */
  --fx-track: rgba(11, 111, 208, 0.35); /* 轨道底色 */
}
:root[data-theme='dark'] {
  --fx-core: #b9f0ff;
  --fx-glow: rgba(79, 195, 247, 0.65);
  --fx-track: rgba(79, 195, 247, 0.4);
}

/* 所有特效层都不吃鼠标：点连线仍然是点基础那条 */
.fx-flow,
.fx-halo,
.fx-current,
.fx-glow,
.fx-wave,
.fx-track,
.fx-dot {
  pointer-events: none;
}

/* 共用的辉光层：同形状的粗线，跟着芯跑同一条动画——这样看起来才像"光"而不是虚线 */
.fx-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 9 21;
  opacity: 0.17;
  animation: fxFlow 0.85s linear infinite;
}
.fx-halo.wave {
  stroke-width: 11;
  stroke-dasharray: 96 420;
  opacity: 0.2;
  animation: fxWave 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ---- A 数据流：一段段光斑往右跑 ---- */
.fx-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 9 21;
  animation: fxFlow 0.85s linear infinite;
  filter: drop-shadow(0 0 3px var(--fx-glow));
}
@keyframes fxFlow {
  to {
    stroke-dashoffset: -30;
  }
}

/* ---- B 脉冲包：亮点一颗一颗过去（位置由 SMIL 驱动，这里只管长相） ---- */
.fx-track {
  fill: none;
  stroke: var(--fx-track);
  stroke-width: 2.4;
  stroke-dasharray: 2 6;
}
.fx-dot {
  fill: var(--fx-core);
  filter: drop-shadow(0 0 5px var(--fx-core)) drop-shadow(0 0 10px var(--fx-glow));
}

/* ---- C 电流：细密火星高速流动 + 一条底光 ---- */
.fx-glow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.16;
}
.fx-current {
  fill: none;
  stroke: var(--fx-core);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
  animation:
    fxCur 0.42s linear infinite,
    fxFlicker 1.3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px var(--fx-core));
}
@keyframes fxCur {
  to {
    stroke-dashoffset: -12;
  }
}
@keyframes fxFlicker {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.62;
  }
}

/* ---- D 能量波：一条长光带扫过去 ---- */
.fx-wave {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 96 420;
  animation: fxWave 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  filter: drop-shadow(0 0 7px var(--fx-glow));
}
@keyframes fxWave {
  to {
    stroke-dashoffset: -516;
  }
}

/* 生成结束、连线不再"通电"时不要有残留 */
#edgeLayer .fx-flow,
#edgeLayer .fx-current,
#edgeLayer .fx-glow,
#edgeLayer .fx-wave,
#edgeLayer .fx-track,
#edgeLayer .fx-dot {
  animation-play-state: running;
}

/* 尊重系统的"减少动态效果"：宁可不动，也别让人头晕 */
@media (prefers-reduced-motion: reduce) {
  .fx-flow,
  .fx-current,
  .fx-wave {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.9;
  }
}