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

#loader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#08111F;

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

}

#loader.hidden{

    opacity:0;

    visibility:hidden;

}


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

.loader-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


/*==================================================
  AVATAR
==================================================*/

.loader-avatar{

    width:130px;

    height:130px;

    margin-bottom:35px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid #4F9CFF;

    box-shadow:
        0 0 35px rgba(79,156,255,.35);

    animation:float 4s ease-in-out infinite;

}

.loader-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==================================================
  NAME
==================================================*/

.loader-name{

    margin:0;

    color:white;

    font-size:2.4rem;

    font-weight:700;

    letter-spacing:8px;

    text-transform:uppercase;

}


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

.loader-title{

    margin-top:18px;

    margin-bottom:50px;

    color:#4F9CFF;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.9rem;

}


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

.loader-progress{

    width:340px;

    height:6px;

    overflow:hidden;

    border-radius:999px;

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

}

.loader-progress span{

    display:block;

    height:100%;

    width:0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #4F9CFF,
        #38BDF8
    );

    animation:progress 1.4s ease forwards;

}


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

.loader-loading{

    margin-top:22px;

    color:#94A3B8;

    letter-spacing:2px;

}


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

@keyframes progress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}