@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 */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes power-move-layer {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    } /* fade in */
    80% {
        opacity: 1;
    } /* hold */
    100% {
        opacity: 0;
    } /* fade out */
}

.animate-power-move path {
    opacity: 0;
    animation: power-move-layer 2.4s ease-in-out infinite;
}

.animate-power-move path:nth-child(1) {
    animation-delay: 0s;
}
.animate-power-move path:nth-child(2) {
    animation-delay: 0.2s;
}
.animate-power-move path:nth-child(3) {
    animation-delay: 0.4s;
}
.animate-power-move path:nth-child(4) {
    animation-delay: 0.6s;
}
.animate-power-move path:nth-child(5) {
    animation-delay: 0.8s;
}
.animate-power-move path:nth-child(6) {
    animation-delay: 1s;
}

.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;
    }
}

@keyframes power-move-layer {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.animate-power-move path {
    opacity: 0;
    animation: power-move-layer 2.4s ease-in-out infinite;
}

.animate-power-move path:nth-child(1) {
    animation-delay: 0s;
}
.animate-power-move path:nth-child(2) {
    animation-delay: 0.2s;
}
.animate-power-move path:nth-child(3) {
    animation-delay: 0.4s;
}
.animate-power-move path:nth-child(4) {
    animation-delay: 0.6s;
}
.animate-power-move path:nth-child(5) {
    animation-delay: 0.8s;
}
.animate-power-move path:nth-child(6) {
    animation-delay: 1s;
}