Sparkle Divider

<div class="nuda-sparkle-divider" role="separator" aria-hidden="true">
  <div class="nuda-sparkle-divider__line"></div>
  <div class="nuda-sparkle-divider__sparkle"></div>
  <div class="nuda-sparkle-divider__line"></div>
</div>

/* Sparkle Divider
   Divider with a glowing moving sparkle in the center.
   Customize: --sparkle-color, --sparkle-size */

.nuda-sparkle-divider {
  --sparkle-color: #e4ff54;
  --sparkle-size: 6px;
  display: flex;
  align-items: center;
  width: 100%;
}

.nuda-sparkle-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 255, 84, 0.3));
}

.nuda-sparkle-divider__line:last-child {
  background: linear-gradient(90deg, rgba(228, 255, 84, 0.3), transparent);
}

.nuda-sparkle-divider__sparkle {
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  background: var(--sparkle-color);
  border-radius: 50%;
  box-shadow:
    0 0 8px var(--sparkle-color),
    0 0 16px var(--sparkle-color);
  animation: nuda-sparkle-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes nuda-sparkle-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-sparkle-divider__sparkle {
    animation: none;
    opacity: 0.7;
  }
}