/* ======================================
   FANHUB+ AUTH PAGE
   PART 1
====================================== */

/* =========================
   RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

/* =========================
   ROOT COLORS
========================= */

:root{

--primary:#ff4fd8;
--secondary:#9d4edd;
--accent:#c77dff;

--dark:#090414;
--dark2:#13081f;

--text:#ffffff;
--muted:#bdbdbd;

--glass:
rgba(255,255,255,.05);

--border:
rgba(255,255,255,.08);

}



        .message {

            padding:12px 15px;

            border-radius:8px;

            margin-bottom:15px;

            font-size:14px;

            text-align:center;
        }


        .message.error {

            background:
                rgba(255,60,60,0.15);

            border:
                1px solid
                rgba(255,60,60,0.4);

            color:#ff7070;
        }


        .message.success {

            background:
                rgba(50,255,150,0.15);

            border:
                1px solid
                rgba(50,255,150,0.4);

            color:#5cffad;
        }


        .input-group {

            position:relative;
        }


        .toggle-password {

            cursor:pointer;
        }


        .upload-box label {

            cursor:pointer;
        }

/*=============
 Scroller bar
============== */
::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{

background:#090414;
}

::-webkit-scrollbar-thumb{

background:
linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

background:
linear-gradient(
180deg,
#ff74e2,
#b35cff
);
}

/* =========================
   BODY
========================= */

body{

min-height:100vh;

background:
linear-gradient(
135deg,
#090414,
#12091f,
#1c1033
);

color:white;

overflow-y:auto;
overflow-x:hidden;

position:relative;
}

/* =========================
   ANIMATED BG
========================= */

.bg-animation{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

z-index:-1;
}

.bg-animation span{

position:absolute;

display:block;

border-radius:50%;

background:
rgba(255,79,216,.12);

backdrop-filter:blur(10px);

animation:
floatBubble 16s linear infinite;
}

.bg-animation span:nth-child(1){

width:220px;
height:220px;

left:5%;
top:10%;
}

.bg-animation span:nth-child(2){

width:150px;
height:150px;

right:8%;
top:15%;
}

.bg-animation span:nth-child(3){

width:300px;
height:300px;

left:30%;
bottom:-120px;
}

.bg-animation span:nth-child(4){

width:180px;
height:180px;

right:25%;
bottom:15%;
}

.bg-animation span:nth-child(5){

width:120px;
height:120px;

left:75%;
top:50%;
}

@keyframes floatBubble{

50%{

transform:
translateY(-50px)
rotate(180deg);

}

100%{

transform:
translateY(0)
rotate(360deg);

}

}

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

.auth-container{

width:100%;

min-height:100vh;

padding:60px 7%;

display:flex;

align-items:center;
justify-content:space-between;

gap:80px;
}

/* =========================
   LEFT SIDE
========================= */

.auth-left{

flex:1;
}

.brand{

display:flex;
align-items:center;

gap:15px;

margin-bottom:30px;
}

.logo{

width:60px;
height:60px;

object-fit:contain;
}

