/* =============================================================
   六模块流水线指示器
   一条 1px 轨道贯穿六个模块标签，一个节点沿轨道滑动到当前模块。
   目的：把"一套平台，贯通视觉应用"变成可见的连接关系与切换方向。

   约束：
     · 纯装饰层：绝对定位 + pointer-events:none，不参与布局尺寸。
     · 经典外观下整体隐藏，保证首批像素还原不受影响。
     · prefers-reduced-motion 下节点直接落位，无滑动、无呼吸。
   ============================================================= */

/* 承载轨道与标签条的定位容器；不改变标签条自身尺寸与间距 */
.pipeline-track {
  position: relative;
}

.pipeline-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}

/* 轨道线：两端淡出，避免出现生硬的起止点 */
.pipeline-rail__line {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-text) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 14%, transparent) 6%,
    color-mix(in srgb, var(--color-text) 14%, transparent) 94%,
    color-mix(in srgb, var(--color-text) 0%, transparent) 100%);
}

/* 沿轨道滑动的节点 */
.pipeline-node {
  position: absolute;
  left: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--color-text);
  transition: transform 380ms cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
/* 初始化 / 尺寸变化 / 横向滚动跟随时不做过渡，避免抖动 */
.pipeline-node.is-instant { transition: none; }

/* 极缓慢的呼吸光晕，只增加"当前项"的存在感，不制造闪烁 */
.pipeline-node__halo {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  animation: pipeline-breathe 3.4s ease-in-out infinite;
}

@keyframes pipeline-breathe {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50% { opacity: .8; transform: scale(1.12); }
}

/* 经典外观：整体隐藏，回到首批像素还原状态 */
html[data-appearance='classic'] .pipeline-rail { display: none !important; }

/* 手机端标签条横向滚动，轨道宽度跟随可滚动内容，节点随滚动同步 */
@media (max-width: 767px) {
  .pipeline-rail__line { left: var(--page-gutter); right: var(--page-gutter); }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-node { transition: none; }
  .pipeline-node__halo { animation: none; opacity: .5; }
}