/* ─────────────────────────────────────────────────────────────────────────
 * Mesh background (section-level)
 *
 * Section-level multi-colour background. 2–4 colour slots composite as
 * radial gradients on a dark base, drifting gently via background-position
 * animation. No per-blob DOM nodes, no blur filters, no SVG distortion,
 * no grain overlay — the whole composition is one element painted in
 * a single CSS rule.
 *
 * Slot data is emitted as CSS variables (--imp-mesh-c1/2/3/4 for colours,
 * --imp-mesh-x1/y1 etc. for positions, --imp-mesh-base for the base) on
 * the .impulse-mesh wrapper. The .impulse-mesh-fx inline style references
 * those vars in the radial-gradient declarations, so the editor's live-
 * update path can shift the visual via simple var() updates — no PHP
 * roundtrip, no DOM rebuild.
 *
 * @since 2.1.270  (initial: blob DOM nodes + blur + transform orbits)
 * @since 2.1.273  (per-count layouts; section bg transparent under mesh)
 * @since 2.2.000  (radial-on-base rewrite: single element, no blobs,
 *                  no SVG distortion; designer-controlled mesh_base_color)
 * @since 2.2.001  (grain dropped — overlay paint cost without payoff)
 * ───────────────────────────────────────────────────────────────────── */

.impulse-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    border-radius: inherit;
    /* --imp-mesh-op: 0..1 — when below 1, the env effect (cosmos /
       lava / aurora / etc.) behind the section bleeds through. The
       section's bg is already transparent under an active mesh
       (see section.php), so this opacity directly controls the
       mesh-vs-env mix. */
    opacity: var(--imp-mesh-op, 1);
}

/* ── Background-bearer.
 * The single element that paints the entire mesh. Its `background`
 * is set inline by section.php: the 4 radial gradients (slot colours
 * at slot positions, ~80% spread) followed by the base colour as
 * the bottom-most layer. `background-size: 140% 140%` + drift
 * animation are also driven by inline styles + the @keyframes
 * emitted once per page. */
.impulse-mesh-fx {
    position: absolute;
    inset: 0;
}

/* Static mode: when bg_mesh_speed = 0 we strip the animation entirely. */
.impulse-mesh-static .impulse-mesh-fx {
    animation: none !important;
}