/* =========================================================
   SABRE DE PLEIADES
   PAGE LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            #0b1437 0%,
            #070d27 45%,
            #04081b 100%
        );

    opacity: 1;

    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;

}


/* =========================================================
   LOADER ORBIT
========================================================= */

.loader-orbit {

    position: relative;

    width: 110px;

    height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   CENTER CORE
========================================================= */

.loader-core {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #f0d78a;

    box-shadow:
        0 0 10px rgba(240, 215, 138, 0.9),
        0 0 30px rgba(215, 180, 90, 0.5);

    animation:
        loaderPulse 1.8s ease-in-out infinite;

}


/* =========================================================
   ORBIT RINGS
========================================================= */

.loader-ring {

    position: absolute;

    inset: 0;

    border: 1px solid
        rgba(215, 180, 90, 0.35);

    border-radius: 50%;

}


.loader-ring-one {

    transform: rotate(45deg);

    animation:
        loaderRotateOne 3s linear infinite;

}


.loader-ring-two {

    transform: rotate(-45deg) scaleY(0.55);

    border-color:
        rgba(240, 215, 138, 0.55);

    animation:
        loaderRotateTwo 2.5s linear infinite reverse;

}


/* =========================================================
   LOADER TEXT
========================================================= */

.loader-text {

    margin-top: 30px;

    color: #f0d78a;

    font-family: "Cinzel", serif;

    font-size: 0.75rem;

    font-weight: 500;

    letter-spacing: 5px;

    text-align: center;

}


/* =========================================================
   LOADING LINE
========================================================= */

.loader-line {

    width: 120px;

    height: 1px;

    margin-top: 18px;

    overflow: hidden;

    background:
        rgba(215, 180, 90, 0.15);

}


.loader-line span {

    display: block;

    width: 45%;

    height: 100%;

    background: #d7b45a;

    animation:
        loaderProgress 1.5s
        ease-in-out infinite;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes loaderPulse {

    0%,
    100% {

        transform: scale(0.8);

        opacity: 0.7;

    }

    50% {

        transform: scale(1.25);

        opacity: 1;

    }

}


@keyframes loaderRotateOne {

    from {

        transform:
            rotate(45deg)
            scale(1);

    }

    to {

        transform:
            rotate(405deg)
            scale(1);

    }

}


@keyframes loaderRotateTwo {

    from {

        transform:
            rotate(-45deg)
            scaleY(0.55);

    }

    to {

        transform:
            rotate(-405deg)
            scaleY(0.55);

    }

}


@keyframes loaderProgress {

    0% {

        transform: translateX(-120%);

    }

    50% {

        transform: translateX(180%);

    }

    100% {

        transform: translateX(300%);

    }

}


/* =========================================================
   HIDE LOADER
========================================================= */

.page-loader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 550px) {

    .loader-orbit {

        width: 90px;

        height: 90px;

    }

    .loader-text {

        font-size: 0.65rem;

        letter-spacing: 4px;

    }

    .loader-line {

        width: 100px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .loader-core,
    .loader-ring,
    .loader-line span {

        animation: none;

    }

}