/* ==========================================================================
   Hero cursor glow
   Lights up the Background Overlay grid around the cursor in accent green.
   The JS also adds a small SVG filter that recolors and brightens the grid lines.
   Setup: add the class "sp-hero-glow" to the hero container
   (Advanced → CSS Classes). The JS copies the overlay image automatically.
   ========================================================================== */

.sp-hero-glow {
	/* ---- Tuning knobs ---- */
	--sp-glow-color: #BAFC9B;   /* Accent Green */
	--sp-glow-size: 460px;      /* diameter of the lit area */
	--sp-glow-opacity: 1;       /* peak brightness of the lit lines */
	--sp-glow-boost: 12;        /* multiplies the grid lines' own opacity; raise if still faint */

	/* Optional: point at a full-opacity copy of the grid if the glow looks faint.
	   --sp-glow-grid: url("/wp-content/uploads/2026/10/grid-solid.svg"); */

	/* Set by JS, defaults keep it centered before JS runs */
	--sp-glow-x: 50%;
	--sp-glow-y: 50%;

	isolation: isolate; /* keeps the z-index juggling below local to the hero */
}

/* Keep real content above the glow layer (boxed + full-width containers). */
.sp-hero-glow > .e-con-inner,
.sp-hero-glow > .elementor-element {
	position: relative;
	z-index: 1;
}

/* Outer layer: the soft circle that follows the cursor. */
.sp-hero-glow__layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.8s ease;
	-webkit-mask-image: radial-gradient(
		circle calc(var(--sp-glow-size) / 2) at var(--sp-glow-x) var(--sp-glow-y),
		#000 0%,
		#000 15%,
		rgba(0, 0, 0, 0.5) 50%,
		transparent 100%
	);
	mask-image: radial-gradient(
		circle calc(var(--sp-glow-size) / 2) at var(--sp-glow-x) var(--sp-glow-y),
		#000 0%,
		#000 15%,
		rgba(0, 0, 0, 0.5) 50%,
		transparent 100%
	);
}

.sp-hero-glow.is-glow-ready .sp-hero-glow__layer {
	opacity: var(--sp-glow-opacity);
}

/* Inner layer: the grid image, recolored green and boosted by an SVG filter
   (#sp-hero-glow-boost, injected by the JS), so only the lines show. */
.sp-hero-glow__lines {
	position: absolute;
	inset: 0;
	background-image: var(--sp-glow-grid, none);
	background-size: var(--sp-glow-grid-size, auto);
	background-position: var(--sp-glow-grid-pos, 0 0);
	background-repeat: var(--sp-glow-grid-repeat, repeat);
	filter: url(#sp-hero-glow-boost);
	will-change: transform; /* own layer, so the filter renders once instead of every frame */
}