:root{

/* PALETA ENERGIA (AMARELO + VERDE CLEAN) */

--primary-h:145;
--primary-s:60%;
--primary-l:42%;

--primary-color:hsl(var(--primary-h),var(--primary-s),var(--primary-l));
--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) - 10%));
--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) + 12%));

--secondary-color:#f5c518;
--secondary-dark:#d4a90f;
--secondary-light:#ffe27a;

--primary-rgba-10:hsla(var(--primary-h),var(--primary-s),var(--primary-l),0.10);
--primary-rgba-20:hsla(var(--primary-h),var(--primary-s),var(--primary-l),0.20);
--primary-rgba-35:hsla(var(--primary-h),var(--primary-s),var(--primary-l),0.35);

--gradient-primary:linear-gradient(
135deg,
#2ecc71,
#27ae60
);

--gradient-energy:linear-gradient(
135deg,
#f5c518,
#ffe27a,
#e9f7ef,
#2ecc71
);

--gradient-soft:linear-gradient(
135deg,
rgba(46,204,113,0.1),
rgba(46,204,113,0.03)
);

--text-dark:#2c3e50;
--text-medium:#5f6c7b;
--text-light:#9aa5b1;

--white:#ffffff;

--error:#e74c3c;
--success:#2ecc71;

--shadow-light:0 5px 15px rgba(0,0,0,0.05);
--shadow-medium:0 8px 30px rgba(0,0,0,0.1);
--shadow-dark:0 15px 50px rgba(0,0,0,0.15);

--transition-fast:0.2s ease;
--transition-normal:0.3s ease;
--transition-slow:0.5s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
    background:url('assets/background.png') center center/cover no-repeat fixed;

color:var(--text-dark);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow-x:hidden;
position:relative;
}



body::before{
content:"";
position:absolute;
top:-200px;
right:-200px;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(255,193,7,0.25),transparent 70%);
filter:blur(60px);
z-index:0;
}

body::after{
content:"";
position:absolute;
bottom:-200px;
left:-200px;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(46,204,113,0.25),transparent 70%);
filter:blur(60px);
z-index:0;
}

.container{
width:100%;
max-width:900px;
padding:20px;
position:relative;
z-index:10;
}

.login-container{
display:flex;
background-color:var(--white);
border-radius:20px;
box-shadow:var(--shadow-medium);
min-height:auto;
position:relative;
margin:20px 0;
}

/* Welcome Side */

.welcome-side{
flex:1;
background:var(--gradient-primary);
color:var(--white);
padding:25px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
}

.welcome-side::before{
content:"";
position:absolute;
width:300px;
height:300px;
background:radial-gradient(circle,rgba(255,255,255,0.2),transparent 70%);
top:-120px;
right:-120px;
}

.welcome-content{
position:relative;
z-index:2;
}

.welcome-side h1{
font-size:2.2rem;
margin-bottom:12px;
font-weight:700;
}

.welcome-side .highlight{
color:#ffe27a;
position:relative;
display:inline-block;
}

.welcome-side .tagline{
font-size:1rem;
margin-bottom:25px;
opacity:0.9;
}

.character-container{
display:flex;
align-items:flex-start;
margin-bottom:30px;
transform:translateX(-20px);
opacity:0;
animation:slideIn .8s var(--transition-normal) forwards;
animation-delay:.5s;
}

.character{
flex:0 0 160px;
position:relative;
}

.character-img{
width:100%;
height:auto;
filter:drop-shadow(0 5px 15px rgba(0,0,0,.2));
animation:float 3s ease-in-out infinite;
}

.speech-bubble{
position:relative;
background-color:var(--white);
color:var(--text-dark);
padding:15px 20px;
border-radius:20px;
margin-left:15px;
max-width:280px;
box-shadow:var(--shadow-light);
}

.speech-bubble::before{
content:'';
position:absolute;
left:-10px;
top:20px;
border-width:10px 10px 10px 0;
border-style:solid;
border-color:transparent var(--white) transparent transparent;
}

.features{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-top:20px;
}

.feature{
display:flex;
align-items:center;
background-color:rgba(255,255,255,.15);
padding:10px 15px;
border-radius:50px;
backdrop-filter:blur(5px);
transition:var(--transition-normal);
border:1px solid rgba(255,255,255,.2);
}

.feature:hover{
background-color:rgba(255,255,255,.25);
transform:translateY(-3px);
}

.feature i{
margin-right:8px;
font-size:1rem;
color:#fff;
}

.feature span{
font-size:.85rem;
font-weight:500;
}

/* Login */

.login-side{
flex:1;
padding:30px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}

.login-form-container{
width:100%;
max-width:400px;
display:flex;
flex-direction:column;
min-height:100%;
}

.logo-container{
display:flex;
justify-content:center;
margin:10px 0 25px;
position:relative;
}

.logo{
width:70%;
height:auto;
position:relative;
z-index:2;
}

