@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800&display=swap');

#logo{
display:inline-block;
position:relative;
}

#logo-text{
font-family:'Montserrat',sans-serif;
font-size:20px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
color:#fff;
white-space:nowrap;
border-right:3px solid #48c7ff;
padding-right:4px;
animation: cursorBlink .8s step-end infinite;
text-shadow:0 0 8px rgba(72,199,255,.15);
}

@keyframes cursorBlink{
50%{border-color:transparent;}
}

#logo-subtitle{
display:block;
margin-top:1px;
font-family:'Montserrat',sans-serif;
font-size:8.5px;
font-weight:500;
letter-spacing:3px;
text-transform:uppercase;
color:#6CCEFF;
opacity:0;
transform:translateY(8px);
transition:all .8s ease;
}

#logo-subtitle.show{
opacity:1;
transform:translateY(0);
}

#logo.flash{
animation:flash 1.4s ease;
}

@keyframes flash{
0%{filter:brightness(1)}
50%{filter:brightness(1.5);text-shadow:0 0 10px #48c7ff,0 0 25px #48c7ff;}
100%{filter:brightness(1)}
}


#logo{
    position:relative;
    overflow:hidden;
}

#logo::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);
}

#logo.flash::before{
    animation:shine 1.4s ease;
}

@keyframes shine{

    from{
        left:-120%;
    }

    to{
        left:180%;
    }

}