/* ============================================================================
   Raviera Intranet — tela de entrada.

   É a única tela que TODA a empresa vê todo dia, e a primeira impressão do
   sistema: por isso ela ganhou palco próprio (a marca à esquerda, o formulário
   à direita) no lugar do cartão solto no meio da página.

   Três regras valem para tudo aqui:

     1. A cor vem dos tokens do app.css. Tema claro/escuro, acento e temporada
        chegam de graça — esta tela não tem paleta própria. As únicas cores
        fixas são os azuis do logotipo (a seta é a MARCA, não o acento de quem
        navega — mesma decisão do .history-seta).

     2. Movimento é ambiente, nunca obstáculo. As luzes de fundo se movem em
        dezenas de segundos, o formulário entra uma vez e para. Nada pisca e
        nada atrasa quem já sabe a senha e quer digitar.

     3. Quem pediu menos movimento recebe a tela parada. O corte global do
        app.css só encurta a duração, o que para uma animação INFINITA vira um
        ciclo velocíssimo em vez de silêncio — por isso o bloco do fim deste
        arquivo desliga as ambientes com `animation: none`.
   ========================================================================== */

/* O enfeite da temporada é do miolo do sistema, e aqui ele cairia bem em cima
   do cartão (ele se posiciona pelo canto superior direito da JANELA). O palco
   já tem a seta da marca como enfeite; a COR da temporada continua valendo,
   porque vem dos tokens. */
body.login-screen .season-decor::before,
body.login-screen .season-decor::after { display: none; }

/* ---------- Fundo animado ------------------------------------------------
   Camada fixa atrás de tudo (abaixo até do brilho da temporada, que é -1) e
   sem captar clique: é decoração, não interface. */
.login-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

/* A malha dá profundidade ao vazio e desliza um quadrado por minuto — devagar
   o bastante para ninguém "ver andar", perto o bastante para a tela não
   parecer congelada. A máscara apaga a malha antes que ela alcance o cartão. */
.login-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(var(--personal-accent-rgb), .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--personal-accent-rgb), .10) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(120% 90% at 18% 24%, #000 0%, transparent 68%);
  mask-image: radial-gradient(120% 90% at 18% 24%, #000 0%, transparent 68%);
  animation: login-grid-pan 48s linear infinite;
}
@keyframes login-grid-pan { to { background-position: 62px 62px, 62px 62px; } }

/* As três luzes. Duas usam o acento (acompanham tema e temporada) e a do canto
   inferior usa o azul do logotipo, para a marca aparecer no fundo sem desenho
   nenhum. O blur alto é o que transforma o círculo em atmosfera. */
/* No claro as luzes ficam mais discretas de propósito: com opacidade alta o
   fundo inteiro vira um lavado de ciano e o cartão branco deixa de se destacar
   dele. No escuro é o contrário — é a luz que separa o cartão do preto. */
.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  will-change: transform;
}
:root[data-theme="dark"] .login-orb { opacity: .5; filter: blur(78px); }

.login-orb-1 {
  top: -18vmax; left: -12vmax;
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle at 50% 50%, rgba(var(--personal-accent-rgb), .62), transparent 68%);
  animation: login-drift-1 27s ease-in-out infinite alternate;
}
.login-orb-2 {
  right: -16vmax; bottom: -20vmax;
  width: 48vmax; height: 48vmax;
  background: radial-gradient(circle at 50% 50%, rgba(6, 168, 230, .5), transparent 68%);
  animation: login-drift-2 34s ease-in-out infinite alternate;
}
.login-orb-3 {
  top: 42%; left: 46%;
  width: 26vmax; height: 26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(1, 86, 166, .38), transparent 70%);
  animation: login-drift-3 41s ease-in-out infinite alternate;
}
@keyframes login-drift-1 { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.14); } }
@keyframes login-drift-2 { to { transform: translate3d(-11vmax, -6vmax, 0) scale(1.08); } }
@keyframes login-drift-3 { to { transform: translate3d(-7vmax, 9vmax, 0) scale(.86); } }

/* ---------- Estrutura ---------- */
.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: 64px;
  min-height: 100dvh;
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 32px;
}

/* A entrada é uma só, declarada aqui e distribuída por --d: cada peça sobe no
   seu tempo e para. `both` guarda o estado inicial antes do atraso — sem isso
   o texto aparece inteiro e só depois começa a subir. */
@keyframes login-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.login-rise { animation: login-rise .72s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0s); }

/* ---------- Palco da marca (coluna esquerda) ---------- */
.login-stage {
  position: relative;
  overflow: clip;
  padding: 8px 0;
}

.login-brand { display: inline-flex; align-items: center; gap: 13px; }
/* O halo pulsa junto do logotipo: é o único elemento da tela que respira, e
   é o que dá vida à marca sem animar a marca em si. */
