Quote Carousel

<div class="nuda-quote-carousel" aria-label="Testimonial carousel">
  <div class="nuda-quote-carousel__viewport">
    <article class="nuda-quote-carousel__slide" data-slide="1">
      <p>&ldquo;Our team adopted it in a single afternoon.&rdquo;</p>
      <footer>Ben Liu &middot; CTO, Lumen</footer>
    </article>
    <article class="nuda-quote-carousel__slide" data-slide="2">
      <p>&ldquo;The most polished tool I've shipped in years.&rdquo;</p>
      <footer>Imani O. &middot; Design Lead</footer>
    </article>
    <article class="nuda-quote-carousel__slide" data-slide="3">
      <p>&ldquo;Honestly couldn't go back to the old way.&rdquo;</p>
      <footer>Pat W. &middot; Founder</footer>
    </article>
  </div>
  <div class="nuda-quote-carousel__dots" aria-hidden="true">
    <span></span><span></span><span></span>
  </div>
</div>

/* Quote Carousel
   Pure-CSS auto-rotating testimonials with active dot indicator. */

.nuda-quote-carousel {
  max-width: 400px;
  padding: 1.25rem;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fafafa;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-quote-carousel__viewport {
  position: relative;
  height: 108px;
  overflow: hidden;
}

.nuda-quote-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: nuda-qc-slide 12s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.nuda-quote-carousel__slide[data-slide="1"] { animation-delay: 0s; }
.nuda-quote-carousel__slide[data-slide="2"] { animation-delay: 4s; }
.nuda-quote-carousel__slide[data-slide="3"] { animation-delay: 8s; }

.nuda-quote-carousel__slide p {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.55;
}

.nuda-quote-carousel__slide footer {
  font-size: 0.75rem;
  color: #a0a0a8;
}

@keyframes nuda-qc-slide {
  0%, 2%    { opacity: 0; transform: translateY(8px); }
  8%, 30%   { opacity: 1; transform: translateY(0); }
  36%, 100% { opacity: 0; transform: translateY(-8px); }
}

.nuda-quote-carousel__dots {
  display: flex;
  gap: 6px;
  margin-top: 0.75rem;
  justify-content: center;
}

.nuda-quote-carousel__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: nuda-qc-dot 12s linear infinite;
}

.nuda-quote-carousel__dots span:nth-child(1) { animation-delay: 0s; }
.nuda-quote-carousel__dots span:nth-child(2) { animation-delay: 4s; }
.nuda-quote-carousel__dots span:nth-child(3) { animation-delay: 8s; }

@keyframes nuda-qc-dot {
  0%, 33%   { background: #e4ff54; width: 18px; border-radius: 3px; }
  34%, 100% { background: rgba(255, 255, 255, 0.15); width: 6px; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-quote-carousel__slide,
  .nuda-quote-carousel__dots span { animation: none; }
  .nuda-quote-carousel__slide[data-slide="1"] {
    opacity: 1;
    transform: none;
  }
}