/* ==========================================================================
   三步流程：卡片之间加循环流动的箭头
   --------------------------------------------------------------------------
   · 虚线沿水平方向持续流动（flowDash），循环播放
   · 箭头尖轻微呼吸（flowPulse），与虚线同向，暗示 1→2→3
   · 平板/手机改为单列，连接线隐藏，避免压到文字
   · 尊重「减少动态效果」系统设置
   ========================================================================== */

.flow { gap: 56px; }
.flow .item { overflow: visible; }
.flow .item .card-bg { border-radius: inherit; overflow: hidden; }
/* 旧的静态连接线由 .flow-link 取代 */
.flow .item::after { display: none; }

/* 步骤标签（沿用内容里的 STEP 01/02/03） */
.flow .flow-step {
  display: inline-block; margin-bottom: 14px; position: relative; z-index: 2;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  color: #fff; background: rgba(22, 80, 60, .92); border-radius: 999px; padding: 5px 13px;
}
.flow .item:nth-child(2) .flow-step { background: rgba(30, 122, 87, .92); }
.flow .item:nth-child(3) .flow-step { background: rgba(48, 120, 72, .92); }

/* 连接线：绝对定位在卡片右侧，不参与栅格 */
.flow-link {
  position: absolute; top: 50%; left: 100%; width: 56px; height: 14px;
  transform: translateY(-50%); pointer-events: none; z-index: 3;
}
.flow-link::before {
  content: ""; position: absolute; left: 0; right: 10px; top: 50%; height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(90deg, #3E9A6E 0 7px, transparent 7px 15px);
  background-size: 15px 2px; background-repeat: repeat-x;
  animation: flowDash .9s linear infinite;
}
.flow-link::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 8px solid #3E9A6E;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  animation: flowPulse 1.8s ease-in-out infinite;
}

@keyframes flowDash {
  from { background-position: 0 0; }
  to { background-position: 15px 0; }
}
@keyframes flowPulse {
  0%, 100% { opacity: .35; transform: translateY(-50%) translateX(0); }
  50% { opacity: 1; transform: translateY(-50%) translateX(2px); }
}

@media (max-width: 1100px) {
  .flow { gap: 26px; }
  .flow .item { overflow: hidden; }
  .flow-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-link::before, .flow-link::after { animation: none; }
  .flow-link::after { opacity: 1; }
}