/*
  Dynamic Gradient Background  (.gr-bg-dynamic)
  ─────────────────────────────────────────────────
  Fully JS-driven AI brain fog. No CSS keyframes.
  Blobs float, morph, appear & vanish randomly.
  Every refresh is unique. Nothing repeats.

  JS function `bgGradientFog(colors, element)` runs the
  entire simulation.

  Usage:
    bgGradientFog(['#00d4ff', '#a855f7', '#06f9d4'], myElement);
*/

/* ── Base container ── */
.gr-bg-dynamic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ── Fog layer ── */
.gr-bg-dynamic .gr-fog {
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px) saturate(1.3);
}

/* ── Content above fog ── */
.gr-bg-dynamic > *:not(.gr-fog) {
  position: relative;
  z-index: 1;
}

/* ── Blob ── */
.gr-fog .gr-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}