/* ---------- floating bubbles (driven by bubbles.js) ---------- */
/* Layer sits above page content but below the nav (z-index 50)
   and the lightbox (z-index 100). The layer itself never takes
   pointer events; only individual bubbles do. */
#bubbles-layer {
  position: fixed; inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}
#bubbles-layer.paused { visibility: hidden; }

/* Pop effects canvas: rainbow glitter + rings. Never interactive. */
#bubbles-fx {
  position: fixed; inset: 0;
  z-index: 45;
  pointer-events: none;
}

.bubble {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .28) 14%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 74% 80%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 52%, rgba(173, 220, 248, .16) 84%, rgba(255, 255, 255, .38) 100%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, .5),
    inset -5px -7px 16px rgba(137, 207, 240, .28),
    0 3px 12px rgba(23, 56, 79, .07);
  will-change: transform;
}
/* specular highlight spot */
.bubble::before {
  content: ""; position: absolute;
  left: 18%; top: 10%; width: 34%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%);
  transform: rotate(-24deg);
}
/* faint rainbow iridescence */
.bubble::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(255, 93, 162, .10), rgba(255, 197, 61, .10), rgba(139, 212, 80, .10),
    rgba(46, 196, 182, .10), rgba(139, 92, 246, .12), rgba(255, 93, 162, .10));
}