/* static/css/login.css */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5; 
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.login-wrapper {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    
    width: 1000px;
    min-height: 500px;
    display: flex;
    flex-direction: row; 
    align-items: stretch; 
    overflow: hidden; 
    
    position: relative;
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: translateY(40px);
    opacity: 0;
}

@keyframes slideUpFade {
    to { transform: translateY(0); opacity: 1; }
}

/* --------------------------------------
   LADO ESQUERDO: Palco dos Monstros
   -------------------------------------- */
.monsters-stage {
    flex: 1.4;
    background-color: #fafbfd; 
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    border-right: 1px solid #e1e8ed;
}

.welcome-text {
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

#monsters-svg {
    width: 90%; 
    height: auto;
    max-height: 300px;
    margin: 0 auto; 
    display: block;
    overflow: visible; 
}

/* Transições base para elementos do rosto */
.face { transition: transform 0.15s ease-out; }
.pupil { transition: transform 0.1s ease-out; }
.eye-white { transition: transform 0.2s ease-out; }
.mouth { transition: transform 0.2s ease-out; }


/* --------------------------------------
   ESTADOS DE ANIMAÇÃO GATILHADOS PELO JS
   -------------------------------------- */

/* 1. DESCONFIADOS (Ao clicar para ver a senha) */
/* Rosto e pupilas movem para a esquerda, olhos ficam semicerrados e a boca diminui */
.turned-away .face { 
    transform: translate(-15px, 0) !important; 
}
.turned-away .pupil { 
    transform: translate(-8px, 0) !important; 
}
.turned-away .eye-white {
    transform: scaleY(0.6); /* Semicerra os olhos */
    transform-origin: center;
    transform-box: fill-box; /* Garante que o centro seja o do próprio olho */
}
.turned-away .mouth {
    transform: scaleX(0.6); /* Boca de "humm, tô de olho" */
    transform-origin: center;
    transform-box: fill-box;
}

/* 2. TRISTES E NEGANDO (Senha Errada) */
/* O grupo balança, os rostos abaixam e os sorrisos viram de cabeça para baixo */
.shake-anim { 
    animation: headShake 0.5s ease-in-out; 
}
.shake-anim .face {
    transform: translateY(10px) !important; /* Rosto cai de tristeza */
}
.shake-anim .pupil {
    transform: translateY(6px) !important; /* Olham pro chão */
}
.shake-anim .mouth {
    transform: scaleY(-1) translateY(-2px); /* Inverte o sorriso transformando em tristeza! */
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes headShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-12px); }
    75% { transform: translateX(12px); }
}

/* 3. COMEMORAÇÃO (Senha Correta) */
/* Faz o grupo inteiro pular de alegria */
.celebrate-anim { 
    animation: jumpJoy 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27) infinite alternate; 
}

@keyframes jumpJoy {
    from { transform: translateY(0); }
    to { transform: translateY(-35px); } 
}

/* --------------------------------------
   LADO DIREITO: Formulário
   -------------------------------------- */
.form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 60px; 
}

.form-box { width: 100%; position: relative; z-index: 2; }
h2 { text-align: left; margin-bottom: 35px; color: #111; font-weight: 700; font-size: 28px; }

.input-field { margin-bottom: 22px; }
.input-field label { display: block; margin-bottom: 9px; color: #555; font-size: 14px; font-weight: 600; }

.input-field input { 
    width: 100%; padding: 15px; border: 2px solid #e1e8ed; border-radius: 10px; 
    font-size: 16px; outline: none; transition: all 0.2s; box-sizing: border-box; background: #fff; color: #111;
}

.input-field input:focus { 
    border-color: #000; box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}

.pwd-input-group { position: relative; display: flex; align-items: center; }
.pwd-input-group input { padding-right: 45px; }

.btn-eye {
    position: absolute; right: 15px; background: none; border: none; cursor: pointer;
    color: #a1a7ab; width: 24px; height: 24px; padding: 0; outline: none; transition: color 0.2s;
}

.btn-eye:hover { color: #000; }

.btn-login { 
    width: 100%; padding: 16px; background: #000; color: #fff; border: none; 
    border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top: 15px;
}

.btn-login:hover { background: #222; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.error-msg { color: #e11d48; font-size: 14px; text-align: left; margin-bottom: 20px; font-weight: 600; padding: 12px; background-color: #fff1f2; border-radius: 8px;}