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

.loader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#0b0b0b;

    z-index:99999;

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

}

.loader::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle,
            rgba(255,212,0,.05),
            transparent 65%
        );

}

.loader.hide{

    opacity:0;
    visibility:hidden;

}

.loader-content{

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

}

.loader-logo{

    width:clamp(72px, 10vw, 120px);

    transform-origin:center;

    animation:
        logoIntro .9s cubic-bezier(.22,1,.36,1),
        logoFloat 3s ease-in-out infinite,
        logoGlow 2.2s ease-in-out infinite;

}

.loader-text{

    margin-top:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:var(--font-title);

    font-size:clamp(.68rem, 2vw, .9rem);

    letter-spacing:.22em;

    color:#d6d6d6;

    min-height:20px;

}

.loader-cursor{

    margin-left:4px;

    color:var(--color-primary);

    animation:blink .8s infinite;

}

@keyframes blink{

    0%,45%{

        opacity:1;

    }

    50%,100%{

        opacity:0;

    }

}

@keyframes logoIntro{

    from{

        opacity:0;

        transform:
            scale(.72)
            rotate(-8deg);

        filter:blur(6px);

    }

    to{

        opacity:1;

        transform:
            scale(1)
            rotate(0);

        filter:blur(0);

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes logoGlow{

    0%,
    100%{

        filter:
            drop-shadow(0 0 0 rgba(255,212,0,0));

    }

    50%{

        filter:
    drop-shadow(0 0 8px rgba(255,212,0,.20))
    drop-shadow(0 0 18px rgba(255,212,0,.12));

    }

}

/*=========================================
    BODY LOADING
=========================================*/

body.loading{

    overflow:hidden;

}

/*=========================================
    PROGRESS BAR
=========================================*/

.loader-progress{

    width:clamp(145px, 28vw, 220px);

    height:4px;

    margin-top:32px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

}

.loader-bar{

    display:block;

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #FFD400,
        #FFE873
    );

    box-shadow:
        0 0 20px rgba(255,212,0,.45);

    transition:width .25s ease;

}


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

.loader-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.loader-code{

    position:absolute;

    font-family:monospace;

    font-size:.85rem;

    color:rgba(255,212,0,.05);

    white-space:nowrap;

    animation:codeFloat linear infinite;

    user-select:none;

}

@keyframes codeFloat{

    from{

        transform:
            translateY(30px);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        transform:
            translateY(-120vh);

        opacity:0;

    }

}


/*=========================================
    TABLET
=========================================*/

@media (max-width: 992px){

    .loader-logo{

        width:100px;

    }

    .loader-text{

        margin-top:24px;

        font-size:.85rem;

        letter-spacing:.18em;

    }

    .loader-progress{

        width:200px;

        margin-top:28px;

    }

}

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

@media (max-width: 576px){

    .loader-logo{

        width:82px;

    }

    .loader-text{

        margin-top:20px;

        font-size:.75rem;

        letter-spacing:.14em;

    }

    .loader-progress{

        width:170px;

        height:3px;

        margin-top:22px;

    }

    .loader-code{

        font-size:.65rem;

    }

}

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

@media (max-width: 380px){

    .loader-logo{

        width:72px;

    }

    .loader-text{

        margin-top:18px;

        font-size:.68rem;

        letter-spacing:.10em;

    }

    .loader-progress{

        width:145px;

        margin-top:18px;

    }

}