Steps Sequential

<section class="ws-steps bg-[var(--ws-steps-bg)] py-20">
  <style>
    .ws-steps-sequential {
      --step-delay: 220ms;
      --step-duration: 0.55s;
      --step-offset: 18px;
      --progress-from: oklch(0.68 0.22 28);
      --progress-via: oklch(0.79 0.2 85);
      --progress-to: oklch(0.73 0.18 150);
      --progress-width: 74%;
    }

    .ws-steps-sequential .ws-step-card {
      opacity: 0;
      transform: translateY(var(--step-offset)) scale(0.985);
    }

    .ws-steps-sequential.is-visible .ws-step-card {
      animation: ws-step-in var(--step-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .ws-steps-sequential.is-visible .ws-step-card:nth-child(2) { animation-delay: var(--step-delay); }
    .ws-steps-sequential.is-visible .ws-step-card:nth-child(3) { animation-delay: calc(var(--step-delay) * 2); }
    .ws-steps-sequential.is-visible .ws-step-card:nth-child(4) { animation-delay: calc(var(--step-delay) * 3); }

    .ws-steps-sequential .ws-progress-line {
      position: relative;
      height: 0.4rem;
      width: 100%;
      overflow: hidden;
      border-radius: 9999px;
      background: color-mix(in oklch, var(--ws-steps-line) 70%, transparent);
    }

    .ws-steps-sequential .ws-progress-line::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--progress-width);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--progress-from), var(--progress-via), var(--progress-to));
      box-shadow: 0 0 18px color-mix(in oklch, var(--progress-via) 30%, transparent);
    }

    @keyframes ws-step-in {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ws-steps-sequential .ws-step-card,
      .ws-steps-sequential.is-visible .ws-step-card {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }
  </style>

  <div class="ws-steps-sequential is-visible mx-auto max-w-6xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-steps-accent)]">Process</p>
      <h2 class="mt-4 text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">Roll out in clear phases</h2>
      <p class="mt-4 text-lg text-[var(--ws-steps-text-soft)]">Instead of revealing every card at once, this section guides attention from left to right with fixed pauses.</p>
    </div>

    <div class="mx-auto mt-10 max-w-4xl">
      <div class="flex items-center justify-between text-[0.72rem] font-semibold uppercase tracking-[0.16em] text-[var(--ws-steps-text-soft)]">
        <span>Briefing</span>
        <span>Launch</span>
      </div>
      <div class="ws-progress-line mt-3"></div>
    </div>

    <div class="mt-12 grid gap-5 lg:grid-cols-4">
      <article class="ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]">01</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Frame the scope</h3>
        <p class="mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]">Align on the essentials first, so the sequence starts with a clear decision boundary.</p>
      </article>

      <article class="ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]">02</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Build the flow</h3>
        <p class="mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]">Turn the structure into a usable sequence instead of a flat list of equally loud steps.</p>
      </article>

      <article class="ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]">03</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Refine the cues</h3>
        <p class="mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]">Use the progress line and the staged reveal to make the reading order feel obvious.</p>
      </article>

      <article class="ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]">04</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Ship the section</h3>
        <p class="mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]">Keep the interaction small, readable and easy to wire to a single viewport trigger.</p>
      </article>
    </div>
  </div>
</section>