Five-star Rating Card

<article class="nuda-rating-card">
  <div class="nuda-rating-card__stars" aria-label="5 out of 5 stars">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <!-- repeat 4 more times -->
  </div>
  <p class="nuda-rating-card__quote">
    Genuinely the best dev tool I've used in a decade. It just gets out of my way.
  </p>
  <div class="nuda-rating-card__author">
    <div class="nuda-rating-card__avatar" aria-hidden="true">JT</div>
    <span>Jordan T. &middot; Verified Buyer</span>
  </div>
</article>

/* Five-star Rating Card
   Stars pop in sequentially on first paint. */

.nuda-rating-card {
  max-width: 380px;
  padding: 1.5rem;
  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-rating-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 1rem;
}

.nuda-rating-card__stars svg {
  width: 18px;
  height: 18px;
  fill: #ffb45e;
  opacity: 0;
  animation: nuda-rc-star 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nuda-rating-card__stars svg:nth-child(1) { animation-delay: 0.05s; }
.nuda-rating-card__stars svg:nth-child(2) { animation-delay: 0.10s; }
.nuda-rating-card__stars svg:nth-child(3) { animation-delay: 0.15s; }
.nuda-rating-card__stars svg:nth-child(4) { animation-delay: 0.20s; }
.nuda-rating-card__stars svg:nth-child(5) { animation-delay: 0.25s; }

@keyframes nuda-rc-star {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.nuda-rating-card__quote {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #fafafa;
}

.nuda-rating-card__author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: #a0a0a8;
}

.nuda-rating-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb45e, #ff5e7a);
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0c0c10;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-rating-card__stars svg {
    animation: none;
    opacity: 1;
  }
}