/*
 * 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.
 *
 * A COR DA LINHA E DA MARCA, nao da pagina: laranja da Ita nas duas telas.
 * Antes ela lia --azul-claro de cada pagina e saia laranja no login e azul
 * no painel — a mesma abertura com duas caras. O fundo continua o da
 * pagina (var com fallback), porque e sobre ele que a tela aparece depois.
 */

.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(--abertura-fio, #ff7a45), 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; }
}