/* ============================================================
   comp-flow.css (Lego Block)
   "How klang-guide works" — 6-step horizontal roadmap.
   ============================================================ */
.section:has(.flow-track) .section-head { text-align: center; margin-left: auto; margin-right: auto; }

.flow-track {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  position: relative; margin-top: 20px;
}
.flow-track::before {
  content: ""; position: absolute; top: 21px; left: 6%; right: 6%; height: 1px;
  background: var(--border-muted); z-index: 0;
}
.flow-track-light {
  position: absolute; top: 20.5px; left: 8.333%; right: 8.333%; height: 2px;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.flow-track-light::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 25%;
  background: linear-gradient(90deg, transparent, #d946ef, #8b5cf6, transparent);
  box-shadow: 0 0 10px #d946ef; opacity: 0;
}
.flow-track.is-animated .flow-track-light::before {
  opacity: 1; animation: trackLightMove 6s linear infinite;
}
@keyframes trackLightMove {
  0% { left: -10%; transform: translateX(-50%); }
  100% { left: 110%; transform: translateX(-50%); }
}
.flow-step {
  position: relative; z-index: 1; text-align: center; padding: 0 6px;
}
.flow-num {
  width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: bold; font-size: 15px;
  background: var(--bg-base); border: 1.5px solid var(--accent-primary); color: var(--accent-primary);
}

.flow-icon { font-size: 22px; margin-bottom: 8px; }
.flow-step h3 { font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.3; }
.flow-step p { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* Circle Pulse Animations */
@keyframes circlePulse {
  0%, 15%, 100% { box-shadow: none; border-color: var(--accent-primary); background: var(--bg-base); color: var(--accent-primary); }
  5% { box-shadow: 0 0 15px #d946ef, inset 0 0 10px #8b5cf6; border-color: #d946ef; background: rgba(217, 70, 239, 0.2); color: #fff; }
}
@keyframes circlePulseFinal {
  0%, 15%, 100% { box-shadow: none; transform: scale(1); }
  5% { box-shadow: 0 0 25px #d946ef; transform: scale(1.15); }
}

.flow-track.is-animated .flow-step:nth-child(1) .flow-num { animation: circlePulse 6s infinite 0.2s; }
.flow-track.is-animated .flow-step:nth-child(2) .flow-num { animation: circlePulse 6s infinite 1.2s; }
.flow-track.is-animated .flow-step:nth-child(3) .flow-num { animation: circlePulse 6s infinite 2.2s; }
.flow-track.is-animated .flow-step:nth-child(4) .flow-num { animation: circlePulse 6s infinite 3.2s; }
.flow-track.is-animated .flow-step:nth-child(5) .flow-num { animation: circlePulse 6s infinite 4.2s; }
.flow-track.is-animated .flow-step:nth-child(6) .flow-num { animation: circlePulse 6s infinite 5.2s; }

@media (max-width: 900px) {
  .flow-track { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  .flow-track::before { top: 0; bottom: 0; left: 21px; right: auto; width: 1px; height: auto; }
  
  .flow-track-light { top: 0; bottom: 0; left: 20.5px; right: auto; width: 2px; height: auto; }
  .flow-track-light::before {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 150px;
    background: linear-gradient(180deg, transparent, #d946ef, #8b5cf6, transparent);
  }
  @keyframes trackLightMoveVertical {
    0% { top: -10%; left: 0; transform: translateY(-50%); }
    100% { top: 110%; left: 0; transform: translateY(-50%); }
  }
  .flow-track.is-animated .flow-track-light::before {
    animation: trackLightMoveVertical 6s linear infinite;
  }

  .flow-step { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 0; }
  .flow-num { margin: 0; flex-shrink: 0; }
  .flow-icon { margin-bottom: 2px; }
}