/*==========================================================
                    LOADING SCREEN
==========================================================*/

#loader{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    background:var(--cream);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .6s ease,
               visibility .6s ease;

    overflow:hidden;

}

/* Hide Loader */

#loader.hide{

    opacity:0;

    visibility:hidden;

    transform:scale(1.01);

    backdrop-filter:blur(0px);

}

#loader.hide .loader-logo{

    transform:scale(.88);

    opacity:0;

}

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

#loader::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(244,223,230,.45);

    filter:blur(120px);

    top:-120px;

    left:-100px;

}

#loader::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(232,239,207,.45);

    filter:blur(120px);

    right:-80px;

    bottom:-100px;

}

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

.loader-content{

    position:relative;

    z-index:2;

    text-align:center;

    transform:translateY(-45px);

}

/*==============================
            LOGO
==============================*/

.loader-logo{

    width:240px;

    max-width:55vw;

    margin-bottom:28px;

    animation:
        floatLogo 5s ease-in-out infinite,
        loaderGlow 4s ease-in-out infinite;

    transition:transform .7s ease,
               opacity .7s ease;

}

/*==============================
            TITLE
==============================*/

.loader-text{

    font-size:18px;

    color:var(--light-text);

    font-style:italic;

    margin-bottom:35px;

    letter-spacing:.4px;

}

/*==============================
        SUBTITLE
==============================*/

.loader-content p{

    color:var(--light-text);

    font-size:16px;

    margin-bottom:35px;

    font-style:italic;

}

/*==============================
          SPINNER
==============================*/

/*==============================
        LOADING DOTS
==============================*/

.loader-dots{

    display:flex;

    justify-content:center;

    gap:12px;

}

.loader-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--sage);

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

}

.loader-dots span:nth-child(2){

    animation-delay:.2s;

}

.loader-dots span:nth-child(3){

    animation-delay:.4s;

}

@keyframes loaderPulse{

    0%,80%,100%{

        transform:scale(.6);

        opacity:.35;

    }

    40%{

        transform:scale(1);

        opacity:1;

    }

}


@keyframes floatLogo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

@media(max-width:768px){

.loader-logo{

width:80px;

}

.loader-content h2{

font-size:34px;

}

.loader-content p{

font-size:15px;

}

}

@keyframes loaderGlow{

    0%,100%{

        filter:drop-shadow(0 0 0 rgba(151,161,59,0));

    }

    50%{

        filter:drop-shadow(0 0 14px rgba(151,161,59,.18));

    }

}