/* ═══════════════════════════════════════════════════════════
   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;
}

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

/* ═══════════════════════════════════════════════════════════
   PAGE-WIDE BUBBLE (homepage + services page)
   One .bubble-bg instance, fixed to the viewport instead of a
   section, so it stays on screen behind the content as the
   page scrolls (a parallax-like effect) rather than living and
   dying inside a single section's bounds.
═══════════════════════════════════════════════════════════ */
.bubble-bg.bubble-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}