.success-checkmark {
    width: 56px;
    height: 56px;
    animation: checkmark-pop 0.35s cubic-bezier(0.12, 0.8, 0.32, 1.2) 0.15s both;
}

.success-checkmark .checkmark-check {
    stroke: var(--color-primary);
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
}

@keyframes checkmark-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-pop {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}