@keyframes draw {
    from {
        stroke-dasharray: 0, 100;
        stroke-dashoffset: 100;
        opacity: 1; /* Ensure visibility at start */
    }
    to {
        stroke-dasharray: 100, 0;
        stroke-dashoffset: 0;
        opacity: 0; /* Hide stroke paths at the end */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start hidden */
    }
    to {
        opacity: 1; /* Show after stroke animation completes */
    }
}

.initial-spinner {
    display: none;
}

#root:empty ~ .initial-spinner {
    display: flex;
    position: fixed;
    inset: 0;
    justify-content: center;
    align-items: center;
    z-index: 1000000;
}

/* Stroke Paths (Initial Animation) */
.animate-spinner {
    .animate-stroke {
        animation: draw 2s ease-in-out alternate infinite;
    }

    /* Original Paths (Show After Animation) */
    .original-path {
        opacity: 0; /* Initially hidden */
        animation: fadeIn 2s cubic-bezier(1, -0.61, 0.29, 0.34) alternate
            infinite;
    }
}