Segmented Steps

<!-- Segmented Steps Progress (3 of 6 complete) -->
<div class="nuda-segmented-steps" role="progressbar"
     aria-valuenow="3" aria-valuemin="0" aria-valuemax="6"
     aria-label="Step 3 of 6">
  <span class="nuda-segmented-steps__seg is-on"></span>
  <span class="nuda-segmented-steps__seg is-on"></span>
  <span class="nuda-segmented-steps__seg is-on"></span>
  <span class="nuda-segmented-steps__seg"></span>
  <span class="nuda-segmented-steps__seg"></span>
  <span class="nuda-segmented-steps__seg"></span>
</div>

/* Segmented Steps Progress
   Multi-segment step bar; completed segments fill via scaleX in sequence.
   Add the .is-on class to a segment to mark it complete.
   Customize: --segsteps-color, --segsteps-track */

.nuda-segmented-steps {
  --segsteps-color: #e4ff54;
  --segsteps-track: rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 5px;
  width: 100%;
}

.nuda-segmented-steps__seg {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--segsteps-track);
  overflow: hidden;
  position: relative;
}

.nuda-segmented-steps__seg.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--segsteps-color);
  border-radius: 4px;
  transform-origin: left center;
  animation: nuda-segmented-steps 0.4s ease-out both;
}

.nuda-segmented-steps__seg.is-on:nth-child(2)::after { animation-delay: 0.12s; }
.nuda-segmented-steps__seg.is-on:nth-child(3)::after { animation-delay: 0.24s; }

@keyframes nuda-segmented-steps {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-segmented-steps__seg.is-on::after { animation: none; transform: scaleX(1); }
}