/* ===========================================================================
   CAMADA 6 - PAGINA (autenticacao)

   Este arquivo e curto DE PROPOSITO, e encolheu de 160 para ~70 linhas quando
   a tela virou coluna unica centrada. Toda decoracao que existia para
   sustentar um painel de marca (aurora, malha, holofote, headline, bullets)
   deixou de existir junto com o painel.

   O que sobrou e o minimo para a tela nao ser um formulario cru:
   um brilho de fundo, o alinhamento central e o respiro no celular.

   REGRAS DESTE ARQUIVO:
     1. nenhuma cor literal, tudo vem de tokens.css;
     2. nao reestilizar seletor interno de componente. Para mudar o cartao,
        usa-se modificador (--glass, --accent, --elevated), que mora em
        components.css e serve a todas as telas;
     3. o atraso de entrada nunca e escrito aqui: vem de --reveal-offset, que
        a cortina de abertura define sozinha.
   =========================================================================== */

/* ===========================================================================
   O FUNDO VIVO, EM TRES CAMADAS

   As tres usam o MESMO keyframe (`ipr-drift`, em base.css) e trocam apenas o
   destino e o periodo. O keyframe le --drift-x e --drift-y, entao um
   deslocamento escrito uma unica vez produz tres movimentos diferentes: duas
   luzes que respiram em direcoes opostas e uma malha de pontos que escorre.

   Os periodos (--dur-ambient-1/2/3, definidos em tokens.css) sao PRIMOS
   ENTRE SI, e o porque esta documentado la: a combinacao das tres camadas so
   se repete depois de quase quatro horas. Ninguem fica nesta tela tempo
   suficiente para ver o fundo dar a volta.

   Todas animam SO transform. Nenhuma repinta: o desfoque e rasterizado uma
   vez e o compositor apenas desloca a textura pronta. A regra global de
   prefers-reduced-motion congela as tres.
   =========================================================================== */

/* Camada 1: luz quente, o azul da marca, atras do cartao. */
.ipr-auth::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 46%;
  inset-inline-start: 44%;
  inline-size: min(48rem, 125vw);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, var(--color-aurora), transparent 62%);
  filter: blur(90px);
  opacity: .6;
  --drift-x: -5%;
  --drift-y: 4%;
  animation: ipr-drift var(--dur-ambient-1) var(--ease-in-out) infinite alternate;
}

/* Camada 2: luz fria, deslocada e indo para o outro lado. Duas luzes da mesma
   cor no mesmo sentido se somariam num borrao unico; opostas, elas se cruzam
   e o fundo ganha profundidade. */
.ipr-auth::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 62%;
  inset-inline-start: 62%;
  inline-size: min(38rem, 105vw);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, var(--color-aurora-cool), transparent 65%);
  filter: blur(80px);
  --drift-x: 6%;
  --drift-y: -5%;
  animation: ipr-drift var(--dur-ambient-2) var(--ease-in-out) infinite alternate;
}

/*
  Camada 3: malha de pontos escorrendo na diagonal.

  E a unica camada com movimento que da para PERCEBER: as duas luzes sao
  lentas e difusas demais para o olho registrar. A malha da a sensacao de que
  a tela esta viva sem nunca disputar atencao com o formulario.

  O deslocamento e EXATAMENTE um ladrilho (40px), com `linear` e sem
  `alternate`: ao completar o ciclo os pontos caem em cima de onde estavam, e
  a emenda e invisivel. Qualquer outro valor produziria um salto a cada volta.

  O elemento passa 5rem de cada borda para que o deslocamento nunca revele a
  quina, e a mascara apaga a malha nas pontas para ela nao virar papel de
  parede.
*/
.ipr-auth__ambient {
  position: absolute;
  inset: -5rem;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--color-mesh-dot) 1.2px, transparent 1.2px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 15%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 15%, transparent 72%);
  --drift-x: 40px;
  --drift-y: 40px;
  animation: ipr-drift var(--dur-ambient-3) linear infinite;
}

/* --- A pilha central ------------------------------------------------------ */

/* A pilha centraliza os filhos (align-items: center), o que encolheria o
   cartao ate o tamanho do conteudo. Ele e o unico que quer a largura toda. */
.ipr-auth__card { width: 100%; }

/* Titulo e subtitulo centrados: com a marca centrada logo acima, alinhar o
   texto a esquerda quebraria o eixo vertical que sustenta a composicao.
   Os CAMPOS continuam a esquerda, porque rotulo centrado sobre campo e
   ilegivel de varrer com o olho. */
.ipr-auth__header {
  --stack-gap: var(--space-2);
  text-align: center;
}

.ipr-auth__footer {
  margin-top: var(--space-6);
  text-align: center;
}

.ipr-auth__legal {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.ipr-flashes { margin-block: var(--space-5); }

/* --- Responsivo -----------------------------------------------------------
   Quase nada: coluna unica centrada ja E o layout de celular. Aqui so cai o
   respiro e o vidro, que no celular custaria sem entregar. */

@media (max-width: 639px) {
  .ipr-auth { padding: var(--space-6) var(--space-4); }
  .ipr-auth__panel { gap: var(--space-6); }
  /* Desfocar o fundo custa uma passada de GPU na tela inteira. No celular,
     onde o brilho atras do cartao ocupa quase todo o quadro e fica quase
     uniforme, nao ha o que desfocar. Vira superficie solida. */
  .ipr-auth__card {
    --card-bg: var(--color-surface-1);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}