/* ==========================================================================
   Cortina de carregamento

   Cobre a tela inteira desde a primeira pintura e sai quando a página está
   pronta de verdade. O problema que ela resolve é o da página que aparece aos
   pedaços -- primeiro o texto sem estilo, depois o mapa, depois o saldo --
   que dá a impressão de coisa quebrada mesmo quando está tudo certo.

   Este arquivo é carregado no <head>, antes do conteúdo. Isso é de propósito:
   folha de estilo no head bloqueia a pintura, então a cortina já está pintada
   quando o primeiro pixel do conteúdo poderia aparecer. Carregar no fim do
   body deixaria justamente o flash que a cortina existe para evitar.

   Comportamento em docs/painel/carregando.js.
   ========================================================================== */

:root {
  --carregando-fundo: #f4f4f6;
  --carregando-tinta: #0c0d0f;
  --carregando-suave: #6b6b76;
  --carregando-marca: #b4160f;
  --carregando-linha: #e2e2e7;
}

/* O tema é aplicado pelo carregando.js antes da primeira pintura, lendo a
   mesma chave que o resto do app usa. O prefers-color-scheme fica como rede
   de segurança para quando o localStorage não pode ser lido (aba anônima,
   dados bloqueados) -- nesses casos o js não escreve data-theme, e a regra
   abaixo assume o tema do sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carregando-fundo: #0e0e11;
    --carregando-tinta: #f2f2f5;
    --carregando-suave: #9a9aa6;
    --carregando-linha: #2a2a31;
  }
}
:root[data-theme="dark"] {
  --carregando-fundo: #0e0e11;
  --carregando-tinta: #f2f2f5;
  --carregando-suave: #9a9aa6;
  --carregando-linha: #2a2a31;
}

#carregando {
  position: fixed;
  inset: 0;
  /* Acima de tudo: o mapa do Leaflet e o player do vídeo pitch sobem sozinhos
     a camada deles, e a cortina precisa ficar por cima dos dois. */
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carregando-fundo);
  /* A cortina não rola junto com o que está atrás dela. */
  overscroll-behavior: contain;
}

.carregando-miolo {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

/* O selo: o logo parado no meio, um anel girando em volta.
   O caminho da imagem e relativo a ESTA folha, nao ao documento -- e por isso
   que `../img/` funciona igual nas telas de /painel/, nas de /vaga/ e na
   pagina de apresentacao, que moram em profundidades diferentes. */
.carregando-selo {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
}
.carregando-selo::before {
  content: "";
  width: 44px;
  height: 44px;
  background: url("../img/logo.png") center / contain no-repeat;
}
.carregando-selo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--carregando-linha);
  border-top-color: var(--carregando-marca);
  border-radius: 50%;
  animation: carregando-girar .9s linear infinite;
}

.carregando-marca {
  margin: 0;
  color: var(--carregando-tinta);
  font: 650 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
}

.carregando-nota {
  margin: 0;
  color: var(--carregando-suave);
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}

@keyframes carregando-girar { to { transform: rotate(360deg); } }

/* A saída. `visibility` entra com atraso igual ao da transição para que o
   fade aconteça antes de o elemento sumir; sem isso ele desaparece seco. */
#carregando.saiu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

/* Rede de segurança: se o js não rodar (erro de rede no arquivo, extensão que
   bloqueia, bug nosso), a cortina sai sozinha aos 12s. Uma tela que aparece
   tarde é um defeito; uma tela que nunca aparece é a pessoa presa. */
@keyframes carregando-desistir {
  to { opacity: 0; visibility: hidden; }
}
#carregando {
  animation: carregando-desistir .4s ease 12s forwards;
}

@media (prefers-reduced-motion: reduce) {
  /* O anel continua girando, mais devagar.
     Desligar era exagero meu: `prefers-reduced-motion` existe para conter
     movimento amplo -- parallax, deslize de tela inteira, coisa que embrulha
     o estomago de quem tem sensibilidade vestibular. Um anel de 78px girando
     no lugar nao e isso, e sem ele a tela parece travada em vez de carregando,
     que e justamente a duvida que a cortina veio tirar.
     O que sai e o fade: troca de estado seca, sem transicao. */
  .carregando-selo::after { animation-duration: 1.8s; }
  #carregando { animation-duration: 0s; animation-delay: 12s; }
  #carregando.saiu { transition: none; }
}