/*
 * login-motion.css — animação padrão das telas de login (v3, 08/10/2026)
 * Fonte única: _servidor/.claude/login-motion/. Cada sistema copia os dois arquivos
 * (CSS + JS) sem editar e carrega com ?v=. Ajuste por marca é só pelas variáveis abaixo.
 *
 * Contrato (atributos, não classes, para não colidir com o CSS do sistema):
 *   data-lm="marca"   no painel escuro da marca (aside)
 *   data-lm="luz"     <span aria-hidden="true"> vazio dentro do painel: a luz que segue o ponteiro
 *   data-lm="titulo"  headline do painel (sobe revelada por máscara; não quebra em palavras)
 *   data-lm="linha"   linha de acento sob a headline (desenha da esquerda)
 *   data-lm="sobe"    qualquer bloco que entra subindo; a ordem vem do grupo
 *   data-lm-grupo     pai dos "sobe": "marca" (cadência lenta) ou "form" (rápida)
 *   data-lm="erro"    aviso de erro do login (balança uma vez)
 *   data-lm="entrar"  botão de enviar (vira "Entrando…" com spinner)
 *   data-lm="logo"    (opcional) bloco da logo; sem ele, o JS usa o 1º bloco do painel
 *
 * O JS também injeta no painel, sozinho: órbitas girando e pontos de luz subindo.
 *
 * Quem esconde é o mesmo JS que revela: sem a classe .lm-on no <html>, nada muda.
 */
/* :where() zera a especificidade: o :root do sistema vence em qualquer ordem de carga. */
:where(:root) {
  --lm-cor: rgba(99, 174, 230, .35);   /* cor da luz do painel: o acento da marca, translúcido */
  --lm-cor-2: var(--lm-cor);           /* segunda luz (cor secundária da marca, se houver) */
  --lm-deriva: 26s;                    /* uma volta da luz que se move sozinha */
  --lm-dur: 760ms;
  --lm-ease: cubic-bezier(.16, 1, .3, 1);
  --lm-ease-in: cubic-bezier(.7, 0, .84, 0);
  --lm-cadencia-marca: 90ms;
  --lm-cadencia-form: 55ms;
  --lm-orbita-x: 78%;                  /* centro das órbitas, relativo ao painel */
  --lm-orbita-y: 82%;
}

/* O painel vira contexto de empilhamento: sem isso a luz (z-index:-1) cai atrás do fundo dele. */
[data-lm="marca"] { isolation: isolate; }

/* Duas luzes no painel: derivam sozinhas, devagar (propriedade translate), e a principal
   ainda é puxada pelo mouse (propriedade transform). As duas se somam. */
[data-lm="luz"] {
  position: absolute; z-index: -1; pointer-events: none;
  left: 30%; top: 25%; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lm-cor), transparent);
  transform: translate3d(var(--lm-dx, 0px), var(--lm-dy, 0px), 0);
  opacity: .9;
}
[data-lm="luz"]::after {
  content: ''; position: absolute; left: 75%; top: 95%; width: 560px; height: 560px;
  margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lm-cor-2), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .lm-on [data-lm="luz"] {
    transition: transform 1.2s var(--lm-ease);
    animation: lm-deriva var(--lm-deriva) ease-in-out infinite alternate;
  }
  .lm-on [data-lm="luz"]::after {
    animation: lm-deriva-2 calc(var(--lm-deriva) * .8) ease-in-out infinite alternate;
  }

  .lm-on [data-lm="sobe"] {
    animation: lm-sobe var(--lm-dur) var(--lm-ease) backwards;
    animation-delay: calc(var(--lm-base, 0ms) + min(var(--lm-i, 0), 8) * var(--lm-cadencia, 60ms));
  }
  .lm-on [data-lm-grupo="marca"] { --lm-cadencia: var(--lm-cadencia-marca); --lm-base: 280ms; }
  .lm-on [data-lm-grupo="form"]  { --lm-cadencia: var(--lm-cadencia-form);  --lm-base: 80ms; }

  .lm-on [data-lm="titulo"] { animation: lm-revela 900ms var(--lm-ease) 120ms backwards; }
  .lm-on [data-lm="linha"]  { transform-origin: left center; animation: lm-desenha 700ms var(--lm-ease) 520ms backwards; }
  .lm-on [data-lm="erro"]   { animation: lm-balanca 420ms var(--lm-ease-in) 200ms 1; }

  .lm-on [data-lm="entrar"] svg { transition: transform 200ms var(--lm-ease); }
  .lm-on [data-lm="entrar"]:hover svg:last-child { transform: translateX(3px); }
}

