/* =================================================
   POGALUA · SISTEMA DE FONDO
   Glow background con halos de luz
================================================= */

/* ---------------------------------
   Base general del fondo
---------------------------------- */
body.pogalua-glow-background {
  position: relative;
  background-color: #ffffff;
  overflow-x: hidden;
}

/* Mantener cabecera limpia y por encima */
body.pogalua-glow-background #masthead,
body.pogalua-glow-background .site-header,
body.pogalua-glow-background header {
  position: relative;
  z-index: 20;
  background: #ffffff;
}

/* El contenido siempre por encima del fondo */
body.pogalua-glow-background #page,
body.pogalua-glow-background .site,
body.pogalua-glow-background .content-wrap,
body.pogalua-glow-background .site-content,
body.pogalua-glow-background main {
  position: relative;
  z-index: 2;
}

/* ---------------------------------
   Capas de luz
---------------------------------- */
body.pogalua-glow-background::before,
body.pogalua-glow-background::after {
  content: "";
  position: fixed;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  will-change: transform, opacity, background-position, background-size, filter;
  transform-origin: center center;
}

/* Capa principal: halos grandes y suaves */
body.pogalua-glow-background::before {
  background:
    radial-gradient(circle at 10% 18%, rgba(150, 92, 255, 0.11) 0%, rgba(150, 92, 255, 0) 20%),
    radial-gradient(circle at 84% 14%, rgba(255, 208, 120, 0.10) 0%, rgba(255, 208, 120, 0) 18%),
    radial-gradient(circle at 86% 78%, rgba(124, 225, 236, 0.10) 0%, rgba(124, 225, 236, 0) 21%),
    radial-gradient(circle at 18% 86%, rgba(255, 178, 140, 0.8) 0%, rgba(255, 178, 140, 0) 17%),
    radial-gradient(circle at 48% 58%, rgba(221, 176, 255, 0.5) 0%, rgba(221, 176, 255, 0) 14%);
  filter: blur(28px);
  opacity: 1;
  animation:
    pogaluaGlowDriftA 26s ease-in-out infinite alternate,
    pogaluaGlowPulseA 18s ease-in-out infinite;
}

/* Capa secundaria: halos más pequeños y vivos */
body.pogalua-glow-background::after {
  background:
    radial-gradient(circle at 26% 32%, rgba(255, 224, 158, 0.6) 0%, rgba(255, 224, 158, 0) 10%),
    radial-gradient(circle at 52% 86%, rgba(214, 129, 255, 0.8) 0%, rgba(214, 129, 255, 0) 13%),
    radial-gradient(circle at 92% 44%, rgba(163, 224, 255, 0.7) 0%, rgba(163, 224, 255, 0) 11%),
    radial-gradient(circle at 14% 60%, rgba(190, 160, 255, 0.5) 0%, rgba(190, 160, 255, 0) 10%);
  filter: blur(18px);
  opacity: 0.95;
  animation:
    pogaluaGlowDriftB 17s ease-in-out infinite alternate,
    pogaluaGlowPulseB 11s ease-in-out infinite;
}

/* ---------------------------------
   Animaciones
---------------------------------- */
@keyframes pogaluaGlowDriftA {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    background-position:
      10% 18%,
      84% 14%,
      86% 78%,
      18% 86%,
      48% 58%;
  }
  50% {
    transform: translate3d(0.4%, -0.8%, 0) scale(1.02);
    background-position:
      12% 17%,
      82% 16%,
      84% 80%,
      20% 84%,
      50% 56%;
  }
  100% {
    transform: translate3d(-0.6%, 0.5%, 0) scale(1.03);
    background-position:
      9% 19%,
      86% 13%,
      88% 76%,
      16% 88%,
      47% 60%;
  }
}

