/* =====================================
   HABBON V4 - PREMIUM LANDING PAGE
===================================== */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;

}



body {

    min-height:100vh;

    overflow:hidden;

    color:white;

    background:
    linear-gradient(
        180deg,
        #65d5ff,
        #e8fbff
    );

}




/* =====================================
   OVERLAY
===================================== */


body::before {

content:"";

position:fixed;

inset:0;


background:

linear-gradient(
180deg,
rgba(0,120,200,.15),
rgba(0,50,120,.35)
);


z-index:-20;


}






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


.loader {


position:fixed;

inset:0;


z-index:9999;


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


gap:20px;


background:

linear-gradient(
180deg,
#65d5ff,
#0084c7
);


}



.loader img {


width:320px;


animation:

logoPulse 2s infinite;


}



.loader p {


font-size:20px;

font-weight:bold;

text-shadow:

0 3px 10px rgba(0,0,0,.4);


}



.loader-bar {


width:320px;

height:14px;


border-radius:20px;


overflow:hidden;


background:

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


}



.loader-bar span {


display:block;

height:100%;


width:0;


background:white;


animation:

loading 3s forwards;


}



@keyframes loading {


to {

width:100%;

}


}



@keyframes logoPulse {


50% {

transform:scale(1.08);

}


}






/* =====================================
   BACKGROUND
===================================== */


.background {


position:fixed;

inset:0;

z-index:-10;


overflow:hidden;


}




.sky {


position:absolute;

inset:0;


background:


radial-gradient(
circle at top,
rgba(255,255,255,.9),
transparent 45%
);


}








/* =====================================
   HOTEL
===================================== */


.hotel {


position:absolute;


top:80px;


width:100%;


height:600px;


display:flex;


justify-content:center;

align-items:center;


}



.hotel-back {


position:absolute;


width:900px;


opacity:.25;


filter:

blur(12px);


}



.hotel-front {


width:750px;


opacity:.65;


filter:

drop-shadow(
0 40px 60px rgba(0,0,0,.45)
);


animation:

hotelFloat 7s infinite ease-in-out;


}



@keyframes hotelFloat {


50% {

transform:translateY(-15px);

}


}







/* =====================================
   CLOUDS
===================================== */


.cloud {


position:absolute;


width:320px;

height:100px;


background:

rgba(255,255,255,.8);


border-radius:100px;


filter:blur(1px);


}



.cloud::before {


content:"";


position:absolute;


width:130px;

height:130px;


background:white;


border-radius:50%;


top:-60px;

left:60px;


}



.cloud::after {


content:"";


position:absolute;


width:90px;

height:90px;


background:white;


border-radius:50%;


top:-40px;

right:55px;


}





.cloud1 {


top:100px;


left:-400px;


animation:

cloudMove 90s linear infinite;


}




.cloud2 {


top:300px;


left:-500px;


transform:scale(.8);


animation:

cloudMove 120s linear infinite;


}





@keyframes cloudMove {


to {

transform:translateX(180vw);

}


}

/* =====================================
   PARTICLES
===================================== */


.particles {

position:absolute;

inset:0;

overflow:hidden;

z-index:2;

pointer-events:none;

}






/* =====================================
   CHARACTERS
===================================== */


.characters {

position:absolute;

inset:0;

pointer-events:none;

}



.character {


position:absolute;


bottom:30px;


width:240px;


filter:

drop-shadow(
0 25px 35px rgba(0,0,0,.55)
);


animation:

characterFloat 5s infinite ease-in-out;


}



.character1 {


left:35px;


}



.character2 {


right:35px;


animation-delay:1.5s;


}



@keyframes characterFloat {


50% {

transform:translateY(-18px);

}


}







/* =====================================
   HEADER
===================================== */


header {


position:fixed;


top:25px;


left:50%;


transform:translateX(-50%);


width:90%;


height:75px;



display:flex;


align-items:center;


justify-content:space-between;



padding:10px 35px;



background:

rgba(255,255,255,.18);



backdrop-filter:

blur(18px);



border:

1px solid rgba(255,255,255,.45);



border-radius:35px;



box-shadow:

0 20px 40px rgba(0,0,0,.2);



z-index:50;


}




.brand img {


width:150px;


filter:

drop-shadow(
0 5px 10px rgba(0,0,0,.35)
);


}





.login-btn {


padding:

14px 35px;


border:none;


border-radius:35px;


background:white;


color:#0085c7;


font-size:16px;


font-weight:bold;


cursor:pointer;


box-shadow:

0 8px 20px rgba(0,0,0,.25);


transition:.3s;


}




.login-btn:hover {


transform:translateY(-4px);


}





/* =====================================
   MAIN
===================================== */


main {

min-height:100vh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

position:relative;

z-index:20;

text-align:center;

padding-top:70px;

padding-bottom:40px;

}


.main-logo {

width:350px;

margin-bottom:5px;



filter:


drop-shadow(
0 15px 25px rgba(0,0,0,.45)
)

drop-shadow(
0 0 40px rgba(90,230,255,.9)
);



animation:

logoFloat 5s infinite ease-in-out;


}



@keyframes logoFloat {


50% {

transform:translateY(-12px);

}


}



.intro {

margin-top:5px;

font-size:24px;


font-weight:bold;


text-shadow:

0 4px 15px rgba(0,0,0,.7);


}








