/* loading.css — tela de carregamento (admin/index.html), mesmo fundo claro
   de login.html (cinza claro do body + blobs). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Ubuntu Sans', sans-serif;
  min-height: 100vh;
}

.loading-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6; /* = fundo (body) de login.css: --gray-100 */
  position: relative;
  overflow: hidden;
}

/* ── blobs de fundo (mesmo visual de login.html, sem o comportamento de
   seguir o mouse — tela é rápida demais pra isso valer a pena) ── */
.bg-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; animation: blobFloat 20s ease-in-out infinite; }
.blob-core { position: absolute; inset: 0; border-radius: 50%; background: rgba(17,24,39,.05); }
.blob-1 { width: 560px; height: 560px; top: -140px; right: -140px; animation-duration: 24s; }
.blob-2 { width: 420px; height: 420px; bottom: -110px; left: -100px; animation-duration: 19s; animation-delay: -4s; }
.blob-3 { width: 380px; height: 380px; top: 12%; left: -60px; animation-duration: 17s; animation-delay: -9s; }
.blob-3 .blob-core { background: rgba(17,24,39,.03); }
.blob-4 { width: 340px; height: 340px; bottom: 6%; right: -60px; animation-duration: 15s; animation-delay: -2s; }
.blob-4 .blob-core { background: rgba(17,24,39,.045); }
.blob-5 { width: 70px; height: 70px; top: 55%; right: 20%; animation-duration: 13s; animation-delay: -6s; }
.blob-5 .blob-core { background: rgba(17,24,39,.06); }
.blob-6 { width: 60px; height: 60px; top: 10%; left: 40%; animation-duration: 21s; animation-delay: -11s; }
.blob-6 .blob-core { background: rgba(17,24,39,.05); }

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(24px, -32px) scale(1.06); }
  50%      { transform: translate(-18px, 18px) scale(0.94); }
  75%      { transform: translate(16px, 28px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

.loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 24px;
}

.loading-logo { width: 620px; max-width: 90vw; }
.loading-logo img { width: 100%; height: auto; object-fit: contain; }

.loading-bar-track {
  /* a imagem do logo tem uma faixa transparente embaixo (~10% da largura);
     a margem negativa, em % da largura do logo, puxa a barra pra perto do
     desenho em qualquer tamanho de tela */
  margin-top: -4%;
  /* mesma largura do desenho do logo (a imagem tem ~4% de margem
     transparente de cada lado) */
  width: 92%;
  height: 9px;
  border-radius: 999px;
  background: rgba(17,24,39,.10);
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #111827;
  /* 0 → 85% em 2,25s (+ 0,25s pra completar = mínimo de 2,5s na tela); se a
     verificação demorar, segue avançando devagar até 95% enquanto espera */
  animation:
    loadingProgress 2.25s cubic-bezier(.4,0,.2,1) forwards,
    loadingAguardando 12s 2.25s cubic-bezier(.1,.6,.3,1) forwards;
}
/* aplicada via JS (loading.js) quando a verificação termina e o tempo mínimo
   já passou: completa a barra até 100% antes de navegar. */
.loading-bar-fill.done {
  animation: none;
  width: 100% !important;
  transition: width .25s ease;
}
@keyframes loadingProgress {
  0%   { width: 0%; }
  60%  { width: 65%; }
  100% { width: 85%; }
}
@keyframes loadingAguardando {
  from { width: 85%; }
  to   { width: 95%; }
}