@keyframes success-draw {
  from { stroke-dashoffset: 1.02; }
  to { stroke-dashoffset: 0; }
}

@keyframes success-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes success-rise {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.success-check {
  animation: success-pop 400ms cubic-bezier(0.25, 0.8, 0.25, 1) 820ms both;
}

.success-check .check-circle__circle,
.success-check .check-circle__mark {
  stroke-dasharray: 1 3;
  stroke-dashoffset: 1.02;
}

.success-check .check-circle__circle {
  transform: rotate(-90deg);
  transform-origin: center;
  animation: success-draw 600ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.success-check .check-circle__mark {
  animation: success-draw 350ms cubic-bezier(0.65, 0, 0.35, 1) 500ms forwards;
}

.success-title {
  animation: success-rise 500ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
}

@media (prefers-reduced-motion: reduce) {
  .success-check,
  .success-check .check-circle__circle,
  .success-check .check-circle__mark,
  .success-title {
    animation: none;
  }

  .success-check .check-circle__circle,
  .success-check .check-circle__mark {
    stroke-dashoffset: 0;
  }
}