@keyframes lm-sobe    { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes lm-revela  { from { clip-path: inset(0 0 100% 0); transform: translate3d(0, 28px, 0); } to { clip-path: inset(-20% -20% -20% -20%); } }
@keyframes lm-deriva {
  0%   { translate: 0 0; scale: 1; }
  35%  { translate: 22vw 14vh; scale: 1.15; }
  70%  { translate: 6vw 42vh; scale: .9; }
  100% { translate: -6vw 20vh; scale: 1.1; }
}
@keyframes lm-deriva-2 {
  0%   { translate: 0 0; scale: 1; }
  50%  { translate: -24vw -30vh; scale: 1.2; }
  100% { translate: -8vw -58vh; scale: .95; }
}
@keyframes lm-desenha { from { transform: scaleX(0); } }
@keyframes lm-balanca {
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

/* Estado "Entrando…": vale com ou sem movimento reduzido (é retorno, não decoração). */
[data-lm="entrar"][aria-busy="true"] { cursor: progress; opacity: .85; }
[data-lm="entrar"] .lm-gira {
  width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  [data-lm="entrar"] .lm-gira { animation: lm-gira 700ms linear infinite; }
}
@keyframes lm-gira { to { transform: rotate(360deg); } }

/* ── Ambiente do painel (v3): injetado pelo JS, então sem JS não existe ─────────── */
.lm-ambiente { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lm-orbitas {
  position: absolute; left: var(--lm-orbita-x); top: var(--lm-orbita-y);
  width: 0; height: 0;
}
.lm-orbita {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .11);
  translate: -50% -50%;
}
.lm-orbita--1 { width: 640px; height: 640px; }
.lm-orbita--2 { width: 450px; height: 450px; border-style: dashed; border-color: rgba(255, 255, 255, .08); }
.lm-orbita--3 { width: 270px; height: 270px; }
.lm-orbita::after {                        /* o "planeta" que corre na órbita */
  content: ''; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: #fff; opacity: .85;
  box-shadow: 0 0 14px 4px var(--lm-cor), 0 0 3px 1px rgba(255, 255, 255, .8);
}
.lm-orbita--2::after { width: 6px; height: 6px; margin-left: -3px; top: -3px; opacity: .7; }
.lm-orbita--3::after { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; }

.lm-ponto {
  position: absolute; bottom: -10px; left: var(--x, 50%);
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: #fff; opacity: 0; box-shadow: 0 0 8px 1px var(--lm-cor);
}

[data-lm-logo] { position: relative; }
.lm-halo {
  position: absolute; z-index: -1; pointer-events: none; left: -36px; top: 50%;
  width: 220px; height: 140px; margin-top: -70px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lm-cor), transparent);
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  .lm-orbita--1 { animation: lm-gira-orbita 70s linear infinite; }
  .lm-orbita--2 { animation: lm-gira-orbita 46s linear infinite reverse; }
  .lm-orbita--3 { animation: lm-gira-orbita 28s linear infinite; }
  .lm-orbitas { animation: lm-orbitas-entra 1.6s var(--lm-ease) 200ms backwards; }

  .lm-ponto { animation: lm-sobe-ponto var(--t, 12s) linear var(--d, 0s) infinite; }

  .lm-on [data-lm-logo] {
    animation: lm-logo-entra 900ms var(--lm-ease) backwards, lm-flutua 7s ease-in-out 900ms infinite;
  }
  .lm-halo { animation: lm-pulsa 5s ease-in-out infinite; }
}

@keyframes lm-gira-orbita { to { rotate: 360deg; } }
@keyframes lm-orbitas-entra { from { opacity: 0; scale: .7; } }
@keyframes lm-sobe-ponto {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  12%  { opacity: .75; }
  80%  { opacity: .45; }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), -105vh, 0); }
}
@keyframes lm-logo-entra { from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.92); filter: blur(4px); } }
@keyframes lm-flutua { 50% { transform: translate3d(0, -4px, 0); } }
@keyframes lm-pulsa { 50% { opacity: .95; scale: 1.15; } }