/* ==========================================================================
   ABERTURA — a tela que aparece entre o login e o sistema.
   Vale para a central e para o portal; os dois carregam este arquivo.

   Regras que a tela obedece:
   · dura pouco e sai sozinha — quem entra quer trabalhar, não assistir;
   · anima só `opacity` e `transform`, que o navegador resolve na GPU sem
     recalcular layout;
   · lê as cores do tema, então nasce certa no claro e no escuro;
   · some inteira sob `prefers-reduced-motion`.
   ========================================================================== */

.abertura {
  position: fixed;
  inset: 0;
  /* Nunca mais larga que a janela. Numa tela de 375px a medição acusou 386 —
     uma tela de abertura que empurra a página para o lado é o oposto do que
     ela deveria fazer, e o usuário só perceberia como "a tela treme ao
     abrir". */
  max-width: 100vw;
  overflow: hidden;
  z-index: 99999;
  display: grid;
  place-items: center;
  /* O mesmo fundo da aplicação, para a transição não piscar. */
  background: var(--sx-bg-1, var(--fundo, #f7f9fd));
  animation: abertura-sai 380ms cubic-bezier(.4, 0, 1, 1) 1020ms forwards;
}
:root[data-tema="escuro"] .abertura { background: #050b16; }

/* Brilho atrás da marca. Fica no fundo e respira uma vez só. */
.abertura::before {
  content: "";
  position: absolute;
  width: min(520px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,126,240,.18) 0%, rgba(47,126,240,0) 68%);
  animation: abertura-brilho 1400ms cubic-bezier(.22,1,.36,1) forwards;
}
:root[data-tema="escuro"] .abertura::before {
  background: radial-gradient(circle, rgba(76,201,255,.22) 0%, rgba(76,201,255,0) 68%);
}

.abertura__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
}

.abertura__logo {
  width: min(228px, 62vw);
  height: auto;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  animation: abertura-entra 620ms cubic-bezier(.22,1,.36,1) 60ms forwards;
}
/* No escuro a logo é azul-escura sobre fundo escuro: precisa clarear. */
:root[data-tema="escuro"] .abertura__logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(76,201,255,.45));
}

/* A palavra. O espaçamento entre letras fecha durante a entrada — é o que dá
   a sensação de algo se assentando, sem mover a caixa toda. */
.abertura__marca {
  font-family: var(--somax-fonte, "Manrope", system-ui, sans-serif);
  font-size: clamp(15px, 3.4vw, 20px);
  font-weight: 700;
  letter-spacing: .62em;
  text-indent: .62em;            /* compensa o espaço que sobra à direita */
  white-space: nowrap;
  color: var(--sx-text-2, var(--texto-suave, #5c6b85));
  opacity: 0;
  animation: abertura-marca 760ms cubic-bezier(.22,1,.36,1) 220ms forwards;
}

/* Barra de progresso discreta: uma varredura, não um giro infinito. Girar
   para sempre sugere que travou. */
.abertura__barra {
  width: min(190px, 46vw);
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sx-line, var(--borda, #e8eefa));
  opacity: 0;
  animation: abertura-surge 300ms ease 380ms forwards;
}
.abertura__barra i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent, var(--somax-500, #2f7ef0), transparent);
  transform: translateX(-120%);
  animation: abertura-varre 900ms cubic-bezier(.4,0,.2,1) 420ms forwards;
}

@keyframes abertura-entra {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes abertura-marca {
  from { opacity: 0; letter-spacing: .92em; text-indent: .92em; }
  to   { opacity: 1; letter-spacing: .38em; text-indent: .38em; }
}
@keyframes abertura-surge { to { opacity: 1; } }
@keyframes abertura-varre { to { transform: translateX(300%); } }
@keyframes abertura-brilho {
  from { opacity: 0; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1); }
  to   { opacity: .55; transform: scale(1.04); }
}
@keyframes abertura-sai {
  to { opacity: 0; visibility: hidden; }
}

/* Quem pediu menos movimento vê a marca parada e por menos tempo. A tela não
   desaparece: ela ainda cobre a troca de telas, que é a função dela. */
@media (prefers-reduced-motion: reduce) {
  .abertura,
  .abertura::before,
  .abertura__logo,
  .abertura__marca,
  .abertura__barra,
  .abertura__barra i {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .abertura { animation: abertura-sai 1ms linear 520ms forwards; }
  .abertura__logo { opacity: 1; transform: none; }
  .abertura__marca { opacity: 1; letter-spacing: .38em; text-indent: .38em; }
}