/* =========================================================
   PAMORA LUXURY PRELOADER
========================================================= */

.pamora-preloader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    width: 100%;
    height: 100dvh;

    overflow: hidden;

    background: #e8dfd2;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 800ms cubic-bezier(.2,.8,.2,1),
        visibility 800ms ease;
}


/* =========================================================
   HIDDEN
========================================================= */

.pamora-preloader.is-loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND
========================================================= */

.pamora-loader-background {

    position: absolute;

    inset: -4%;

    background-image:
        url('../images/pamora-loader-bg.jpg');

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    transform: scale(1.04);

    animation:
        pamora-loader-zoom 8s
        cubic-bezier(.2,.8,.2,1)
        infinite alternate;
}


/* =========================================================
   COLOR OVERLAY
========================================================= */

.pamora-preloader::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.02) 45%,
            rgba(12,21,18,.07)
        );

    pointer-events: none;
}


/* =========================================================
   LIGHT SWEEP
========================================================= */

.pamora-loader-light {

    position: absolute;

    top: -20%;

    left: -40%;

    width: 40%;

    height: 140%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform:
        rotate(12deg)
        translateX(-100%);

    filter: blur(16px);

    animation:
        pamora-loader-light-sweep
        5s
        cubic-bezier(.2,.8,.2,1)
        infinite;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.pamora-loader-content {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    width: min(520px, 82%);

    transform: translate(-50%, -50%);

    text-align: center;

    animation:
        pamora-loader-content-in
        1000ms
        cubic-bezier(.2,.8,.2,1)
        both;
}


/* =========================================================
   BRAND
========================================================= */

.pamora-loader-brand {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    opacity: 0;

    animation:
        pamora-loader-brand
        1200ms
        250ms
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


.pamora-loader-brand img {

    width: 150px;

    max-width: 55vw;

    height: auto;

    display: block;
}


.pamora-loader-brand span {

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .28em;

    color: var(--pamora-ink);

    opacity: .7;
}


/* =========================================================
   PROGRESS AREA
========================================================= */

.pamora-loader-progress {

    position: relative;

    width: min(390px, 100%);

    margin: 52px auto 0;

    opacity: 0;

    animation:
        pamora-loader-progress-in
        1000ms
        500ms
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


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

.pamora-loader-line {

    position: relative;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(10,58,44,.08),
            rgba(10,58,44,.28),
            rgba(10,58,44,.08)
        );

    overflow: visible;
}


.pamora-loader-line-fill {

    position: absolute;

    left: 0;
    top: 0;

    width: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c69845,
            #f4d68d
        );

    box-shadow:
        0 0 12px rgba(212,173,98,.5);

    transition:
        width 120ms linear;
}


/* =========================================================
   MOVING GOLD ORB
========================================================= */

.pamora-loader-orb {

    position: absolute;

    top: 50%;

    left: 0;

    width: 12px;
    height: 12px;

    margin-top: -6px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #f6e7b5 24%,
            #d4ad62 52%,
            #9c7535 100%
        );

    box-shadow:
        0 0 0 1px rgba(255,255,255,.55),
        0 0 16px rgba(212,173,98,.45);

    transform:
        translateX(0);

    transition:
        transform 120ms linear;
}


/* =========================================================
   STATUS
========================================================= */

.pamora-loader-status {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 8px;

    letter-spacing: .22em;

    color: var(--pamora-ink);

    opacity: 0;

    animation:
        pamora-loader-status-in
        900ms
        700ms
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


.pamora-loader-percentage {

    opacity: .48;

    min-width: 30px;

    text-align: left;
}


/* =========================================================
   EXIT CURTAIN
========================================================= */

.pamora-loader-exit {

    position: absolute;

    inset: 0;

    z-index: 20;

    background: var(--pamora-emerald);

    transform:
        translateY(100%);

    pointer-events: none;
}


.pamora-preloader.is-exiting
.pamora-loader-exit {

    animation:
        pamora-loader-exit
        900ms
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


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

@keyframes pamora-loader-zoom {

    from {

        transform:
            scale(1.04);

    }

    to {

        transform:
            scale(1.10);

    }

}


@keyframes pamora-loader-light-sweep {

    0% {

        transform:
            rotate(12deg)
            translateX(-160%);

        opacity: 0;

    }

    18% {

        opacity: .8;

    }

    50% {

        opacity: 1;

    }

    82% {

        opacity: .5;

    }

    100% {

        transform:
            rotate(12deg)
            translateX(500%);

        opacity: 0;

    }

}


@keyframes pamora-loader-content-in {

    from {

        opacity: 0;

        transform:
            translate(-50%, -46%);

    }

    to {

        opacity: 1;

        transform:
            translate(-50%, -50%);

    }

}


@keyframes pamora-loader-brand {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes pamora-loader-progress-in {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes pamora-loader-status-in {

    from {

        opacity: 0;

        transform:
            translateY(10px);

    }

    to {

        opacity: .72;

        transform:
            translateY(0);

    }

}


@keyframes pamora-loader-exit {

    from {

        transform:
            translateY(100%);

    }

    to {

        transform:
            translateY(-100%);

    }

}


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

@media (max-width: 767px) {

    .pamora-loader-background {

        background-position:
            58% center;

        transform: scale(1.06);
    }


    .pamora-loader-content {

        width: calc(100% - 48px);
    }


    .pamora-loader-brand img {

        width: 125px;
    }


    .pamora-loader-brand span {

        font-size: 7px;

        letter-spacing: .20em;
    }


    .pamora-loader-progress {

        width: 100%;

        margin-top: 42px;
    }


    .pamora-loader-status {

        margin-top: 17px;

        font-size: 7px;
    }

}


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

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

    .pamora-loader-background,
    .pamora-loader-light,
    .pamora-loader-brand,
    .pamora-loader-progress,
    .pamora-loader-status {

        animation: none;
    }

}