:root{
  --bg1:#0ea5e9; --bg2:#8b5cf6; --bg3:#22c55e;
  --glass-bg: rgba(255,255,255,.18);
  --glass-bd: rgba(255,255,255,.35);
  --ring: #7c3aed;
}

html,body{height:100%}
.login-bg{
  background: radial-gradient(1000px 600px at 10% 10%, #eef6ff 0%, #f7f7ff 35%, #f9fafb 60%, #ffffff 100%);
  overflow: hidden;
}

.bg-blob{
  position: fixed; filter: blur(60px); opacity:.35; z-index:0;
  width: 38vw; height: 38vw; border-radius: 50%;
  animation: float 16s ease-in-out infinite;
}
.bg-blob.b1{ top:-10vh; left:-10vw; background: conic-gradient(from 120deg, var(--bg1), transparent);}
.bg-blob.b2{ top:30vh; right:-12vw; background: conic-gradient(from 220deg, var(--bg2), transparent); animation-delay: -6s;}
.bg-blob.b3{ bottom:-12vh; left:10vw; background: conic-gradient(from 40deg, var(--bg3), transparent); animation-delay: -3s;}

@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) scale(1);}
  50%{ transform: translateY(-12px) translateX(8px) scale(1.03);}
}

.glass-card{
  position: relative; z-index:1; max-width: 420px; width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(2,6,23,.12);
  animation: rise .5s ease-out both;
}
@keyframes rise{from{opacity:0; transform: translateY(10px) scale(.98);}to{opacity:1; transform:none;}}

.brand-badge{
  width:48px; height:48px; line-height:48px; text-align:center;
  border-radius:14px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  color:#fff; font-weight:700; display:inline-block;
  box-shadow: 0 8px 24px rgba(99,102,241,.35);
}

.form-control{
  background-color: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(148,163,184,.4);
}
.form-control:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ring) 20%, transparent);
}

.btn-glow{
  box-shadow: 0 8px 20px rgba(124,58,237,.35);
  transition: transform .08s ease, box-shadow .2s ease;
}
.btn-glow:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(124,58,237,.45); }

.toggle-pass{
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: #64748b;
}
.toggle-pass:hover{ color:#334155; }

.small a{ text-decoration: none; }
.small a:hover{ text-decoration: underline; }

/* Logo */
.brand-logo{
  height: 72px; width: auto; display:inline-block;
  filter: drop-shadow(0 8px 22px rgba(2,6,23,.12));
}

/* Título um pouco mais leve que bold */
h1.fw-semibold{ font-weight: 600; letter-spacing: -0.2px; }

/* (opcional) deixa o link “Esqueci minha senha” com contraste melhor */
a { color: #0f62fe; }
a:hover { color: #0043ce; }

/* Entrada (fade + leve subida) */
@keyframes enterRaise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Um único "flutuar" suave após entrar */
@keyframes bobOnce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* Aplique esta classe no card que deve animar na carga */
.card-intro-float {
  /* duas animações em sequência: a 2ª começa quando a 1ª termina */
  animation:
    enterRaise .9s cubic-bezier(.2,.8,.2,1) both,
    bobOnce    1.6s ease-in-out .55s 1;
  will-change: transform, opacity;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .card-intro-float { animation: none !important; }
}