/* ============================================================
   Fondo «niebla de sala» — videodjralph.com
   Dos masas de color muy difuminadas que derivan despacio, como
   el humo de una sala atravesado por focos.

   Nota de rendimiento: la prueba usaba filter:blur(90px) sobre
   elementos de 60vw, que en un movil obliga a la GPU a redibujar
   una superficie enorme en cada fotograma. Aqui se consigue el
   mismo aspecto con degradados radiales, que no cuestan nada, y
   el movimiento va por transform, que no provoca repintado.
   ============================================================ */
.vdjr-niebla{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  mix-blend-mode:screen;
}
.vdjr-niebla i{
  position:absolute;
  display:block;
  border-radius:50%;
  will-change:transform;
}
/* Masa azul, arriba a la izquierda */
.vdjr-niebla i:nth-child(1){
  width:78vw;height:78vw;
  left:-20vw;top:-26vw;
  background:radial-gradient(circle closest-side,
    rgba(31,122,255,.30) 0%, rgba(31,122,255,.16) 38%, rgba(31,122,255,.05) 64%, transparent 78%);
  animation:vdjrDeriva1 34s ease-in-out infinite alternate;
}
/* Masa violeta, abajo a la derecha */
.vdjr-niebla i:nth-child(2){
  width:70vw;height:70vw;
  right:-22vw;bottom:-26vw;
  background:radial-gradient(circle closest-side,
    rgba(96,64,205,.26) 0%, rgba(96,64,205,.14) 38%, rgba(96,64,205,.04) 64%, transparent 78%);
  animation:vdjrDeriva2 41s ease-in-out infinite alternate;
}
/* Un tercer foco tenue, para que no se lea el vaiven de solo dos */
.vdjr-niebla i:nth-child(3){
  width:46vw;height:46vw;
  left:38vw;top:22vh;
  background:radial-gradient(circle closest-side,
    rgba(102,178,255,.14) 0%, rgba(102,178,255,.05) 50%, transparent 74%);
  animation:vdjrDeriva3 52s ease-in-out infinite alternate;
}

@keyframes vdjrDeriva1{ to{ transform:translate3d(11vw,9vh,0) scale(1.14) } }
@keyframes vdjrDeriva2{ to{ transform:translate3d(-10vw,-8vh,0) scale(1.11) } }
@keyframes vdjrDeriva3{ to{ transform:translate3d(-7vw,6vh,0)  scale(1.18) } }

/* En movil, menos superficie y sin el tercer foco */
@media (max-width:768px){
  .vdjr-niebla i:nth-child(3){display:none}
  .vdjr-niebla i:nth-child(1){width:110vw;height:110vw;left:-32vw;top:-40vw}
  .vdjr-niebla i:nth-child(2){width:100vw;height:100vw;right:-34vw;bottom:-38vw}
}

/* Quien pide menos animación la ve quieta, no desaparece */
@media (prefers-reduced-motion:reduce){
  .vdjr-niebla i{animation:none}
}

#page-container{position:relative;z-index:1}