.login-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(var(--personal-accent-rgb), .22);
}
.login-brand-mark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 21px;
  border: 1px solid rgba(var(--personal-accent-rgb), .35);
  animation: login-halo 3.6s ease-in-out infinite;
}
@keyframes login-halo {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: .2; transform: scale(1.06); }
}
.login-brand-mark img { width: 30px; height: 30px; border-radius: 8px; }
.login-brand b { display: block; color: var(--text); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.login-brand small {
  display: block; margin-top: 2px;
  color: var(--muted-2); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}

.login-stage-title {
  margin-top: 30px;
  color: var(--text);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
}
/* "Movimento" recebe o degradê da marca com um brilho que atravessa a palavra
   de tempos em tempos. É a única animação que chama atenção de propósito. */
.login-stage-title em {
  font-style: normal;
  background: linear-gradient(100deg, #0156a6, #06a8e6 34%, var(--personal-accent) 50%, #06a8e6 66%, #0156a6);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: login-sheen 7s ease-in-out infinite;
}
:root[data-theme="dark"] .login-stage-title em {
  background-image: linear-gradient(100deg, #2a6fc4, #2dbdf7 34%, var(--personal-accent) 50%, #2dbdf7 66%, #2a6fc4);
}
@keyframes login-sheen {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

.login-stage-lead {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.login-highlights { display: flex; flex-direction: column; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.login-highlights li { display: flex; align-items: flex-start; gap: 13px; }
.login-highlights .login-hl-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  color: var(--accent-strong);
  background: rgba(var(--personal-accent-rgb), .12);
  border: 1px solid rgba(var(--personal-accent-rgb), .2);
  transition: transform .25s ease, background-color .25s ease;
}
.login-highlights li:hover .login-hl-icon { transform: translateY(-2px); background: rgba(var(--personal-accent-rgb), .2); }
.login-highlights .icon { width: 18px; height: 18px; }
.login-hl-text { display: block; }
.login-hl-text b { display: block; color: var(--text); font-size: 13.5px; font-weight: 700; }
.login-hl-text span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* A seta do logotipo, grande e apagada, flutuando atrás do texto: o enfeite da
   tela é a própria marca. Ela cabe INTEIRA dentro do palco de propósito — o
   `overflow: clip` cortaria a silhueta numa reta, e uma seta cortada no meio
   lê como falha de renderização, não como marca-d'água. */
.login-stage-arrow {
  position: absolute;
  right: 1%;
  bottom: 2px;
  width: min(250px, 33%);
  aspect-ratio: 1;
  /* A silhueta se dissolve na direção do texto: assim ela é atmosfera no canto
     e desaparece antes de encostar na linha que alguém vai ler. */
  -webkit-mask-image: radial-gradient(circle at 78% 76%, #000 18%, transparent 74%);
  mask-image: radial-gradient(circle at 78% 76%, #000 18%, transparent 74%);
  opacity: .09;
  pointer-events: none;
  animation: login-float 11s ease-in-out infinite alternate;
}
:root[data-theme="dark"] .login-stage-arrow { opacity: .16; }
@keyframes login-float {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-22px) rotate(3deg); }
}

/* ---------- Cartão do formulário (coluna direita) ---------- */
.login-panel { display: flex; justify-content: center; }

.login-card {
  --login-field-bg: var(--surface-2);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  padding: 34px 32px 26px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-lg);
  animation: login-card-in .8s cubic-bezier(.22, 1, .36, 1) both;
}
:root[data-theme="dark"] .login-card { background: color-mix(in srgb, var(--surface) 78%, transparent); }
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Fio de luz na borda de cima: o detalhe que separa "caixa branca" de "vidro". */
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--personal-accent-rgb), .7), transparent);
}
/* O brilho segue o ponteiro (o login.js escreve --login-mx/--login-my). Fica
   invisível até o mouse chegar, e em telas de toque nunca acende porque o JS
   nem registra o ouvinte. */
.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--login-mx, 50%) var(--login-my, 0%),
              rgba(var(--personal-accent-rgb), .16), transparent 72%);
  transition: opacity .35s ease;
}
.login-card:hover::after { opacity: 1; }
.login-card > * { position: relative; }

.login-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px 5px 9px;
  border-radius: 99px;
  border: 1px solid rgba(var(--personal-accent-rgb), .28);
  background: rgba(var(--personal-accent-rgb), .1);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.login-chip .icon { width: 14px; height: 14px; }

.login-card h2 { margin-top: 16px; color: var(--text); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.login-sub { margin-top: 6px; color: var(--muted); font-size: 13.5px; }

.login-form { display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }

/* ---------- Campos ---------- */
.login-field { display: flex; flex-direction: column; gap: 7px; }
.login-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; transition: color .2s ease; }
.login-field:focus-within .login-label { color: var(--accent-strong); }

