/* ═══════════════════════════════════════════════════════════
   BUBBLE BACKGROUND COMPONENT CSS
   Any element with class="bubble-bg" activates the animation.
   It must have a defined height (min-height / height) so
   bubbles know the boundaries.
═══════════════════════════════════════════════════════════ */
.bubble-bg {
  position: relative;   /* bubbles are absolute children */
  overflow: hidden;
  isolation: isolate;
  background: black;
}

.bubble {
  position: absolute;
  will-change: transform, border-radius, width, height;
  pointer-events: none;
  transform-origin: center center;
}