/* Fundo desenhado das telas de entrada (portal e Meu RH). Aprovado em
   29/09/2026: densidade e tamanho normais, só parallax pelo mouse, cartão
   sólido com sombra, alto contraste sem desenho. O desenho é gerado por
   assets/fundoLogin.js; aqui ficam a cor (token por tema) e a camada.
   O portal troca de tema por data-theme; o rh segue o aparelho e define o
   token no próprio rh.css. */
:root[data-theme="escuro"], :root[data-theme="azul"] { --fundo-login-traco:rgba(245,245,247,.10); }
:root[data-theme="verde"] { --fundo-login-traco:rgba(61,90,61,.17); }

.fundo-login { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict; }
.fundo-login-camada { position:absolute; inset:calc(var(--fundo-login-lado) * -1);
  background:var(--fundo-login-traco, rgba(112,98,84,.18));
  -webkit-mask:var(--fundo-login-img) 0 0 / var(--fundo-login-lado) var(--fundo-login-lado) repeat;
          mask:var(--fundo-login-img) 0 0 / var(--fundo-login-lado) var(--fundo-login-lado) repeat; }
/* Alto contraste: nada de desenho nem movimento (mesma regra das datas comemorativas). */
:root[data-theme="contraste"] .fundo-login { display:none; }

/* O cartão continua sólido; a sombra descola do desenho. */
.login-card { box-shadow:var(--sombra-cartao-alta); }
:root[data-theme="contraste"] .login-card { box-shadow:none; }

/* Entrada da tela (20/10, inspirada no Dashboard de Preços de Chapecó): o
   cartão sobe e aparece, e o logo assenta logo depois. Roda uma vez, ao abrir
   a tela; só opacity/transform. Depois o logo fica flutuando devagar, sem
   parar: exceção que o Raffael abriu só para o login (20/10), onde ninguém
   trabalha. Quem pediu menos movimento ao aparelho e o alto contraste veem
   tudo parado. */
@keyframes login-entra { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes login-logo  { from { opacity:0; transform:translateY(-6px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes login-brilho { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
@keyframes login-flutua { 0%, 100% { transform:none; } 50% { transform:translateY(-5px) scale(1.015); } }
@keyframes login-pulsa  { 0%, 100% { opacity:1; transform:none; } 50% { opacity:.5; transform:scale(.94); } }
.login-card { animation:login-entra 520ms var(--curva-saida) both; }
.login-card .logo-login { position:relative; animation:login-logo 640ms var(--curva-saida) 140ms both, login-flutua 4.8s ease-in-out 800ms infinite; }

/* Temas escuros: um brilho laranja da marca atrás do logo, que acende na
   entrada e depois pulsa devagar. "azul" é o apelido antigo do Escuro. */
:root:is([data-theme="escuro"], [data-theme="azul"]) .login-card .logo-login { isolation:isolate; }
:root:is([data-theme="escuro"], [data-theme="azul"]) .login-card .logo-login::before { content:""; position:absolute; left:50%; top:50%; width:260px; height:84px; margin:-42px 0 0 -130px;
  border-radius:999px; background:var(--login-brilho, rgba(255,90,40,.14)); filter:blur(24px); z-index:-1; pointer-events:none;
  animation:login-brilho 900ms var(--curva-saida) 220ms both, login-pulsa 3.6s ease-in-out 1.2s infinite; }

:root[data-theme="contraste"] .login-card, :root[data-theme="contraste"] .login-card .logo-login { animation:none; }
@media (prefers-reduced-motion: reduce) {
  .login-card, .login-card .logo-login, .login-card .logo-login::before { animation:none !important; }
}