.brand h1{

font-size:2.8rem;
font-weight:800;

background:
linear-gradient(
45deg,
var(--primary),
var(--accent)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =========================
   HEADING
========================= */

.auth-left h2{

font-size:4.5rem;

font-weight:800;

line-height:1.1;

margin-bottom:20px;
}

.auth-left h2 span{

background:
linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.auth-left p{

font-size:1.1rem;

color:var(--muted);

margin-bottom:40px;

line-height:1.8;
}

/* =========================
   ANIME IMAGE CIRCLE
========================= */

.anime-circle{

width:460px;
height:460px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

position:relative;

background:
radial-gradient(
circle,
rgba(255,79,216,.18),
rgba(157,78,221,.05)
);

border:
2px solid rgba(255,79,216,.15);

box-shadow:
0 0 50px rgba(255,79,216,.25);

animation:
animeFloat 5s ease-in-out infinite;
}

.anime-circle::before{

content:"";

position:absolute;

width:110%;
height:110%;

border-radius:50%;

border:
2px dashed rgba(255,79,216,.2);

animation:
rotateRing 18s linear infinite;
}

.anime-character{

width:100%;
height:100%;

object-fit:contain;
border-radius: 50%;
z-index:2;
}

@keyframes animeFloat{

50%{

transform:
translateY(-15px);

}

}

@keyframes rotateRing{

100%{

transform:
rotate(360deg);

}

}

/* ======================================
   RIGHT SIDE
====================================== */

.auth-right{

flex:1;

display:flex;
justify-content:center;
align-items:center;

}

/* ======================================
   LOGIN CARD
====================================== */

.auth-card{

width:100%;
max-width:520px;

padding:45px;

border-radius:30px;

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

backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);

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

box-shadow:
0 0 40px rgba(255,79,216,.15);

transition:.4s;
}

.auth-card:hover{

transform:translateY(-5px);

box-shadow:
0 0 60px rgba(255,79,216,.25);

}

.auth-card h2{

font-size:2rem;

font-weight:700;

margin-bottom:10px;

text-align:center;
}

.auth-card p{

text-align:center;

color:var(--muted);

margin-bottom:30px;

line-height:1.7;
}

/* ======================================
   INPUTS
====================================== */

.input-group{

position:relative;

margin-bottom:22px;
}

.input-group i{

position:absolute;

top:50%;
left:18px;

transform:translateY(-50%);

color:#bbb;

font-size:15px;
}

.input-group input{

width:100%;

padding:17px 50px;

border:none;
outline:none;

border-radius:16px;

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

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

color:white;

font-size:.95rem;

transition:.3s;
}

.input-group input::placeholder{

color:#9e9e9e;
}

.input-group input:focus{

border-color:
var(--primary);

box-shadow:
0 0 18px rgba(255,79,216,.18);

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

/* ======================================
   PASSWORD EYE
====================================== */

.toggle-password{

left:auto !important;

right:18px;

cursor:pointer;

transition:.3s;
}

.toggle-password:hover{

color:var(--primary);

transform:
translateY(-50%)
scale(1.15);
}

/* ======================================
   FORM OPTIONS
====================================== */

.form-options{

display:flex;

justify-content:space-between;
align-items:center;

margin-bottom:25px;

font-size:.9rem;
}

.form-options label{

display:flex;

align-items:center;

gap:8px;

color:#d6d6d6;
}

.form-options input[type="checkbox"]{

accent-color:
var(--primary);
}

.form-options a{

text-decoration:none;

color:var(--primary);

transition:.3s;
}

.form-options a:hover{

color:#ff7de5;
}

/* ======================================
   LOGIN BUTTON
====================================== */

.login-btn{

width:100%;

padding:16px;

border:none;

border-radius:16px;

cursor:pointer;

font-size:1rem;
font-weight:700;

color:white;

background:
linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

transition:.35s;
}

.login-btn:hover{

transform:
translateY(-3px);

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

}

/* ======================================
   DIVIDER
====================================== */

.divider{

position:relative;

text-align:center;

margin:30px 0;
}

.divider::before{

content:"";

position:absolute;

top:50%;
left:0;

width:100%;
height:1px;

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

.divider span{

position:relative;

padding:0 15px;

background:
#13081f;

color:#bbb;

font-size:.9rem;
}

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

.google-btn,
.github-btn{

width:100%;

padding:15px;

border:none;

border-radius:16px;

cursor:pointer;

font-weight:600;

font-size:.95rem;

display:flex;
align-items:center;
justify-content:center;

gap:10px;

transition:.35s;

margin-bottom:15px;
}

.google-btn{

background:white;

color:#111;
}

.google-btn:hover{

transform:
translateY(-3px);

box-shadow:
0 0 25px rgba(255,255,255,.15);
}

.github-btn{

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

color:white;

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

.github-btn:hover{

transform:
translateY(-3px);

background:
rgba(255,255,255,.12);
}

/* ======================================
   BOTTOM LINK
====================================== */

.bottom-link{

margin-top:25px;

text-align:center;

color:#cfcfcf;
}

.bottom-link a{

color:var(--primary);

font-weight:600;

text-decoration:none;

margin-left:5px;

transition:.3s;
}

.bottom-link a:hover{

color:#ff7de5;
}
/* ======================================
   PARTICLES
====================================== */

.particles{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:-1;
}

.particles::before,
.particles::after{

content:"";

position:absolute;

width:100%;
height:100%;

background-image:

radial-gradient(
circle,
rgba(255,255,255,.35) 1px,
transparent 1px
);

background-size:
80px 80px;

animation:
particlesMove 30s linear infinite;
}

.particles::after{

opacity:.4;

animation-duration:50s;
}

@keyframes particlesMove{

from{
transform:translateY(0);
}

to{
transform:translateY(-200px);
}

}

/* ======================================
   EXTRA NEON GLOW
====================================== */

.auth-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:32px;

background:
linear-gradient(
45deg,
rgba(255,79,216,.25),
rgba(157,78,221,.15),
rgba(199,125,255,.25)
);

z-index:-1;

filter:blur(25px);
}

.auth-card{

position:relative;
overflow:hidden;
}

/* ======================================
   INPUT HOVER EFFECT
====================================== */

.input-group:hover input{

border-color:
rgba(255,79,216,.35);
}

/* ======================================
   BUTTON SHINE EFFECT
====================================== */

.login-btn{

position:relative;
overflow:hidden;
}

.login-btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

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

transition:.7s;
}

.login-btn:hover::before{

left:130%;
}

/* ======================================
   BRAND ANIMATION
====================================== */

.brand h1{

animation:
logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow{

50%{

filter:
drop-shadow(
0 0 15px rgba(255,79,216,.7)
);

}

}

/* ======================================
   IMAGE GLOW
====================================== */

.anime-character{

filter:
drop-shadow(
0 0 30px rgba(255,79,216,.35)
);

transition:.4s;
}

.anime-character:hover{

transform:scale(1.03);
}

/* ======================================
   RESPONSIVE
====================================== */

@media(max-width:1200px){

.auth-left h2{

font-size:3.8rem;
}

.anime-circle{

width:380px;
height:380px;
}

}

@media(max-width:992px){

.auth-container{

flex-direction:column;

padding:50px 25px;

text-align:center;
}

.auth-left{

display:flex;
flex-direction:column;
align-items:center;
}

.auth-left h2{

font-size:3rem;
}

.auth-right{

width:100%;
}

.auth-card{

max-width:600px;
}

.anime-circle{

width:320px;
height:320px;
}

}

@media(max-width:768px){

.auth-container{

padding:30px 20px;
gap:40px;
}

.auth-left h2{

font-size:2.4rem;
}

.auth-left p{

font-size:.95rem;
}

.auth-card{

padding:30px 22px;
border-radius:24px;
}

.anime-circle{

width:260px;
height:260px;
}

.brand h1{

font-size:2rem;
}

.logo{

width:50px;
height:50px;
}

}

@media(max-width:480px){

.auth-left h2{

font-size:2rem;
}

.auth-card{

padding:25px 18px;
}

.form-options{

flex-direction:column;
gap:12px;
}

.anime-circle{

width:220px;
height:220px;
}

.login-btn,
.google-btn,
.github-btn{

padding:14px;
font-size:.9rem;
}

.input-group input{

padding:15px 48px;
}

}

/* ======================================
   SMALL HEIGHT DEVICES
====================================== */

@media(max-height:700px){

body{

overflow-y:auto;
}

.auth-container{

padding-top:30px;
padding-bottom:30px;
}

}

/* ======================================
   SMOOTH SCROLL
====================================== */

html{

scroll-behavior:smooth;
}
select{

width:100%;

padding:17px 50px;

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

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

border-radius:16px;

color:white;

outline:none;
}

select option{

background:#13081f;
}

.upload-box{

margin-bottom:20px;
}

.upload-box label{

display:block;

padding:16px;

text-align:center;

cursor:pointer;

border-radius:16px;

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

border:
1px dashed rgba(255,79,216,.4);
}

.register-card{
 max-height:70vh;
    overflow-y:auto;
max-width:560px;
}
.auth-card{
    width: 500px;
    max-width: 90%;
    margin: auto;
    padding: 40px;
    text-align: center;
}
.otp-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 30px 0;
}

.otp-input{
    width: 60px;
    height: 65px;
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 15px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    outline: none;
    transition: .3s;
}

.otp-input:focus{
    border-color: #ff4fd8;
    transform: translateY(-3px);
}

/* BUTTON */

.login-btn{
    width: 100%;
    margin-top: 15px;
}

/* RESEND */

.resend-link{
    margin-top: 20px;
    text-align: center;
}

.resend-link a{
    text-decoration: none;
    font-weight: 600;
}

/* MOBILE */

@media(max-width:768px){

    .otp-container{
        gap:8px;
    }

    .otp-input{
        width:45px;
        height:55px;
        font-size:22px;
    }

}
.resend-link{
    margin-top:20px;
    text-align:center;
    color:#bdbdbd;
    font-size:14px;
}

.resend-link span{
    margin-right:5px;
}

.resend-link a{
    color:#ff4fd8;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.resend-link a:hover{
    color:#ffffff;
    text-shadow:0 0 10px #ff4fd8;
}  
.auth-left{
    opacity:0;
    transform:translateY(-100px);
    animation:slideDown 1.2s ease forwards;
}

.auth-card{
    opacity:0;
    transform:translateY(100px) scale(.9);
    animation:slideUp 1.2s ease forwards;
    animation-delay:.4s;
}

@keyframes slideDown{

    0%{
        opacity:0;
        transform:translateY(-100px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes slideUp{

    0%{
        opacity:0;
        transform:translateY(100px) scale(.9);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}