/* ==========================================================
   Video Wallpapers Premium — WoozChat
   Ajuste manual do desfoque/opacidade/zoom:
     --wz-video-blur     -> intensidade do desfoque (ex.: 8px suave, 30px forte)
     --wz-video-opacity  -> opacidade do vídeo (0.0 a 1.0)
     --wz-video-scale    -> zoom para esconder bordas do blur (>=1)
     --wz-video-darken   -> escurecimento sobre o vídeo (0.0 a 1.0)
   ========================================================== */
:root {
  --wz-video-blur: 1px;
  --wz-video-opacity: 0.9;
  --wz-video-scale: 1.15;
  --wz-video-darken: 0.35;
}

.wz-video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #05070d;
}
.wz-video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--wz-video-scale));
  filter: blur(var(--wz-video-blur)) saturate(1.1);
  opacity: var(--wz-video-opacity);
  will-change: transform, filter;
}
.wz-video-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 15, var(--wz-video-darken));
  pointer-events: none;
}

/* Quando há vídeo, matamos o ::before/::after do body que pintaria um fundo por cima */
body.has-profile-theme:has(.wz-video-bg)::before,
body.has-profile-theme:has(.wz-video-bg)::after { display: none !important; }

/* Fallback (navegadores sem :has): quando a página tem tema de vídeo (adiciona classe abaixo) */
body.has-video-bg::before,
body.has-video-bg::after { display: none !important; content: none !important; }
body.has-video-bg { background: transparent !important; }

/* Esconde o div antigo .profile-theme-bg quando estamos em tema de vídeo */
.profile-page.has-video-theme > .profile-theme-bg { display: none !important; }

/* Deixa a hero e cards com fundo semitransparente pra ver o vídeo */
.profile-page.has-video-theme .profile-hero-inner,
.profile-page.has-video-theme .profile-card,
.profile-page.has-video-theme .profile-bio-card {
  background: rgba(6, 10, 22, 0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mobile: reduzir desfoque/scale pra performance */
@media (max-width: 720px) {
  :root {
    --wz-video-blur: 1px;
    --wz-video-scale: 1.1;
  }
}