/*
 * ESF Glow Scroll – Basis-Styles
 * Farbe + Position kommen als CSS Custom Properties aus PHP (wp_add_inline_style).
 */

/* ── Grundlage ────────────────────────────────────────────────────── */

.esfglow,
.esfglowdesktop,
[data-esf-glow] {
	position: relative;
	overflow: hidden;
}

/* Text über dem Glow-Pseudo-Element halten (UAGB + allgemein) */
.esfglow > *,
.esfglowdesktop > *,
[data-esf-glow] > * {
	position: relative;
	z-index: 1;
}

/* ── Mobile-Glow (.esfglow) – statisch ───────────────────────────── */

.esfglow::before {
	content: "";
	position: absolute;
	top:  50%;
	left: 30%;
	transform: translate(-50%, -50%);
	width:  320px;
	height: 320px;
	background: radial-gradient(
		circle,
		rgba(var(--esf-glow-r, 255), var(--esf-glow-g, 230), var(--esf-glow-b, 0), 0.85)  0%,
		rgba(var(--esf-glow-r, 255), var(--esf-glow-g, 230), var(--esf-glow-b, 0), 0)    70%
	);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

/* ── Desktop-Glow (.esfglowdesktop / data-esf-glow) – scroll-animiert */

.esfglowdesktop::before,
[data-esf-glow]::before {
	content: "";
	position: absolute;
	top:  var(--esf-glow-y, 50%);
	left: var(--esf-glow-x, 30%);
	transform: translate(-50%, -50%);
	width:  var(--glow-size, 200px);
	height: var(--glow-size, 200px);
	background: radial-gradient(
		circle,
		rgba(var(--esf-glow-r, 255), var(--esf-glow-g, 230), var(--esf-glow-b, 0), 1)  30%,
		rgba(var(--esf-glow-r, 255), var(--esf-glow-g, 230), var(--esf-glow-b, 0), 0)  60%
	);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}