Upload Success Checkmark

<div class="nuda-success" role="status" aria-label="Upload complete">
  <svg class="nuda-success__svg" viewBox="0 0 52 52" aria-hidden="true">
    <circle class="nuda-success__circle"
            cx="26" cy="26" r="24" fill="none"
            stroke="currentColor" stroke-width="2.5" />
    <path class="nuda-success__check"
          d="M14 27 L23 36 L39 18" fill="none"
          stroke="currentColor" stroke-width="3.5"
          stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  <p class="nuda-success__label">Uploaded</p>
</div>

/* Upload Success Checkmark
   Circle draws, then check draws, then label fades in. */

.nuda-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #6ee7b7;
}

.nuda-success__svg { width: 52px; height: 52px; }

.nuda-success__circle {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: nuda-success-circle 0.6s ease forwards;
}

.nuda-success__check {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: nuda-success-check 0.4s ease 0.5s forwards;
}

.nuda-success__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6ee7b7;
  opacity: 0;
  animation: nuda-success-label 0.3s ease 0.8s forwards;
}

@keyframes nuda-success-circle { to { stroke-dashoffset: 0; } }
@keyframes nuda-success-check  { to { stroke-dashoffset: 0; } }
@keyframes nuda-success-label  { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-success__circle,
  .nuda-success__check {
    animation: none;
    stroke-dashoffset: 0;
  }
  .nuda-success__label { animation: none; opacity: 1; }
}