/*
 * ABERTURA — tela de marca exibida no carregamento
 *
 * Compartilhada pelo login e pelo painel. Fica em arquivo proprio porque as
 * duas telas a usam: duplicar o bloco faria um ajuste futuro sair pela
 * metade em uma delas.
 *
 * Nao depende das variaveis de nenhuma das duas telas — cada var() tem
 * fallback. O login tem paleta propria (--preto, --azul) e o painel tem a
 * dele (--fundo, --azul-claro); sem os fallbacks a marca sumiria numa delas.
 */

.abertura {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--fundo, #0a0d14);
  transition: opacity .5s ease, visibility .5s;
}
.abertura.saindo { opacity: 0; visibility: hidden; }

.abertura-marca { text-align: center; padding: 0 24px; }

/* Peso fino e letras muito espaçadas: a marca precisa parecer assinatura,
   não título de sistema. */
.abertura-nome {
  font-size: clamp(20px, 4.2vw, 42px);
  font-weight: 200;
  letter-spacing: .34em;
  text-indent: .34em;            /* compensa o espaço extra do último caractere */
  color: var(--texto, #f0f3f8);
  white-space: nowrap;
  animation: marca-entra 1s cubic-bezier(.2,.7,.3,1) both;
}

/* A linha cresce do centro e liga o nome ao subtítulo. */
.abertura-linha {
  height: 1px; width: 0; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--azul-claro, #7ba0ff), transparent);
  animation: marca-linha .85s cubic-bezier(.4,0,.2,1) .45s both;
}

.abertura-sub {
  margin-top: 16px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .42em; text-indent: .42em;
  color: var(--apagado, #6b7891);
  animation: marca-sub .7s ease .8s both;
}

@keyframes marca-entra {
  from { opacity: 0; letter-spacing: .7em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: .34em; filter: none; }
}
@keyframes marca-linha { from { width: 0; } to { width: 190px; } }
@keyframes marca-sub   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Quem pediu menos animação vê a marca parada, sem perder a tela. */
@media (prefers-reduced-motion: reduce) {
  .abertura-nome, .abertura-linha, .abertura-sub { animation: none; }
  .abertura-linha { width: 190px; }
}