@keyframes pogaluaGlowDriftB {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    background-position:
      26% 32%,
      52% 86%,
      92% 44%,
      14% 60%;
  }
  50% {
    transform: translate3d(-0.8%, 0.6%, 0) scale(1.04);
    background-position:
      28% 30%,
      50% 88%,
      90% 46%,
      16% 58%;
  }
  100% {
    transform: translate3d(0.7%, -0.5%, 0) scale(1.02);
    background-position:
      24% 34%,
      54% 84%,
      93% 42%,
      13% 62%;
  }
}

@keyframes pogaluaGlowPulseA {
  0%, 100% {
    opacity: 0.95;
    filter: blur(28px) saturate(1);
  }
  50% {
    opacity: 1;
    filter: blur(30px) saturate(1.04);
  }
}

@keyframes pogaluaGlowPulseB {
  0%, 100% {
    opacity: 0.88;
    filter: blur(18px) saturate(1);
  }
  50% {
    opacity: 1;
    filter: blur(21px) saturate(1.06);
  }
}

/* ---------------------------------
   Variaciones por tipo de página
---------------------------------- */

/* Home */
body.pogalua-glow-home::before {
  background:
    radial-gradient(circle at 10% 16%, rgba(154, 96, 255, 1.3) 0%, rgba(154, 96, 255, 0) 21%),
    radial-gradient(circle at 85% 13%, rgba(255, 210, 124, 1.2) 0%, rgba(255, 210, 124, 0) 19%),
    radial-gradient(circle at 84% 80%, rgba(120, 230, 232, 1.1) 0%, rgba(120, 230, 232, 0) 21%),
    radial-gradient(circle at 16% 86%, rgba(255, 180, 142, 0.9) 0%, rgba(255, 180, 142, 0) 17%),
    radial-gradient(circle at 50% 56%, rgba(220, 175, 255, 0.6) 0%, rgba(220, 175, 255, 0) 14%);
}

/* Creadores */
body.pogalua-glow-creadores::before {
  background:
    radial-gradient(circle at 9% 18%, rgba(155, 96, 255, 1.3) 0%, rgba(155, 96, 255, 0) 21%),
    radial-gradient(circle at 82% 16%, rgba(205, 180, 255, 0.8) 0%, rgba(205, 180, 255, 0) 16%),
    radial-gradient(circle at 88% 78%, rgba(150, 220, 255, 1.2) 0%, rgba(150, 220, 255, 0) 21%),
    radial-gradient(circle at 22% 82%, rgba(224, 188, 255, 0.7) 0%, rgba(224, 188, 255, 0) 15%);
}

/* Páginas normales */
body.pogalua-glow-page::before {
  background:
    radial-gradient(circle at 10% 18%, rgba(150, 92, 255, 1.00) 0%, rgba(150, 92, 255, 0) 19%),
    radial-gradient(circle at 84% 14%, rgba(255, 208, 120, 0.8) 0%, rgba(255, 208, 120, 0) 16%),
    radial-gradient(circle at 86% 78%, rgba(124, 225, 236, 0.9) 0%, rgba(124, 225, 236, 0) 18%),
    radial-gradient(circle at 50% 56%, rgba(221, 176, 255, 0.4) 0%, rgba(221, 176, 255, 0) 12%);
}

/* ---------------------------------
   Ajustes responsive y rendimiento
---------------------------------- */
@media (max-width: 1024px) {
  body.pogalua-glow-background::before {
    filter: blur(24px);
  }

  body.pogalua-glow-background::after {
    filter: blur(16px);
  }
}

@media (max-width: 767px) {
  body.pogalua-glow-background::before,
  body.pogalua-glow-background::after {
    inset: -12%;
    animation-duration: 20s;
  }

  body.pogalua-glow-background::before {
    filter: blur(20px);
    opacity: 0.9;
  }

  body.pogalua-glow-background::after {
    filter: blur(14px);
    opacity: 0.82;
  }
}

/* Usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  body.pogalua-glow-background::before,
  body.pogalua-glow-background::after {
    animation: none;
  }
}