/* ═══════════════════════════════════════════════════════════════════
   Voxa · tela de carregamento entre páginas
   A marca é usada como máscara do próprio PNG, então o preenchimento
   acompanha o contorno real da logo em vez de um desenho aproximado.
   Usa --bg, que existe tanto no app quanto em public-pages.css.
   ═══════════════════════════════════════════════════════════════════ */

/* A entrada é instantânea de propósito: com transição de entrada a tela
   nova aparecia por baixo enquanto o overlay ainda estava subindo. Só a
   saída é suave. */
.vxl {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0b0919);
  opacity: 1;
  transition: none;
}
.vxl[hidden] { display: none; }
.vxl.is-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease;
}

/* Grade técnica discreta, do mesmo sistema das telas do app. */
.vxl::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139, 111, 240, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 111, 240, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}

.vxl-mark {
  position: relative;
  width: 92px;
  height: 102px;
}

/* As duas camadas compartilham o recorte da logo. */
.vxl-mark i {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask-image: url('/voxa-icon.png');
          mask-image: url('/voxa-icon.png');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Contorno apagado: mostra a forma inteira o tempo todo. */
.vxl-mark-ghost { background: rgba(139, 111, 240, .17); }

/* Camada que sobe preenchendo a marca. */
.vxl-mark-fill {
  background: linear-gradient(165deg, #5b7cfa 0%, #7c4dff 46%, #b06bff 100%);
  clip-path: inset(100% 0 0 0);
  animation: vxl-fill 1.25s cubic-bezier(.62, .04, .34, 1) infinite;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, .45));
}

@keyframes vxl-fill {
  0%   { clip-path: inset(100% 0 0 0); }
  62%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); opacity: .55; }
}

/* Linha de luz que acompanha a borda do preenchimento. */
.vxl-mark::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(196, 165, 255, .85), transparent);
  animation: vxl-line 1.25s cubic-bezier(.62, .04, .34, 1) infinite;
}

@keyframes vxl-line {
  0%   { top: 100%; opacity: 0; }
  12%  { opacity: 1; }
  62%  { top: 0; opacity: 1; }
  76%, 100% { top: 0; opacity: 0; }
}

.vxl-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  text-align: center;
  font: 700 9.5px/1 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(196, 165, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
  .vxl-mark-fill { animation: none; clip-path: inset(0 0 0 0); opacity: .9; }
  .vxl-mark::after { display: none; }
  .vxl { transition: none; }
}

/* Rede de segurança: sem JS a tela some sozinha em vez de travar o site.
   O atributo data-boot é removido pelo script no primeiro carregamento. */
.vxl[data-boot] { animation: vxl-failsafe 0s linear 8s forwards; }
@keyframes vxl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }