@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: translateX(0);
    }

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

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

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

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

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

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

    30% {
        fill: transparent;
    }

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

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

    100% {
        stroke-dashoffset: 4180;
        fill: #CCCAB2;
    }
}

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

.star {
    position: absolute;
    top: calc(50% - 96px);
    left: calc(50% - 75px);
    fill: white;
    transform-origin: 40% 90%;
    animation: fade-in-out 2s infinite;
}

.star .large {
    transform-origin: 50% 50%;
    transform-style: preserve3d;
    animation: rotate1 2s infinite;
}

.star .large-2 {
    transform: rotate(45deg) scale(0.8);
    transform-origin: 33px 33px;
}

.star .small {
    transform-origin: 50% 50%;
    transform-style: preserve3d;
    animation: rotate2 2s infinite;
}

.star .small-1 {
    transform: rotate(45deg) scale(0.667);
    transform-origin: 33px 33px;
}

@media screen and (max-width:1090px){

}