/* ---- preloader (RHE-114): véu de carregamento da página inteira ----
   A página tem assets pesados (vídeo do hero ~16MB no desktop, fotos grandes);
   o overlay cobre tudo até o `load` (ou o teto de segurança do preloader.js).
   Visual 100% CSS + texto — nada aqui depende de download pra aparecer. */

/* trava o scroll enquanto carrega: a classe nasce no <html> (markup) e o
   preloader.js a remove no dismiss; com JS desligado o <noscript> a desfaz */
html.pl-carregando{ overflow: hidden; }

#preloader{
  position: fixed;
  inset: 0;
  z-index: 999; /* acima da nav (30) e de qualquer motor da página */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--bg);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
#preloader.pl-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* wordmark em texto (mesma fonte da nav) — o PNG do logo tem ~700KB,
   não faz sentido o preloader esperar o próprio logo baixar */
.pl-logo{
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pl-logo span{ color: var(--blue); }

.pl-spinner{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(78,168,238,.18);
  border-top-color: var(--blue);
  animation: pl-gira .8s linear infinite;
}

/* mesma voz do .respiro-tag (mono, uppercase, tracking largo) */
.pl-tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0;
}

@keyframes pl-gira{
  to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .pl-spinner{ animation: none; border-top-color: rgba(78,168,238,.18); }
}