/* ==================================================
   NightCast Splash Screen V1
   File : /css/splash.css
   ================================================== */

:root{

    --bg:#0b1220;
    --bg2:#121c2d;
    --card:#172235;

    --primary:#00d4ff;
    --primary2:#5ce1ff;

    --white:#ffffff;
    --text:#d8e5f0;
    --muted:#8ea5bb;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:var(--bg);

    font-family:
    Tahoma,
    sans-serif;

}

body{

    color:var(--white);

}

.splash{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:

    radial-gradient(
        circle at top,
        #16233d 0%,
        #0b1220 70%
    );

}

/* ========================= */

.background-glow{

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:

    rgba(0,212,255,.08);

    filter:blur(90px);

    animation:

    glowMove 5s ease-in-out infinite;

}

@keyframes glowMove{

    0%{

        transform:
        scale(.9);

    }

    50%{

        transform:
        scale(1.15);

    }

    100%{

        transform:
        scale(.9);

    }

}

/* ========================= */

.logo-wrapper{

    position:relative;

    z-index:5;

    text-align:center;

}

.logo-circle{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    background:

    rgba(255,255,255,.04);

    border:

    2px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    animation:

    pulse 2.2s infinite;

}

.logo-circle svg{

    width:56px;
    height:56px;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        box-shadow:

        0 0 0 rgba(0,212,255,.35);

    }

    50%{

        transform:scale(1.05);

        box-shadow:

        0 0 35px rgba(0,212,255,.35);

    }

    100%{

        transform:scale(1);

        box-shadow:none;

    }

}

/* ========================= */

.logo-wrapper h1{

    margin-top:24px;

    font-size:38px;

    font-weight:700;

    letter-spacing:.5px;

}

.logo-wrapper h1 span{

    color:var(--primary);

}

.logo-wrapper p{

    margin-top:10px;

    color:var(--muted);

    font-size:15px;

}

/* ========================= */

.loader{

    width:260px;

    margin-top:55px;

    position:relative;

    z-index:5;

}

.loader-bar{

    width:100%;

    height:7px;

    overflow:hidden;

    border-radius:50px;

    background:

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

}

.loader-bar span{

    display:block;

    width:0;

    height:100%;

    border-radius:50px;

    background:

    linear-gradient(
        90deg,
        #00d4ff,
        #5ce1ff
    );

    animation:

    loading 1.8s ease forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

.loader small{

    display:block;

    text-align:center;

    margin-top:15px;

    color:var(--muted);

    font-size:13px;

}

/* ========================= */

.version{

    position:absolute;

    bottom:30px;

    color:#667b93;

    font-size:12px;

    letter-spacing:1px;

}

/* ========================= */

@media(max-width:768px){

.logo-circle{

    width:95px;

    height:95px;

}

.logo-wrapper h1{

    font-size:32px;

}

.loader{

    width:220px;

}

}

@media(max-width:480px){

.logo-wrapper h1{

    font-size:28px;

}

.logo-wrapper p{

    font-size:14px;

}

.loader{

    width:190px;

}

.version{

    bottom:20px;

}

      }