Segmented Progress

<!-- Segmented Progress Bar -->
<div class="nuda-segmented-progress" role="progressbar"
     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
     aria-label="60% complete">
  <span class="nuda-segmented-progress__seg nuda-segmented-progress__seg--filled"></span>
  <span class="nuda-segmented-progress__seg nuda-segmented-progress__seg--filled"></span>
  <span class="nuda-segmented-progress__seg nuda-segmented-progress__seg--filled"></span>
  <span class="nuda-segmented-progress__seg"></span>
  <span class="nuda-segmented-progress__seg"></span>
</div>

/* Segmented Progress Bar
   Segmented blocks filling in sequence with a gentle pulse on filled ones.
   Customize: --seg-color, --seg-track, --seg-count (via HTML spans) */

.nuda-segmented-progress {
  --seg-color: #818cf8;
  --seg-track: rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 4px;
  width: 100%;
}

.nuda-segmented-progress__seg {
  flex: 1;
  height: 10px;
  background: var(--seg-track);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.nuda-segmented-progress__seg--filled {
  background: var(--seg-color);
  animation: nuda-seg-pulse 1.5s ease-in-out infinite alternate;
  will-change: opacity;
}

.nuda-segmented-progress__seg--filled:nth-child(2) { animation-delay: 0.15s; }
.nuda-segmented-progress__seg--filled:nth-child(3) { animation-delay: 0.3s; }
.nuda-segmented-progress__seg--filled:nth-child(4) { animation-delay: 0.45s; }
.nuda-segmented-progress__seg--filled:nth-child(5) { animation-delay: 0.6s; }

@keyframes nuda-seg-pulse {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-segmented-progress__seg--filled {
    animation: none;
    opacity: 1;
  }
}