/* ══════════════════════════════════════════════════════════════════════
   「How it works」流程动画 + 真实场景动画

   ── 三条硬约束，写在最前面 ────────────────────────────────────────
   ① 不做重型 3D、不依赖视频。 全部是 CSS 过渡 + 一个几十行的定时器。
      首屏不因为它多一次网络往返。
   ② 移动端必须正常。 横向的轨道在窄屏改成纵向，连线跟着转 90°。
   ③ prefers-reduced-motion 时降级为静态。 不是「动得慢一点」——
      是所有节点直接是点亮态，一次都不动。前庭失调的人看着流动的连线会难受，
      而这个页面的信息在静态下一个字都不少。

   动画表达的是 v1.0.0 真实的那条链，节点名与产品里的说法逐字对应
   （实时工作区 / 改动 / 批准），不另造一套词。
   ══════════════════════════════════════════════════════════════════════ */

.flow { margin-top: 8px; }

.flow-rail {
  display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.flow-rail::-webkit-scrollbar { display: none; }

.flow-node {
  flex: 1 1 0; min-width: 132px;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--card); padding: 14px 14px 13px;
  display: flex; flex-direction: column; gap: 3px;
  opacity: .42; transform: translateY(4px);
  transition: opacity .45s ease, transform .45s ease, border-color .45s ease, background .45s ease;
}
.flow-node .fn-k { font: 700 9.5px/1 var(--mono); letter-spacing: 1.2px; color: var(--ink-3); }
.flow-node b { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.flow-node i { font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.45; }

.flow-node[data-on] {
  opacity: 1; transform: none;
  border-color: rgba(142, 247, 216, .38);
  background: rgba(142, 247, 216, .06);
  /* 点亮的那一格要真的发光。Demo 里 running 状态就是这么画的
     （0 0 40px rgba(142,247,216,.08)），官网沿用同一手法。 */
  box-shadow: 0 0 34px rgba(142, 247, 216, .10), inset 0 0 0 1px rgba(142, 247, 216, .06);
}
/* 左侧那道竖亮条：一格被点亮时从上往下长出来 */
.flow-node::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--mint), var(--cyan));
  transform: scaleY(0); transform-origin: top center;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1);
}
.flow-node[data-on]::before { transform: scaleY(1); }
.flow-node { position: relative; }
.flow-node[data-on] .fn-k { color: var(--mint); }

/* 连线：底色一条，上面盖一条会“流动”的高亮。
   用 background-size 动画而不是伪元素位移 —— 前者只重绘不重排。 */
.flow-link {
  flex: 0 0 26px; align-self: center; height: 2px; margin: 0 2px;
  background: var(--line);
  position: relative; overflow: hidden; border-radius: 2px;
}
.flow-link::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  transform: translateX(-100%);
}
.flow-link[data-on]::after { animation: flowpulse 1.1s ease-in-out infinite; }
@keyframes flowpulse { to { transform: translateX(100%); } }
/* 连线上再跑一个亮点。只有流光带的话，在 26px 这么短的一段里
   看着像"闪了一下"，不像"有东西过去了"。 */
.flow-link::before {
  content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 5px;
  margin-top: -2.5px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 8px var(--mint); opacity: 0;
}
.flow-link[data-on]::before { animation: flowdot 1.1s ease-in-out infinite; }
@keyframes flowdot {
  0%   { left: -3px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: calc(100% - 2px); opacity: 0; }
}

/* 06 那一格是「在你的机器上干活」，它比别的节点重，所以单独一块。 */
.flow-work {
  margin: 16px 0; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: rgba(56, 214, 240, .04);
  opacity: .34; transition: opacity .45s ease, border-color .45s ease;
}
.flow-work { position: relative; overflow: hidden; }
.flow-work[data-on] {
  opacity: 1; border-color: rgba(56, 214, 240, .32);
  box-shadow: 0 0 44px rgba(56, 214, 240, .07);
}
/* "在你的机器上干活"那一格：点亮之后有一条扫描带一直走。
   这一格是整条链里唯一真的在跑代码的地方，值得比别人多一点动静。 */
.flow-work[data-on]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(56, 214, 240, .10), transparent);
  transform: translateX(-100%);
  animation: workscan 2.8s ease-in-out infinite;
}
@keyframes workscan { to { transform: translateX(100%); } }
.fw-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fw-head .fn-k { font: 700 9.5px/1 var(--mono); letter-spacing: 1.2px; color: var(--cyan); }
.fw-head b { font-size: 15px; }
.fw-head i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.fw-states { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fw-s {
  font: 600 12px/1 var(--mono); padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3);
  transition: all .35s ease;
}
.fw-s[data-on] { border-color: rgba(56,214,240,.46); color: var(--cyan); background: rgba(56,214,240,.10); box-shadow: 0 0 18px rgba(56,214,240,.14); }

.flow-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.flow-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink-2);
  border-radius: 999px; padding: 7px 15px; font: 600 12.5px/1 var(--sans); cursor: pointer;
}
.flow-btn:hover { border-color: rgba(142,247,216,.4); color: var(--mint); }
.flow-static-note { font-size: 12px; color: var(--ink-3); display: none; }

/* ── 真实场景 ────────────────────────────────────────────────────── */

.scen-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.scen-tab {
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink-2);
  border-radius: 999px; padding: 9px 16px; font: 600 13px/1 var(--sans); cursor: pointer;
}
.scen-tab[aria-selected="true"] { border-color: rgba(142,247,216,.36); background: rgba(142,247,216,.10); color: var(--mint); }

.scen { display: none; }
.scen[data-active] { display: block; }
.scen-say {
  font: 500 14.5px/1.6 var(--mono); color: var(--ink);
  border-left: 2px solid rgba(142,247,216,.4); padding: 4px 0 4px 14px; margin-bottom: 18px;
}
.scen-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.scen-steps li {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--card); padding: 13px 16px;
  opacity: .3; transform: translateX(-6px);
  transition: opacity .4s ease, transform .4s ease, border-color .4s ease;
}
.scen-steps li[data-on] { opacity: 1; transform: none; border-color: rgba(142,247,216,.32); box-shadow: 0 0 26px rgba(142,247,216,.07); }
.scen-steps b { font-size: 14px; }
.scen-steps span { font-size: 13px; color: var(--ink-3); }

/* ── 窄屏：轨道转成纵向 ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .flow-rail { flex-direction: column; overflow-x: visible; }
  .flow-link { flex: 0 0 18px; width: 2px; height: 18px; align-self: flex-start; margin: 0 0 0 26px; }
  .flow-link::after {
    background: linear-gradient(180deg, transparent, var(--mint), transparent);
    transform: translateY(-100%);
  }
  .flow-link[data-on]::after { animation: flowpulsev 1.1s ease-in-out infinite; }
  @keyframes flowpulsev { to { transform: translateY(100%); } }
  .flow-node { min-width: 0; }
}

/* ── ★ 减少动态：全部点亮，一次都不动 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flow-node, .flow-work, .scen-steps li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .flow-node { border-color: rgba(142,247,216,.24); }
  .flow-link::after { animation: none !important; transform: none !important; opacity: .5; }
  .flow-link::before { animation: none !important; opacity: 0 !important; }
  .flow-node::before { transform: scaleY(1) !important; transition: none !important; }
  .flow-work::after { animation: none !important; display: none !important; }
  .fw-s { border-color: rgba(56,214,240,.32); color: var(--cyan); }
  .flow-btn { display: none; }
  .flow-static-note { display: inline; }
}