Verified Checkmark Badge

<div class="nuda-verified">
  <span class="nuda-verified__name">Mira Vale</span>
  <span class="nuda-verified__badge" aria-label="Verified">
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path class="nuda-verified__star"
        d="M12 1.5l2 3 3.4-.5 1 3.3 3.1 1.7-1.7 3 1.7 3-3.1 1.7
           -1 3.3-3.4-.5-2 3-2-3-3.4.5-1-3.3L1.5 15l1.7-3-1.7-3
           L4.6 7.3l1-3.3 3.4.5 2-3Z"
        fill="currentColor"/>
      <path class="nuda-verified__check" d="M7.5 12.2l3 3 6-6"
        fill="none" stroke="#09090b" stroke-width="2.2"
        stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
</div>

/* Verified Checkmark Badge
   Animated star that pops in then draws a check.
   Customize: --c (badge color) */

.nuda-verified {
  --c: #62b6ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fafafa;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}

.nuda-verified__badge {
  display: inline-flex;
  color: var(--c);
  animation: nuda-verified-pop 0.5s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}

.nuda-verified__star {
  transform-origin: center;
  animation: nuda-verified-spin 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.nuda-verified__check {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: nuda-verified-draw 0.5s ease-out 0.35s forwards;
}

@keyframes nuda-verified-pop  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes nuda-verified-spin { from { transform: rotate(-90deg) scale(0.6); } to { transform: rotate(0) scale(1); } }
@keyframes nuda-verified-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-verified__badge,
  .nuda-verified__star { animation: none; }
  .nuda-verified__check { animation: none; stroke-dashoffset: 0; }
}