/* Só transform e opacity: rodam na placa de vídeo e não param enquanto o JavaScript trava a página. */
.pm-carregando {
  position: fixed;
  inset: 0;
  /* Atrás do #root: qualquer tela do app cobre esta, então ela nunca prende o usuário. */
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 42%, #0c2a3d 0, #04121b 38%, #000 72%);
  color: #fafafa;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
}

.pm-carregando--sobre {
  z-index: 60;
  transition:
    opacity 0.28s ease-out,
    visibility 0.28s;
}

.pm-carregando--saindo {
  opacity: 0;
  visibility: hidden;
}

.pm-carregando p {
  margin: 0;
}

.pm-arte {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 28px;
}

.pm-arte i {
  position: absolute;
  display: block;
}

.pm-anel {
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(90, 204, 230, 0.15) 72%, #5acce6 98%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: pm-girar 2.2s linear infinite;
}

.pm-anel-fundo {
  inset: 0;
  border: 1px solid rgba(127, 180, 207, 0.14);
  border-radius: 50%;
}

.pm-placa,
.pm-feixe {
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  border-radius: 11px;
}

.pm-placa {
  --base: translateY(var(--altura)) rotateX(58deg) rotateZ(45deg);
  border: 1px solid rgba(90, 204, 230, 0.55);
  background: linear-gradient(135deg, rgba(90, 204, 230, 0.2), rgba(52, 140, 253, 0.05));
  transform: var(--base);
  animation: pm-onda 2.2s ease-in-out infinite;
  animation-delay: var(--atraso);
}

.pm-placa:nth-of-type(3) {
  --altura: 22px;
  --atraso: 0s;
}

.pm-placa:nth-of-type(4) {
  --altura: 11px;
  --atraso: 0.14s;
}

.pm-placa:nth-of-type(5) {
  --altura: 0px;
  --atraso: 0.28s;
}

.pm-placa:nth-of-type(6) {
  --altura: -11px;
  --atraso: 0.42s;
}

.pm-placa:nth-of-type(7) {
  --altura: -22px;
  --atraso: 0.56s;
}

.pm-feixe {
  border: 1px solid #a5ecfb;
  background: rgba(90, 204, 230, 0.32);
  box-shadow: 0 0 22px 3px rgba(90, 204, 230, 0.55);
  animation: pm-varredura 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.pm-titulo {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pm-texto {
  margin-top: 6px !important;
  color: #7fb4cf;
  font-size: 14px;
}

.pm-demora,
.pm-recarregar {
  max-width: 320px;
  margin-top: 14px !important;
  color: #7fb4cf;
  font-size: 13px;
  opacity: 0;
  animation: pm-aparecer 0.5s ease-out 12s forwards;
}

/* Se o JavaScript não baixar, nada tira a tela de carregamento: só o CSS ainda pode avisar. */
.pm-recarregar {
  color: #fafafa;
  animation-delay: 40s;
}

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

@keyframes pm-onda {
  0%,
  100% {
    transform: var(--base);
    opacity: 0.4;
  }
  50% {
    transform: translateY(calc(var(--altura) - 5px)) rotateX(58deg) rotateZ(45deg);
    opacity: 1;
  }
}

@keyframes pm-varredura {
  0%,
  100% {
    transform: translateY(30px) rotateX(58deg) rotateZ(45deg);
    opacity: 0;
  }
  18%,
  82% {
    opacity: 1;
  }
  50% {
    transform: translateY(-30px) rotateX(58deg) rotateZ(45deg);
  }
}

@keyframes pm-aparecer {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-anel,
  .pm-placa,
  .pm-feixe {
    animation: none;
  }

  .pm-placa {
    opacity: 0.8;
  }

  .pm-feixe {
    opacity: 0;
  }
}