/* =========================================================================
   login.css — tela de entrada.

   Duas colunas em telas largas (cena à esquerda, formulário à direita) e uma
   só no celular, onde a cena decorativa é escondida em vez de encolhida:
   metade de uma ilustração não comunica nada e ainda empurra o formulário
   para baixo da dobra.

   Toda animação daqui é decorativa e está sujeita ao bloco
   `prefers-reduced-motion` no fim do arquivo.
   ========================================================================= */

.lg {
  margin: 0;
  min-height: 100dvh;
  color: #e8eefc;
  font-family: var(--font-sans);
  background: #070b16;
  overflow: hidden;
}

/* ---- Cenário ------------------------------------------------------------ */

.lg__sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.lg__aurora {
  position: absolute;
  width: 78vmax; height: 78vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.lg__aurora--a {
  top: -30vmax; left: -18vmax;
  background: radial-gradient(circle at 50% 50%, #2563eb, transparent 62%);
  animation: lg-drift-a 26s ease-in-out infinite alternate;
}
.lg__aurora--b {
  right: -26vmax; bottom: -34vmax;
  background: radial-gradient(circle at 50% 50%, #0ea5e9, transparent 62%);
  animation: lg-drift-b 32s ease-in-out infinite alternate;
}
@keyframes lg-drift-a {
  from { transform: translate3d(0,0,0)      scale(1); }
  to   { transform: translate3d(9vw,7vh,0)  scale(1.14); }
}
@keyframes lg-drift-b {
  from { transform: translate3d(0,0,0)       scale(1.1); }
  to   { transform: translate3d(-8vw,-6vh,0) scale(1); }
}

/* Ruído sutil: sem ele, um gradiente desta escala mostra faixas (banding) em
   painéis de 8 bits. O SVG vai embutido para não custar uma requisição. */
.lg__grain {
  position: absolute; inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.7'/></svg>");
}

/* ---- Grade -------------------------------------------------------------- */

.lg__wrap {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 6vw, 80px);
  padding: clamp(20px, 5vw, 64px);
  box-sizing: border-box;
}

.lg__panel { display: grid; justify-items: center; }

/* ---- Cena da esquerda --------------------------------------------------- */

.lg__aside {
  display: grid; justify-items: start; gap: 28px;
  max-width: 520px; justify-self: end;
  animation: lg-rise .9s var(--ease, cubic-bezier(.2,.8,.2,1)) both;
}

.lg__claim {
  margin: 0;
  font: 700 clamp(26px, 3.4vw, 42px)/1.14 var(--font-sans);
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #ffffff 20%, #93c5fd 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lg__claim-sub {
  margin: 0; max-width: 42ch;
  font: 400 15px/1.65 var(--font-sans);
  color: rgba(226,236,255,.62);
}

/* O livro. Uma folha estática por baixo e três que viram em sequência, cada
   uma com o mesmo keyframe atrasado — a repetição vira ritmo em vez de laço
   óbvio. `perspective` no contêiner é o que dá volume ao giro. */
.lg__book {
  position: relative;
  width: clamp(180px, 20vw, 260px);
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  filter: drop-shadow(0 30px 60px rgba(2,10,30,.6));
}
.lg__page {
  position: absolute; inset: 0;
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(150deg, #f8fbff, #dbe7fb);
  box-shadow: inset 1px 0 0 rgba(15,40,90,.14);
}
.lg__page--static { background: linear-gradient(150deg, #e6eefc, #c9d9f4); }

.lg__page--flip {
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: lg-flip 9s cubic-bezier(.55,.05,.3,1) infinite;
}
.lg__page--1 { animation-delay: 0s;   }
.lg__page--2 { animation-delay: 3s;   }
.lg__page--3 { animation-delay: 6s;   }

@keyframes lg-flip {
  0%,  4%  { transform: rotateY(0deg);    box-shadow: 0 0 0 rgba(0,0,0,0); }
  18%      { transform: rotateY(-92deg);  box-shadow: -18px 0 40px rgba(4,12,32,.42); }
  32%, 96% { transform: rotateY(-172deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  100%     { transform: rotateY(-172deg); }
}

.lg__spine {
  position: absolute; left: -3px; top: 4%; bottom: 4%;
  width: 6px; border-radius: 3px;
  background: linear-gradient(#93b4e8, #3b6bb3);
}

/* ---- Cartão ------------------------------------------------------------- */

.lg__card {
  width: min(420px, 100%);
  padding: clamp(26px, 4vw, 38px);
  border-radius: 22px;
  border: 1px solid rgba(148,183,246,.18);
  background: linear-gradient(170deg, rgba(20,29,52,.9), rgba(11,17,32,.94));
  box-shadow: 0 30px 70px rgba(2,7,20,.6), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
  animation: lg-rise .7s cubic-bezier(.2,.8,.2,1) both .08s;
}
@keyframes lg-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Erro de credencial: um tremor curto diz "de novo, e aqui" sem exigir que a
   pessoa leia primeiro. Amplitude pequena de propósito — não é um alarme. */
.lg__card.is-wrong { animation: lg-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes lg-shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.lg__card.is-ok { animation: lg-leave .38s cubic-bezier(.4,0,.9,.3) forwards; }
@keyframes lg-leave {
  to { opacity: 0; transform: translateY(-14px) scale(.985); }
}

.lg__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.lg__mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: #fff;
  background: linear-gradient(140deg, #3b82f6, #1d4ed8);
  box-shadow: 0 6px 18px rgba(37,99,235,.45);
}
.lg__brandname { font: 700 16px/1 var(--font-sans); letter-spacing: -.01em; }

.lg__title { margin: 0 0 6px; font: 700 24px/1.2 var(--font-sans); letter-spacing: -.02em; }
.lg__sub   { margin: 0 0 24px; font: 400 14px/1.5 var(--font-sans); color: rgba(214,228,255,.55); }

.lg__error {
  margin-bottom: 18px; padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(248,113,113,.32);
  background: rgba(127,29,29,.28);
  color: #fecaca;
  font: 500 13px/1.45 var(--font-sans);
}

/* ---- Campos com rótulo flutuante ---------------------------------------- */

.lg__field { position: relative; margin-bottom: 16px; }

.lg__input {
  width: 100%; box-sizing: border-box;
  height: 56px; padding: 22px 44px 6px 14px;
  border: 1px solid rgba(148,183,246,.2);
  border-radius: 13px;
  background: rgba(9,14,26,.6);
  color: #eaf1ff;
  font: 400 15px/1.2 var(--font-sans);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lg__input:hover { border-color: rgba(148,183,246,.34); }
.lg__input:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(9,14,26,.85);
  box-shadow: 0 0 0 4px rgba(59,130,246,.16);
}

/* `placeholder=" "` no HTML existe só para isto: `:placeholder-shown` é a
   única forma puramente de CSS de saber se o campo está vazio, e é o que
   deixa o rótulo subir sem uma linha de JavaScript. */
.lg__label {
  position: absolute; left: 15px; top: 18px;
  color: rgba(200,218,250,.5);
  font: 400 15px/1 var(--font-sans);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), color .16s ease;
}
.lg__input:focus + .lg__label,
.lg__input:not(:placeholder-shown) + .lg__label {
  transform: translateY(-11px) scale(.76);
  color: #7ea9f5;
}
/* O preenchimento automático do Chrome pinta o fundo e não dispara evento
   nenhum; sem esta regra o rótulo fica por cima do texto preenchido. */
.lg__input:-webkit-autofill + .lg__label { transform: translateY(-11px) scale(.76); color: #7ea9f5; }
.lg__input:-webkit-autofill {
  -webkit-text-fill-color: #eaf1ff;
  transition: background-color 5000s ease-in-out 0s;   /* segura o azul do UA */
}

/* Traço que cresce do centro no foco. */
.lg__underline {
  position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  transform: scaleX(0);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.lg__input:focus ~ .lg__underline { transform: scaleX(1); }

.lg__eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  background: transparent; color: rgba(200,218,250,.5);
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.lg__eye:hover { color: #cfe0ff; background: rgba(148,183,246,.12); }
.lg__eye.is-on { color: #60a5fa; }
.lg__eye:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* ---- Manter conectado --------------------------------------------------- */

.lg__check {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: 11px; margin: 6px 0 22px;
  cursor: pointer;
}
.lg__check input { position: absolute; opacity: 0; width: 0; height: 0; }

.lg__box {
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid rgba(148,183,246,.36);
  border-radius: 6px;
  color: #fff;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.lg__box svg { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .22s ease .04s; }
.lg__check input:checked + .lg__box {
  background: linear-gradient(140deg, #3b82f6, #1d4ed8);
  border-color: transparent;
}
.lg__check input:checked + .lg__box svg { stroke-dashoffset: 0; }
.lg__check input:focus-visible + .lg__box { outline: 2px solid #3b82f6; outline-offset: 3px; }
.lg__check:active .lg__box { transform: scale(.92); }

.lg__check-text { font: 500 14px/1.35 var(--font-sans); color: rgba(226,236,255,.82); }
.lg__check-text em {
  display: block; margin-top: 2px;
  font: 400 12px/1.4 var(--font-sans); font-style: normal;
  color: rgba(200,218,250,.42);
}

/* ---- Botão -------------------------------------------------------------- */

.lg__submit {
  position: relative;
  width: 100%; height: 50px;
  border: 0; border-radius: 13px;
  background: linear-gradient(120deg, #3b82f6, #1d4ed8);
  color: #fff;
  font: 600 15px/1 var(--font-sans);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(29,78,216,.4);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lg__submit:hover  { filter: brightness(1.07); box-shadow: 0 16px 34px rgba(29,78,216,.5); }
.lg__submit:active { transform: translateY(1px); }
.lg__submit:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.lg__submit[disabled] { cursor: default; filter: saturate(.7); }

/* Brilho que atravessa o botão — a única animação em repouso da tela, lenta o
   bastante para não competir com a leitura. */
.lg__submit::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: lg-sheen 4.6s ease-in-out infinite;
}
@keyframes lg-sheen {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

.lg__submit-text { position: relative; z-index: 1; transition: opacity .15s ease; }
.lg__spinner {
  position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.32);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: spin .7s linear infinite;
}
.lg__submit.is-loading .lg__submit-text { opacity: 0; }
.lg__submit.is-loading .lg__spinner     { opacity: 1; }
.lg__submit.is-loading::after           { animation: none; opacity: 0; }

.lg__foot {
  margin: 20px 0 0; text-align: center;
  font: 400 12.5px/1.5 var(--font-sans);
  color: rgba(200,218,250,.4);
}

/* ---- Telas estreitas ---------------------------------------------------- */

@media (max-width: 900px) {
  .lg { overflow: auto; }
  .lg__wrap { grid-template-columns: 1fr; place-items: center; }
  .lg__aside { display: none; }
}

/* ---- Menos movimento ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lg__aurora, .lg__page--flip, .lg__submit::after,
  .lg__card, .lg__aside, .lg__spinner {
    animation: none !important;
  }
  .lg__card.is-wrong { outline: 2px solid #f87171; outline-offset: 3px; }
  .lg__card.is-ok    { opacity: 0; }
  .lg__spinner { border-top-color: rgba(255,255,255,.9); }
  * { transition-duration: .01ms !important; }
}