.login-input { position: relative; display: flex; align-items: center; }
.login-input input {
  width: 100%;
  height: 50px;
  padding: 0 14px 0 45px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--login-field-bg);
  color: var(--text);
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.login-input input::placeholder { color: var(--muted-2); }
.login-input input:hover { border-color: var(--line-strong); }
.login-input input:focus {
  border-color: rgba(var(--personal-accent-rgb), .75);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(var(--personal-accent-rgb), .14);
}
:root[data-theme="dark"] .login-input input:focus { background: var(--surface-3); }
/* Senha divide o espaço da direita com o botão do olho. */
.login-input.has-action input { padding-right: 48px; }

.login-input > .icon {
  position: absolute;
  left: 15px;
  color: var(--muted-2);
  transition: color .2s ease, transform .25s cubic-bezier(.34, 1.4, .64, 1);
  pointer-events: none;
}
.login-input:focus-within > .icon { color: var(--accent-strong); transform: scale(1.08); }

/* O traço que corre sob o campo em foco — o mesmo gesto do sublinhado de um
   campo de papel, só que ele nasce do centro. */
.login-input::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--personal-accent), transparent);
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.login-input:focus-within::after { transform: scaleX(1); }

/* Botão do olho. A barra do "olho fechado" é desenhada aqui e não vem da
   biblioteca de ícones: assim ela ANIMA (risca o olho da esquerda para a
   direita) em vez de trocar de desenho num piscar. O box-shadow embaixo é o
   recorte que faz a barra parecer passar por cima do olho, e usa a cor do
   campo — por isso --login-field-bg existe. */
.login-reveal {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted-2);
  transition: color .2s ease, background-color .2s ease;
}
.login-reveal:hover { color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .12); }
.login-reveal::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -2px 0 var(--login-field-bg);
  transform: rotate(-45deg) scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.login-reveal[aria-pressed="true"]::after { transform: rotate(-45deg) scaleX(1); }
.login-input:focus-within .login-reveal::after { box-shadow: 0 -2px 0 var(--surface); }
:root[data-theme="dark"] .login-input:focus-within .login-reveal::after { box-shadow: 0 -2px 0 var(--surface-3); }

/* Aviso de Caps Lock: o erro de senha mais comum da empresa, avisado antes de
   virar tentativa gasta. Some sozinho quando a tecla é desligada. */
.login-caps {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: -6px;
  /* O --gold da casa (#c2a15a) não alcança 4.5:1 em fundo claro, e este é um
     aviso: precisa ser lido. No escuro o token já é a versão clara e passa. */
  color: #8a6100;
  font-size: 12px;
  font-weight: 600;
  animation: login-rise .28s ease-out both;
}
:root[data-theme="dark"] .login-caps { color: var(--gold); }
.login-caps .icon { width: 15px; height: 15px; }

/* ---------- Erro ---------- */
.login-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(229, 72, 77, .1);
  border: 1px solid rgba(229, 72, 77, .35);
  color: #c62f36;
  font-size: 13px;
  line-height: 1.45;
  /* Entra subindo e dá um tranco — quem errou a senha precisa PERCEBER que a
     página respondeu, senão parece que o clique não pegou. */
  animation: login-rise .3s ease-out both, login-shake .45s .3s both;
}
:root[data-theme="dark"] .login-error { color: #ff8f93; }
.login-error .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }
@keyframes login-shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(3px); }
  50% { transform: translateX(-3px); }
}

/* ---------- Botão ---------- */
.login-submit {
  position: relative;
  width: 100%;
  height: 52px;
  margin-top: 4px;
  border-radius: 15px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
}
/* Reflexo que atravessa o botão no hover: o mesmo gesto de um botão de vidro. */
.login-submit::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: translateX(-160%) skewX(-16deg);
  pointer-events: none;
}
.login-submit:hover:not(:disabled)::after { animation: login-shine .8s ease-out; }
@keyframes login-shine { to { transform: translateX(360%) skewX(-16deg); } }
.login-submit .icon { transition: transform .25s cubic-bezier(.34, 1.4, .64, 1); }
.login-submit:hover:not(:disabled) .icon { transform: translateX(4px); }

/* Enquanto o NBS responde: a seta vira roda e o botão para de aceitar clique.
   O texto quem troca é o login.js, para o rótulo continuar traduzível no HTML. */
.login-spinner {
  display: none;
  width: 17px; height: 17px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-submit.is-loading .icon { display: none; }
.login-submit.is-loading .login-spinner { display: block; }
.login-submit.is-loading::after { display: none; }

/* ---------- Caminho alternativo (código por e-mail) ----------------------
   Tudo daqui até o rodapé serve às duas telas de quem não tem usuário do NBS.
   Nenhuma regra acima foi alterada: a tela de login continua exatamente como
   estava, e o que ela ganhou foi a linha `.login-alt` abaixo do botão. */
.login-alt {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}
.login-alt a {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--personal-accent-rgb), .35);
  transition: border-color .2s ease;
}
.login-alt a:hover { border-bottom-color: var(--personal-accent); }

