/*
  Estilos específicos da página de login.

  Servido em: /static/styles/login.css
  Carregado após /static/css/app.css (Tailwind build) para funcionar como override.
*/

@keyframes miaFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cmir-login {
  background: #070a10;
  color: #fff;
}

.cmir-login-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Fundo escuro liso: a ARTE agora e um painel proporcional na coluna direita
   (no HTML), entao o fundo da pagina e so um gradiente escuro discreto. */
.cmir-login-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 650px at 85% 15%, rgba(37, 99, 235, 0.16), transparent 60%),
    radial-gradient(800px 600px at 10% 90%, rgba(14, 165, 233, 0.12), transparent 55%),
    linear-gradient(135deg, #05070c, #071428, #06101f);
  background-color: #05070c;
}

.cmir-login-grid {
  display: none;
}

/* Titulo fluido (reduzido): cresce/encolhe suavemente com a largura. */
.cmir-login-title {
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1.1;
}
.cmir-login-lead {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
}

.mia-float {
  animation: miaFloat 5.2s ease-in-out infinite;
  will-change: transform;
}

.fade-up {
  animation: fadeUp 0.55s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .mia-float,
  .fade-up {
    animation: none !important;
  }
}