/* Tela de carregamento: aparece antes do JavaScript do sistema (que é grande e demora a chegar em
   celulares). Fica num arquivo separado de propósito, para funcionar com CSP sem 'unsafe-inline'.
   Quando o React monta, ele substitui todo o conteúdo de #root, e esta tela some sozinha. */
:root {
  --boot-bg: #f3f6fc;
  --boot-ink: #0b1b3a;
  --boot-accent: #1d63ed;
  --boot-track: #dbe3f1;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --boot-bg: #0a1224;
    --boot-ink: #eef3ff;
    --boot-accent: #4d8dff;
    --boot-track: #243660;
    color-scheme: dark;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--boot-bg);
}

.boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--boot-ink);
}

.boot-mark {
  width: 64px;
  height: 58px;
  animation: boot-breathe 1.8s ease-in-out infinite;
}

.boot-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.boot-name span {
  color: var(--boot-accent);
}

.boot-track {
  width: 160px;
  height: 4px;
  border-radius: 999px;
  background: var(--boot-track);
  overflow: hidden;
}

.boot-track::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--boot-accent);
  animation: boot-slide 1.2s ease-in-out infinite;
}

.boot-text {
  font-size: 0.875rem;
  opacity: 0.7;
}

@keyframes boot-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes boot-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark,
  .boot-track::after {
    animation: none;
  }
  .boot-track::after {
    width: 100%;
    opacity: 0.5;
  }
}

/* Só aparece se o navegador estiver sem JavaScript (o React nunca monta nesse caso). */
.boot-noscript {
  text-align: center;
  padding: 2rem;
  font-family: sans-serif;
}