.loader-wrapper{
    position:fixed;
    inset:0;
    z-index:99999;

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

    gap:4vh;

    padding:20px;

    text-align:center;

    background:url("https://filipiak.xaa.pl/ola/public/images/background.jpg")
              center center no-repeat;
    background-size:cover;

    font-family:'Poppins',sans-serif;

    transition:opacity .6s ease;
}

/* logo */

.loader-logo{
    width:min(450px,90vw);

    display:block;
}


/* środek */

.loader-content{

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

    gap:2vh;
}


/* procent */

.loader-percent{

    font-family:'Playfair Display',serif;

    font-size:clamp(45px,8vw,65px);

    color:#a77d63;
}


/* pasek */

.loader-progress{

    width:min(350px,80vw);

    height:8px;

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

    border-radius:30px;

    overflow:hidden;
}

.loader-progress-fill{

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #b68d74,
        #cda78d,
        #e5c7af
    );

    transition:.3s;
}


/* ŁADOWANIE */

.loader-text1{

    font-size:clamp(20px,4vw,30px);

    letter-spacing:clamp(4px,1vw,10px);

    color:#9f7b63;
}


/* PROSZĘ CZEKAĆ */

.loader-text2{

    font-size:clamp(13px,2.5vw,18px);

    letter-spacing:clamp(2px,.5vw,5px);

    color:#8e7c72;
}


/* przycisk */

.loader-text3 a{

    display:inline-block;

    padding:
        clamp(12px,2vw,16px)
        clamp(20px,4vw,32px);

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

    border:1px solid rgba(180,132,104,.5);

    border-radius:40px;

    text-decoration:none;

    color:#a7775d;

    font-size:clamp(14px,2.5vw,18px);

    letter-spacing:clamp(1px,.5vw,3px);

    font-weight:500;

    box-shadow:
        0 5px 25px rgba(180,132,104,.15);

    backdrop-filter:blur(10px);

    transition:.3s;
}

.loader-text3 a:hover{

    background:#b88d73;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 10px 30px rgba(180,132,104,.3);
}


/* TABLETY */

@media(max-width:768px){

    .loader-wrapper{
        gap:30px;
    }

    .loader-logo{
        width:70vw;
        max-width:320px;
    }

    .loader-progress{
        width:80vw;
        max-width:320px;
    }

}


/* TELEFONY */

@media(max-width:480px){

    .loader-wrapper{
        gap:20px;
    }

    .loader-logo{
        width:75vw;
    }

    .loader-progress{
        width:85vw;
    }

    .loader-content{
        gap:12px;
    }

    .loader-text1{

        font-size:18px;

        letter-spacing:4px;
    }

    .loader-text2{

        font-size:12px;

        letter-spacing:2px;
    }

    .loader-text3 a{

        width:100%;
        max-width:280px;

        padding:14px 20px;

        font-size:14px;

        letter-spacing:2px;
    }

}


/* NISKIE OKNA PRZEGLĄDARKI */

@media(max-height:750px){

    .loader-wrapper{

        justify-content:flex-start;

        padding-top:25px;

        gap:20px;
    }

    .loader-logo{

        width:min(300px,70vw);
    }

    .loader-content{

        gap:10px;
    }

}