Quote Marquee

<div class="nuda-quote-marquee" aria-label="Customer quotes">
  <div class="nuda-quote-marquee__track">
    <span class="nuda-quote-marquee__item">Best in class — Lina K.</span>
    <span class="nuda-quote-marquee__item">Saved us 12 hours/week — Devin O.</span>
    <span class="nuda-quote-marquee__item">Just works. — Aki M.</span>
    <span class="nuda-quote-marquee__item">Felt like cheating. — Sara P.</span>
    <span class="nuda-quote-marquee__item">Worth every penny. — Noah F.</span>
    <!-- Duplicate the same items once more for a seamless loop -->
  </div>
</div>

/* Quote Marquee
   Infinite horizontal scroll of short testimonials.
   Duplicate the content once in the markup so the loop is seamless. */

.nuda-quote-marquee {
  max-width: 480px;
  overflow: hidden;
  padding: 1rem 0;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-quote-marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: nuda-quote-marquee 24s linear infinite;
}

.nuda-quote-marquee__item {
  font-size: 0.875rem;
  color: #a0a0a8;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nuda-quote-marquee__item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e4ff54;
  flex-shrink: 0;
}

@keyframes nuda-quote-marquee {
  to { transform: translateX(-50%); }
}

.nuda-quote-marquee:hover .nuda-quote-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-quote-marquee__track { animation: none; }
}