/* Aviso neutro (a sessão de 1 hora que terminou). Não é erro: ninguém errou
   nada, o relógio é que virou — por isso não usa o vermelho do .login-error. */
.login-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(var(--personal-accent-rgb), .1);
  border: 1px solid rgba(var(--personal-accent-rgb), .28);
  color: var(--accent-strong);
  font-size: 13px;
  line-height: 1.45;
  animation: login-rise .3s ease-out both;
}
.login-notice .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }

/* O campo do código: seis dígitos espaçados, como o de um aplicativo de banco.
   O `text-align: center` é o que separa "campo de texto" de "código". */
.login-code {
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: .38em;
  text-align: center;
  /* A letra espaçada empurra o texto para a direita do centro: o padding
     compensa a última lacuna, senão o código parece torto no campo. */
  padding-right: 31px !important;
}

.login-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: -4px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.login-countdown .icon { width: 14px; height: 14px; }
.login-countdown.is-over { color: #8a6100; font-weight: 600; }
:root[data-theme="dark"] .login-countdown.is-over { color: var(--gold); }

/* O <input type="date"> traz o calendário nativo do navegador. Ele nasce preto
   e some no tema escuro; e no claro fica cinza demais ao lado dos outros
   ícones. `color-scheme` deixa o navegador desenhá-lo já no tema certo. */
.login-input input[type="date"] { color-scheme: light; }
:root[data-theme="dark"] .login-input input[type="date"] { color-scheme: dark; }
.login-input input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s ease;
}
.login-input input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ---------- Rodapé ---------- */
.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  color: var(--muted-2);
  font-size: 12px;
  text-align: center;
}
.login-foot .icon { width: 14px; height: 14px; }

/* ---------- Telas estreitas ----------------------------------------------
   Abaixo de 980px as duas colunas viram uma. O palco não some — ele encolhe
   para a marca e a frase, porque é ele que diz ONDE a pessoa está. O que sai
   são os itens da lista e a seta gigante, que virariam rolagem antes do
   campo de usuário. */
@media (max-width: 980px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    max-width: 480px;
    padding: 40px 22px 34px;
    align-content: center;
  }
  .login-stage { text-align: center; overflow: visible; }
  .login-brand { justify-content: center; }
  .login-stage-title { margin-top: 20px; font-size: clamp(28px, 8vw, 38px); }
  .login-stage-lead { margin: 12px auto 0; font-size: 14px; }
  .login-highlights, .login-stage-arrow { display: none; }
  .login-card { max-width: none; padding: 28px 22px 22px; border-radius: 22px; }
}
@media (max-width: 420px) {
  .login-shell { padding: 26px 14px; gap: 22px; }
  .login-card { padding: 24px 18px 18px; }
  .login-card h2 { font-size: 23px; }
}
/* Tela baixa (notebook 768px de altura com a barra do navegador): a coluna
   única não pode empurrar o botão para fora do primeiro quadro. */
@media (max-height: 720px) and (min-width: 981px) {
  .login-highlights { gap: 11px; margin-top: 22px; }
  .login-stage-title { margin-top: 22px; }
}

/* ---------- Menos movimento ----------------------------------------------
   Vale tanto para a preferência do perfil quanto para a do sistema. As
   entradas o corte global já resolve (elas terminam no primeiro quadro); o que
   PRECISA de regra é o que roda para sempre: com duração de .01ms uma animação
   infinita não para, ela acelera. */
:root[data-motion="reduzida"] .login-grid,
:root[data-motion="reduzida"] .login-orb,
:root[data-motion="reduzida"] .login-brand-mark::after,
:root[data-motion="reduzida"] .login-stage-title em,
:root[data-motion="reduzida"] .login-stage-arrow,
:root[data-motion="reduzida"] .login-submit:hover:not(:disabled)::after { animation: none; }
:root[data-motion="reduzida"] .login-stage-title em { background-position: 50% 0; }
/* A roda de espera é exceção nas duas preferências: ela não é enfeite, é o
   sinal de que o NBS ainda está respondendo. Parada, diria que travou — o que
   ela não pode é girar em .01ms, o que o corte global faria. */
:root[data-motion="reduzida"] .login-spinner { animation-duration: 1s !important; animation-iteration-count: infinite !important; }

@media (prefers-reduced-motion: reduce) {
  .login-grid,
  .login-orb,
  .login-brand-mark::after,
  .login-stage-title em,
  .login-stage-arrow,
  .login-submit:hover:not(:disabled)::after { animation: none !important; }
  .login-stage-title em { background-position: 50% 0; }
  .login-spinner { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
}