.stepper li.active span {
    position: relative;
    animation: activeStepPulse 1.55s ease-in-out infinite;
}

.stepper li.active span::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 2px solid rgba(201, 0, 18, .34);
    border-radius: 50%;
    animation: activeStepRipple 1.55s ease-out infinite;
    pointer-events: none;
}

.stepper li.done span {
    animation: completedStepPop .42s ease both;
}

@keyframes activeStepPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(201, 0, 18, .10), 0 5px 14px rgba(201, 0, 18, .20);
    }
    50% {
        transform: scale(1.09);
        box-shadow: 0 0 0 8px rgba(201, 0, 18, .16), 0 7px 20px rgba(201, 0, 18, .30);
    }
}

@keyframes activeStepRipple {
    0% {
        opacity: .9;
        transform: scale(.82);
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes completedStepPop {
    0% { transform: scale(.72); }
    65% { transform: scale(1.13); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .stepper li.active span,
    .stepper li.active span::after,
    .stepper li.done span {
        animation: none;
    }
}