/* Fondo de burbujas (contenedor) */
#bg-bubbles{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Burbujas (estilo base ligado al contenedor) */
#bg-bubbles .bubble{
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(124, 58, 237, .28),
      rgba(196, 181, 253, .14) 55%,
      rgba(124, 58, 237, 0) 70%);
  box-shadow:
    0 12px 40px rgba(124, 58, 237, .12),
    inset 0 0 40px rgba(124, 58, 237, .08);
  will-change: transform;
  filter: saturate(0.95);
}

html.dark #bg-bubbles .bubble{
  background:
    radial-gradient(circle at 30% 30%,
      rgba(196, 181, 253, .30),
      rgba(124, 58, 237, .12) 55%,
      rgba(124, 58, 237, 0) 70%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .30),
    inset 0 0 40px rgba(124, 58, 237, .10);
}

/* Acabado visual (borde/anillos + brillo) */
.bubble{
  position: absolute;
  will-change: transform;
  border-radius: 50%;
  /* Centro casi transparente, anillo violeta definido hacia el borde */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(167,139,250,0.06) 0%,
      rgba(167,139,250,0.06) 58%,
      rgba(167,139,250,0.18) 70%,
      rgba(167,139,250,0.28) 78%,
      rgba(167,139,250,0.40) 86%,
      rgba(167,139,250,0.55) 92%,
      rgba(167,139,250,0.00) 100%);
  border: 2px solid rgba(167,139,250,0.36);  /* borde claro y definido */
  box-shadow:
    inset -6px -10px 20px rgba(124,58,237,0.15),
    inset  8px  10px 18px rgba(255,255,255,0.08);
}

.bubble::after{
  /* brillo pequeño para efecto “burbuja”, no satura el centro */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 28% 28%,
              rgba(255,255,255,0.80) 0% 9%,
              rgba(255,255,255,0.00) 22%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Accesibilidad: si el usuario pide reducir movimiento, oculto burbujas */
@media (prefers-reduced-motion: reduce){
  #bg-bubbles{ display: none; }
}

/* Imágenes dentro de burbujas que ya se mueven */
.bubble.bubble-img{
  overflow: hidden;              /* recorta al círculo */
}
.bubble.bubble-img > img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  object-fit: contain;           /* cambiá a cover si querés llenar */
  border-radius: 50%;
  pointer-events: none;
}
/* opcional, baja un toque el brillo del highlight */
.bubble.bubble-img::after{ opacity: .7; }