.logo-animation{
position:absolute;
width:120px;
height:120px;
background:radial-gradient(circle,var(--primary-rgba-20),transparent 70%);
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;
animation:pulse 2s infinite;
}

.login-side h2{
text-align:center;
margin-bottom:30px;
font-weight:600;
font-size:1.5rem;
}

.login-form{
display:flex;
flex-direction:column;
gap:20px;
}

.input-group{
position:relative;
display:flex;
align-items:center;
}

.input-icon{
position:absolute;
left:15px;
color:var(--text-light);
}

.input-group input{
width:100%;
padding:15px 15px 15px 45px;
border:1px solid #e1e5ee;
border-radius:10px;
font-size:1rem;
background-color:#f9fafc;
transition:var(--transition-normal);
}

.input-group input:focus{
outline:none;
border-color:var(--primary-color);
background-color:var(--white);
}

.input-focus-effect{
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background-color:var(--primary-color);
transition:var(--transition-normal);
}

.input-group input:focus + .input-focus-effect{
width:100%;
}

.toggle-password{
position:absolute;
right:15px;
background:none;
border:none;
color:var(--text-light);
cursor:pointer;
}

.form-options{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:5px;
font-size:.85rem;
}

.remember-me{
display:flex;
align-items:center;
}

.remember-me input{
appearance:none;
width:18px;
height:18px;
border:1px solid #e1e5ee;
border-radius:4px;
margin-right:8px;
cursor:pointer;
}

.remember-me input:checked{
background-color:var(--primary-color);
border-color:var(--primary-color);
}

.forgot-password{
color:var(--primary-color);
text-decoration:none;
}

.login-button{
background:linear-gradient(to right,#2ecc71,#27ae60);
color:white;
border:none;
padding:15px;
border-radius:10px;
font-size:1rem;
font-weight:600;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
transition:var(--transition-normal);
position:relative;
overflow:hidden;
margin-top:10px;
}

.login-button:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px var(--primary-rgba-35);
}

.login-footer{
margin-top:20px;
text-align:center;
font-size:.8rem;
color:var(--text-light);
padding-bottom:10px;
}

/* Animations */

@keyframes pulse{
0%{transform:translate(-50%,-50%) scale(.8);opacity:.5}
50%{transform:translate(-50%,-50%) scale(1);opacity:.3}
100%{transform:translate(-50%,-50%) scale(.8);opacity:.5}
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

@keyframes slideIn{
0%{transform:translateX(-20px);opacity:0}
100%{transform:translateX(0);opacity:1}
}

/* Responsive */

@media (max-width:992px){

.login-container{flex-direction:column}

}

@media (max-width:768px){

.login-container{flex-direction:column-reverse}

.welcome-side{display:none}

.login-side{
padding:30px;
background:var(--gradient-soft);
}

}

@media (max-width:576px){

.container{padding:10px}

.login-container{
border-radius:15px;
box-shadow:var(--shadow-light)
}

.login-side{padding:20px}

}

/* Animated Background */

.animated-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
overflow:hidden;
}

/* WAVES */

.wave{
position:absolute;
bottom:0;
left:0;
width:100%;
height:120px;
background:url('assets/wave.svg');
background-size:1000px 120px;
filter:brightness(1.1) saturate(1.2);
}

.wave1{
animation:animate 30s linear infinite;
z-index:1000;
opacity:.45;
}

.wave2{
animation:animate2 18s linear infinite;
z-index:999;
opacity:.35;
}

.wave3{
animation:animate 35s linear infinite;
z-index:998;
opacity:.25;
}

/* ENERGY ICONS FLOATING */

.floating-shapes{
position:absolute;
width:100%;
height:100%;
}

.shape{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
width:50px;
height:50px;
border-radius:50%;
background:linear-gradient(135deg,rgba(46,204,113,.15),rgba(255,210,0,.15));
bottom:-100px;
animation:floatUp 18s linear infinite;
backdrop-filter:blur(3px);
}

.shape i{
font-size:1.4rem;
color:#f5c518;
opacity:.85;
}

/* POSIÇÕES */

.shape1{
left:10%;
width:60px;
height:60px;
animation-delay:0s;
animation-duration:22s;
}

.shape2{
left:30%;
width:50px;
height:50px;
animation-delay:5s;
animation-duration:18s;
}

.shape3{
left:60%;
width:70px;
height:70px;
animation-delay:8s;
animation-duration:24s;
}

.shape4{
left:80%;
width:55px;
height:55px;
animation-delay:2s;
animation-duration:20s;
}

/* ANIMAÇÕES */

@keyframes animate{
0%{background-position-x:0}
100%{background-position-x:1000px}
}

@keyframes animate2{
0%{background-position-x:0}
100%{background-position-x:-1000px}
}

@keyframes floatUp{
0%{
transform:translateY(0) rotate(0deg);
opacity:0;
}

10%{
opacity:1;
}

100%{
transform:translateY(-2000px) rotate(360deg);
opacity:0;
}
}