/* =====================================
   COUNTDOWN
===================================== */


.countdown {


display:flex;


gap:15px;

margin-top:20px;

}



.countdown div {


width:120px;


height:120px;



display:flex;


align-items:center;


justify-content:center;


flex-direction:column;



background:

rgba(0,50,100,.45);



border:

1px solid rgba(255,255,255,.5);



backdrop-filter:

blur(15px);



border-radius:25px;



box-shadow:

0 20px 40px rgba(0,0,0,.25);


}



.countdown strong {


font-size:48px;


}



.countdown span {


font-size:12px;


font-weight:bold;


text-transform:uppercase;


}







/* =====================================
   BUTTONS
===================================== */


.actions {


display:flex;


gap:20px;


align-items:center;


justify-content:center;


margin-top:20px;


}




.launch {


padding:

18px 55px;


border:none;


border-radius:45px;


background:

linear-gradient(
180deg,
#65e8ff,
#007ac0
);



color:white;


font-size:20px;


font-weight:bold;


cursor:pointer;



border:

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



box-shadow:


0 8px 0 #00547c,

0 0 35px rgba(80,220,255,.8);



transition:.3s;


}




.launch:hover {


transform:

translateY(-6px)
scale(1.05);



}




.discord-btn {


height:60px;


padding:

0 35px;


display:flex;


align-items:center;


gap:12px;


border-radius:40px;


background:

linear-gradient(
180deg,
#7289da,
#5865f2
);



color:white;


text-decoration:none;


font-size:18px;


font-weight:bold;


box-shadow:


0 8px 0 #3c45a0,

0 0 30px rgba(114,137,218,.7);



transition:.3s;


}




.discord-btn img {


width:28px;


}




.discord-btn:hover {


transform:

translateY(-6px)
scale(1.04);


}







/* =====================================
   ONLINE
===================================== */


.online {


margin-top:25px;


padding:

14px 35px;


background:

rgba(0,40,90,.45);



border-radius:35px;



border:

1px solid rgba(255,255,255,.4);



backdrop-filter:

blur(15px);



font-weight:bold;


box-shadow:

0 15px 30px rgba(0,0,0,.25);


}







/* =====================================
   NEWS
===================================== */


.news {


margin-top:20px;


padding:

12px 40px;


background:

rgba(255,255,255,.15);



border-radius:30px;


border:

1px solid rgba(255,255,255,.35);



backdrop-filter:

blur(12px);



font-weight:bold;


}








/* =====================================
   BADGES
===================================== */


.badges {


margin-top:15px;


}



.badges img {


width:55px;


margin:10px;


transition:.3s;


filter:

drop-shadow(
0 5px 10px rgba(0,0,0,.4)
);


}



.badges img:hover {


transform:

scale(1.25)
rotate(8deg);


}







/* =====================================
   FOOTER
===================================== */


footer {


position:fixed;


bottom:15px;


width:100%;


text-align:center;


font-size:14px;


opacity:.85;


z-index:30;


text-shadow:

0 2px 8px rgba(0,0,0,.6);


}








/* =====================================
   MOBILE
===================================== */


@media(max-width:900px){

.main-logo {

width:260px;

}


.countdown {

margin-top:15px;

gap:10px;

}


.actions {

margin-top:15px;

}

.character {

display:none;

}




.countdown {


flex-wrap:wrap;


width:90%;


justify-content:center;


}



.countdown div {


width:90px;


height:90px;


}



.countdown strong {


font-size:35px;


}



.actions {


flex-direction:column;


}



header {


width:95%;


}



.intro {


font-size:18px;


}



}

/* =====================================
   AUTH SYSTEM
===================================== */


.auth-buttons {

display:flex;

gap:15px;

}



.register-btn {


padding:14px 30px;


border:none;


border-radius:35px;


background:

linear-gradient(
180deg,
#ffe86a,
#ffb700
);


color:#704900;


font-weight:bold;


cursor:pointer;


}




.auth-overlay {


position:fixed;


inset:0;


background:

rgba(0,30,70,.55);


backdrop-filter:

blur(10px);


display:none;


align-items:center;


justify-content:center;


z-index:200;



}





.auth-box {


width:400px;


padding:35px;


background:


rgba(255,255,255,.95);



border-radius:30px;


color:#005a8c;


box-shadow:

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


position:relative;


}




.close-auth {


position:absolute;


right:20px;


top:15px;


border:none;


background:none;


font-size:30px;


cursor:pointer;


color:#007ac0;


}




.auth-box h2 {


text-align:center;


margin-bottom:25px;


}




.auth-box input[type="text"],
.auth-box input[type="email"],
.auth-box input[type="password"] {


width:100%;


padding:15px;


margin-bottom:15px;


border-radius:20px;


border:2px solid #d5efff;


outline:none;


}




.auth-box label {


font-size:14px;


display:block;


margin:10px;


}




.auth-submit {


width:100%;


padding:15px;


border:none;


border-radius:30px;


background:

linear-gradient(
180deg,
#55ddff,
#007ac0
);


color:white;


font-weight:bold;


font-size:16px;


cursor:pointer;


}



.auth-box p {


text-align:center;


margin-top:20px;


}



.auth-box span {


color:#007ac0;


font-weight:bold;


cursor:pointer;


}