@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: rotate(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(90deg);
    }
}

@keyframes rotate1 {
    0% {
        transform: rotate3d(0, 1, 0, 0) scale(0);
    }

    100% {
        transform: rotate3d(0, 1, 0, 180deg) scale(1);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate3d(1, 0, 0, 0) scale(0);
    }

    100% {
        transform: rotate3d(1, 0, 0, -360deg) scale(1);
    }
}

@keyframes loader-slide {
    0% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(-30%);
    }

    100% {
        transform: translateY(-100%);
        display: none;
    }
}

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.loader-wrapper path {
    fill: transparent;
    stroke-width: 2;
    stroke: white;
    stroke-dasharray: 2090;
    stroke-dashoffset: 2090;
    animation: gacor 2.4s linear infinite;
}

.loader-wrapper svg {
    filter: drop-shadow(0 0 5px #000000) drop-shadow(0 0 10px #cccab29a);
    transform: scale(0.2);
}

@keyframes gacor {
    0% {
        stroke-dashoffset: 0;
        fill: white;
    }

    30% {
        fill: transparent;
    }

    40% {
        stroke-dashoffset: 2090;
        fill: transparent;
    }

    80% {
        stroke-dashoffset: 4180;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 4180;
        fill: white;
    }
}

.loader-wrapper.hide {
    transform: translateY(-100%);
    animation: loader-slide 1s forwards;
}