/* ==========================================================================
   Tela de carregamento — a logo se constrói camada por camada
   ==========================================================================
   O conteúdo da página já está no HTML embaixo desta tela: ela é só uma
   camada por cima, nunca um portão. Buscador, leitor de tela e quem tiver
   JavaScript desligado passam direto.
   ========================================================================== */

.carregando {
  position: fixed;
  inset: 0;
  z-index: 9000;                 /* acima de tudo, menos de mensagens de erro */
  display: grid;
  place-items: center;
  background: var(--color-background);
  /* o brilho de aurora de fundo, para não ser um retângulo chapado */
  background-image:
    radial-gradient(60% 50% at 22% 18%, var(--color-primary-surface) 0%, transparent 70%),
    radial-gradient(55% 45% at 82% 78%, var(--color-secondary-surface) 0%, transparent 70%);
  transition: opacity 420ms var(--ease-out), visibility 0s linear 420ms;
}

/* Estado final: some e sai do caminho de cliques */
.carregando.acabou {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Sem JavaScript a tela nunca sairia — então ela nem aparece.
   `html.js` é escrito por carregando.js na primeira linha de execução. */
html:not(.js) .carregando { display: none; }

.carregando__palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6);
}

.carregando__logo {
  position: relative;
  width: min(340px, 66vw);
  aspect-ratio: 1264 / 993;
  isolation: isolate;
}
.carregando__camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 62%;
  opacity: 0;
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   A construção.
   Deslocamentos maiores que os do rodapé: aqui a montagem É o espetáculo,
   e há tela inteira para ela acontecer. Mesmo assim nada voa de longe —
   continua sendo um adesivo assentando, não peça solta.
   -------------------------------------------------------------------------- */
.carregando.montando .camada--base {
  animation: cg-base 520ms var(--ease-saltinho) 60ms forwards;
}
.carregando.montando .camada--cena {
  animation: cg-cena 560ms var(--ease-saltinho) 260ms forwards;
}
.carregando.montando .camada--letreiro {
  animation: cg-letreiro 620ms var(--ease-saltinho) 450ms forwards;
}
.carregando.montando .camada--faixa {
  animation: cg-faixa 560ms var(--ease-saltinho) 620ms forwards;
}
.carregando.montando .logo-animado__brilho {
  animation: cg-brilho 900ms ease-in-out 900ms forwards;
}
.carregando.montando .logo-animado__estrelas path {
  animation: cg-estrela 700ms ease-out var(--atraso, 0s) forwards;
  animation-delay: calc(1000ms + var(--atraso, 0s) * .3);
}

@keyframes cg-base     { from { opacity: 0; transform: scale(.78); }
                           to { opacity: 1; transform: scale(1); } }
@keyframes cg-cena     { from { opacity: 0; transform: scale(.86); }
                           to { opacity: 1; transform: scale(1); } }
@keyframes cg-letreiro { from { opacity: 0; transform: translateY(-11%) scale(.9) rotate(-7deg); }
                           to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes cg-faixa    { from { opacity: 0; transform: translateY(13%) scale(.92); }
                           to { opacity: 1; transform: translateY(0) scale(1); } }

/* O facho passa uma vez só, marcando que a logo ficou pronta */
@keyframes cg-brilho {
  0%   { background-position: 130% 130%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -30% -30%; opacity: 0; }
}
@keyframes cg-estrela {
  0%   { opacity: 0; transform: scale(.3) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(10deg); }
  100% { opacity: .9; transform: scale(1) rotate(0deg); }
}

/* --------------------------------------------------------------------------
   Barra de progresso
   Anda em passos irregulares até 90% e só completa quando a página está
   pronta de verdade. Barra que corre lisa até 100% e fica esperando é a que
   faz o carregamento parecer mais longo do que é.
   -------------------------------------------------------------------------- */
.carregando__barra {
  width: min(220px, 50vw);
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.carregando__barra span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform 320ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   Movimento reduzido: a tela nem chega a aparecer.
   Quem pediu menos movimento não quer uma animação de abertura — quer o
   conteúdo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .carregando { display: none !important; }
}