/* live-fluid — the only styles the effect needs.

   The host element is the stage: give it a size and a fallback background, and
   the canvas fills it. Everything here is scoped to .lf / .lf__canvas, so it
   cannot collide with a host site's stylesheet. */

.lf {
  position: relative;
  overflow: hidden;
  /* The fallback lives HERE, in CSS, and shows whenever the canvas is absent —
     no WebGL2, a software renderer, or JS that never ran. Override it with the
     page's own ground; a flat colour is fine, a gradient is better. */
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(150, 216, 211, 0.16), transparent 60%),
    linear-gradient(160deg, #040610, #0b1d2d 60%, #0d2b33);
}

.lf__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Fades in once the first frame is up, so the fallback is never whipped away
     mid-paint. */
  opacity: 0;
  transition: opacity 900ms ease;
}

.lf__canvas.is-ready { opacity: 1; }

/* Content sits above the canvas. The canvas is decorative and must never eat a
   click: the effect tracks the pointer on the window, not on this element. */
.lf > *:not(.lf__canvas) { position: relative; z-index: 1; }
.lf__canvas { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lf__canvas { transition: none; }
}