/* ═══════════════════════════════════════════════════════════
   LIGHTING BACKGROUND COMPONENT CSS
   Ported from "background-light-moving" reference animation.
   Any element with class="bubble-bg" activates the animation.
   It must have position:relative (or similar) and a defined
   height so the light knows its boundaries.

   Colour palette is picked with:
     data-bubble-color="sgblue"
   See js/lighting-bg.js for available palettes.
═══════════════════════════════════════════════════════════ */
.bubble-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

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