/* Slow rotation (so the sweep is visible) */
@keyframes spin-slow {
    100% {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 1.5s linear infinite;
}

/* Grow + shrink arc */
.spinner-path {
    stroke-dasharray: 1, 150; /* arc length, gap */
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150; /* arc grows */
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 1, 150; /* arc shrinks */
        stroke-dashoffset: -125;
    }
}