/* ============================================================
   cap-proc-reflow.css — 「合作流程 · Process」独立通栏 1920×600
   白底 + 居中标题（品牌色短下划线）+ 7 步流程图（单行 7 卡 + 6 箭头）
   动画：单个高亮跑马灯 — 高亮点 01→07 逐个扫过（220ms/步，走过即熄灭），
        箭头跟随当前步变洋红；到底停留 600ms 后归零循环重播
   scoped：仅 capabilities-draft.html 引用，不污染全站 style.css
   v=20260906
============================================================ */

.cap-proc-band{position:relative;background:#fff;overflow:hidden}
.cap-proc-band__inner{
  max-width:1472px;margin:0 auto;
  padding:56px 32px 60px;
  min-height:600px;   /* 1920×600：内容不足时由 min-height 兜到 600 */
  display:flex;flex-direction:column;justify-content:center;
}

/* ---------- 居中 Headline + 品牌色短下划线 ---------- */
.cap-proc-head{text-align:center;margin-bottom:36px}
.cap-proc-eyebrow{
  display:inline-block;
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#DA1884;margin-bottom:12px;
}
.cap-proc-title{
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;line-height:1.2;
  color:#1a1a1a;margin:0;
}
.cap-proc-title .accent{color:#DA1884}
.cap-proc-title::after{
  content:'';display:block;
  width:56px;height:4px;border-radius:2px;background:#DA1884;
  margin:18px auto 0;
}

/* ---------- 七步流程图：单行 7 卡 + 6 箭头 ---------- */
.cap-proc-flow{
  display:flex;align-items:stretch;justify-content:center;gap:10px;
}
.cap-proc-step{
  position:relative;overflow:hidden;
  flex:1;min-width:0;
  background:#fff;
  border:1px solid #eee7ee;
  border-radius:12px;
  padding:20px 14px 18px;
  transition:opacity .45s ease,transform .45s ease,
             border-color .45s ease,box-shadow .45s ease;
}
/* 顶部洋红进度条：循环播放时由 0 展开到 100% */
.cap-proc-step__bar{
  position:absolute;top:0;left:0;height:3px;width:100%;
  background:#DA1884;
  transition:width .5s ease;
}
.cap-proc-step__n{
  display:block;
  font-family:'Space Mono','Inter',monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:#c2bac0;
  transition:color .45s ease;
}
.cap-proc-step h4{
  margin:8px 0 0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;font-weight:600;line-height:1.35;
  color:#1a1a1a;
}
.cap-proc-step p{
  margin:6px 0 0;
  font-size:.75rem;color:#6b6570;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cap-proc-arrow{
  flex:0 0 24px;display:grid;place-items:center;
  color:#cfc7ce;transition:color .45s ease;
}
/* 跑马灯：亮起快（.24s）→ 熄灭慢（.45s），高亮点依次从 01 扫到 07 */
.cap-proc-flow.is-playing .cap-proc-step.is-on,
.cap-proc-flow.is-playing .cap-proc-arrow.is-on{transition-duration:.24s}
.cap-proc-flow.is-playing .cap-proc-step.is-on .cap-proc-step__bar{transition-duration:.26s}
.cap-proc-arrow svg{width:18px;height:18px}

/* ---------- 循环播放态（仅 JS 加上 .is-playing 后生效） ---------- */
/* 无 JS / reduced-motion 时保持全部静态点亮，不会出现内容不可见 */
.cap-proc-flow.is-playing .cap-proc-step{
  opacity:.38;transform:translateY(6px);
  border-color:#eee7ee;box-shadow:none;
}
.cap-proc-flow.is-playing .cap-proc-step__bar{width:0}
.cap-proc-flow.is-playing .cap-proc-step.is-on{
  opacity:1;transform:translateY(0);
  border-color:rgba(218,24,132,.35);
  box-shadow:0 14px 30px rgba(26,26,26,.09);
}
.cap-proc-flow.is-playing .cap-proc-step.is-on .cap-proc-step__bar{width:100%}
.cap-proc-flow.is-playing .cap-proc-step.is-on .cap-proc-step__n{color:#DA1884}
.cap-proc-flow.is-playing .cap-proc-arrow.is-on{color:#DA1884}

/* ---------- 响应式 ---------- */
@media(max-width:1199px){
  .cap-proc-flow{flex-wrap:wrap;gap:12px}
  .cap-proc-step{flex:0 0 calc(25% - 12px)}
  .cap-proc-arrow{display:none}
}
@media(max-width:768px){
  .cap-proc-band__inner{padding:52px 20px 60px;min-height:0}
  .cap-proc-head{margin-bottom:28px}
  .cap-proc-flow{flex-direction:column;flex-wrap:nowrap;gap:0}
  .cap-proc-step{flex:0 0 auto;width:100%}
  .cap-proc-arrow{display:grid;flex:0 0 24px;height:22px;transform:rotate(90deg)}
}
@media(prefers-reduced-motion:reduce){
  .cap-proc-step,.cap-proc-arrow{transition:none}
  .cap-proc-flow.is-playing .cap-proc-step{opacity:1;transform:none}
  .cap-proc-flow.is-playing .cap-proc-step__bar{width:100%}
  .cap-proc-flow.is-playing .cap-proc-arrow{color:#cfc7ce}
}