.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000005d;
    z-index: 999999;
}

#loading-svg {
    display: block;
    margin: 0 auto;
    animation: fadeInAndScale 4s infinite;
}

svg path {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInAndScale {
    0% {
        opacity: 0;
        transform: scale(1);
    }

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

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

    70% {
        opacity: 1;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Sequential Fade-In for Paths */
#path1 {
    animation: fadeIn 1s 0s forwards;
}

#path2 {
    animation: fadeIn 1s 0.5s forwards;
}

#path3 {
    animation: fadeIn 1s 1s forwards;
}

#path4 {
    animation: fadeIn 1s 1.5s forwards;
}

#loading-svg {
    animation: fadeInAndScale 4s infinite;
}


/* loading 2 */
/* HTML: <div class="loader"></div> */
.loader {
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #0D3D35 80%),
        radial-gradient(var(--r1) var(--r2) at bottom, #0D3D35 79.5%, #0000 80%),
        radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #0D3D35 80%),
        #FAC682;
    background-size: 50.5% 220%;
    background-position: -100% 0%, 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    animation: l9 4s infinite linear;
}

@keyframes l9 {
    0% {
        background-position: 0% 0%, 100% 0%, 200% 0%;
    }

    16% {
        background-position: 0% 33%, 100% 33%, 200% 33%;
    }

    33% {
        background-position: -100% 66%, 0% 66%, 100% 66%;
    }

    50% {
        background-position: 0% 100%, 100% 100%, 200% 100%;
    }

    66% {
        background-position: -100% 66%, 0% 66%, 100% 66%;
    }

    83% {
        background-position: 0% 33%, 100% 33%, 200% 33%;
    }

    100% {
        background-position: 0% 0%, 100% 0%, 200% 0%;
    }
}