/* ============================================================================
   NULLAIN LOGIN — camada de componentes da tela de autenticação
   Depende de nullain-theme.css (tokens + primitivas), carregado ANTES deste.
   ============================================================================ */

html, body { min-height: 100%; }

.login__head { display: grid; gap: var(--nl-s1); }
.login__head .nl-display { font-size: 1.75rem; }

.login__form { display: grid; gap: var(--nl-s4); }
.login__form .field { display: grid; }
.login__form .nl-btn { margin-top: var(--nl-s1); }

/* O GSAP anima [data-reveal] e [data-field]. Se o CDN não carregar, o
   conteúdo tem que aparecer mesmo assim — por isso nada começa em opacity:0
   no CSS. O estado inicial é escrito pelo próprio GSAP. */

/* ── Arte da Nullain ao lado do título ───────────────────────────────
   A figura entra como coluna própria DENTRO do pitch, para o cartão de
   login à direita não perder largura. Em telas estreitas ela some: a
   ilustração é vertical e alta, e empilhá-la sobre o formulário jogaria
   os campos para fora da primeira dobra no celular. */

.login__pitch-copy { display: grid; gap: var(--nl-s4); }

/* Sem a arte (arquivo ausente ou tela estreita) o pitch permanece o
   grid de uma coluna que já era. */
.login__hero { display: none; }

@media (min-width: 1100px) {
  /* Mais respiro horizontal: a figura precisa de espaço real para
     aparecer grande sem espremer o título. */
  .nl-auth__main { max-width: 1320px; grid-template-columns: 1fr minmax(360px, 420px); }

  .login__pitch {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--nl-s8);
  }

  .login__hero {
    display: block;
    /* Acompanha a altura da viewport em vez de um tamanho fixo: em
       notebook 768px de altura ela não estoura a dobra, e em monitor
       grande cresce e domina o espaço vazio à esquerda. */
    height: clamp(340px, 58vh, 620px);
    /* Caixa em retrato + `cover`: a arte vem num quadro quadrado de
       3000px com a figura ocupando só 30,7% da largura, no centro.
       `contain` a encolheria até caber na largura e ela sairia minúscula;
       `cover` escala pela altura e apara as margens vazias das laterais.

       A proporção não é estética, é geométrica: a figura só cabe inteira
       enquanto a largura for >= 0,324 x a altura. 0,38 deixa a caixa
       colada nela com uma folga pequena de cada lado. Mexer nesse número
       para baixo começa a raspar o traço. */
    aspect-ratio: 38 / 100;
    width: auto;
    object-fit: cover;
    /* A figura não está exatamente no meio do quadro (centro em 47,6%),
       então centralizar a imagem deixaria a folga desigual. */
    object-position: 47.6% center;
    /* A arte é traço preto: no tema escuro sumiria no fundo. Como é
       monocromática, inverter preserva o desenho. */
    filter: none;
  }
  [data-scheme="dark"] .login__hero { filter: invert(1); }
}

/* Monitores largos: deixa a figura ainda maior, que é o destaque pedido. */
@media (min-width: 1500px) {
  .nl-auth__main { max-width: 1460px; }
  .login__hero { height: clamp(420px, 66vh, 760px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Respiro sutil — a personagem olha para cima, o leve flutuar reforça
     a pose sem virar distração na tela de login. */
  .login__hero { animation: login-hero-float 6s ease-in-out infinite; }
}
@keyframes login-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}