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

Dear Sherly
Version 1.0

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

*{

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

}

html,
body{

width:100%;
height:100%;

background:#050505;

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

overflow:hidden;

color:#fff;

}

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

#intro{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:#050505;

}

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

.intro-text{

text-align:center;

padding:40px;

}

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

#headline{

font-size:clamp(40px,7vw,88px);

font-weight:300;

letter-spacing:-2px;

opacity:0;

transform:translateY(40px);

transition:all 1.3s ease;

}

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

.show{

opacity:1!important;

transform:none!important;

}

.hide{

opacity:0!important;

transform:translateY(-30px)!important;

}

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

.fade-black{

animation:blackfade .9s ease forwards;

}

@keyframes blackfade{

from{

opacity:1;

}

to{

opacity:0;

}

}

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

LOGIN

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

#loginScreen{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:1.2s;

overflow:hidden;

}

#loginScreen.show{

opacity:1;

visibility:visible;

}

.bg{

position:absolute;

inset:0;

background-image:url("../assets/images/login-bg.webp");

background-size:cover;

background-position:center;

transform:scale(1.08);

transition:8s;

}

#loginScreen.show .bg{

transform:scale(1);

}

.overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

backdrop-filter:blur(10px);

}

.gradient{

position:absolute;

width:900px;
height:900px;

border-radius:50%;

background:radial-gradient(circle,
rgba(255,255,255,.08),
transparent 70%);

filter:blur(100px);

animation:float 10s infinite alternate;

}

.login-card{

position:relative;

width:420px;

padding:55px;

border-radius:28px;

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

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(30px);

box-shadow:

0 30px 70px rgba(0,0,0,.4);

display:flex;

flex-direction:column;

gap:18px;

}

.logo{

font-size:13px;

letter-spacing:10px;

text-transform:lowercase;

text-align:center;

opacity:.8;

margin-bottom:15px;

}

.login-card h2{

font-size:34px;

font-weight:300;

text-align:center;

}

.login-card p{

text-align:center;

opacity:.65;

margin-bottom:20px;

line-height:1.8;

}

.login-card input{

height:58px;

border:none;

outline:none;

border-radius:16px;

padding:18px;

font-size:15px;

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

color:white;

}

.login-card input::placeholder{

color:#ccc;

}

.login-card button{

height:58px;

border:none;

border-radius:16px;

cursor:pointer;

font-size:15px;

font-weight:600;

transition:.35s;

}

.login-card button:hover{

transform:translateY(-3px);

}

@keyframes float{

from{

transform:translate(-100px,-50px);

}

to{

transform:translate(120px,90px);

}

}