/* Checkmark draw */
.checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-check 400ms ease-out forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Success with scale */
.success-icon {
  animation: success 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Error shake */
.error-shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Inline validation */
.field-valid {
  animation: valid-pop 200ms ease-out;
}

@keyframes valid-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

<svg class="checkmark" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#10B981"/>
  <path
    class="check-path"
    d="M7 13l3 3 7-7"
    stroke="white"
    stroke-width="2"
    fill="none"
  />
</svg>

// Show success, auto-hide
element.classList.add('success-visible');

setTimeout(() => {
  element.classList.remove('success-visible');
  element.classList.add('success-hidden');
}, 3000);