/* From Uiverse.io by Tsiangana */
.dot-spinner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    --uib-speed: 0.9s;
    height: 2.8rem;
    width: 2.8rem;
}

/* Optional floating animation (disabled by default) */
@keyframes float {
    0% {
        transform: rotate(0deg) translate(100px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translate(100px) rotate(-360deg);
    }
}

.dot-spinner__dot::before {
    content: '';
    height: 20%;
    width: 20%;
    border-radius: 50%;
    background-color: #ff0000; /* bright red */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), /* soft white glow */
    0 0 30px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 0, 0, 0.6); /* subtle red outer glow */
    transform: scale(0);
    opacity: 0.7;
    animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
}

.dot-spinner__dot {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}

    /* Spinner rotation sequence */
    .dot-spinner__dot:nth-child(2) {
        transform: rotate(45deg);
    }

    .dot-spinner__dot:nth-child(3) {
        transform: rotate(90deg);
    }

    .dot-spinner__dot:nth-child(4) {
        transform: rotate(135deg);
    }

    .dot-spinner__dot:nth-child(5) {
        transform: rotate(180deg);
    }

    .dot-spinner__dot:nth-child(6) {
        transform: rotate(225deg);
    }

    .dot-spinner__dot:nth-child(7) {
        transform: rotate(270deg);
    }

    .dot-spinner__dot:nth-child(8) {
        transform: rotate(315deg);
    }

    /* Animation delays for smoother flow */
    .dot-spinner__dot:nth-child(2)::before {
        animation-delay: calc(var(--uib-speed) * -0.875);
    }

    .dot-spinner__dot:nth-child(3)::before {
        animation-delay: calc(var(--uib-speed) * -0.75);
    }

    .dot-spinner__dot:nth-child(4)::before {
        animation-delay: calc(var(--uib-speed) * -0.625);
    }

    .dot-spinner__dot:nth-child(5)::before {
        animation-delay: calc(var(--uib-speed) * -0.5);
    }

    .dot-spinner__dot:nth-child(6)::before {
        animation-delay: calc(var(--uib-speed) * -0.375);
    }

    .dot-spinner__dot:nth-child(7)::before {
        animation-delay: calc(var(--uib-speed) * -0.25);
    }

    .dot-spinner__dot:nth-child(8)::before {
        animation-delay: calc(var(--uib-speed) * -0.125);
    }

@keyframes pulse0112 {
    0%, 100% {
        transform: scale(0);
        opacity: 0.4;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}