/* ============================================================
 * Cursor-follow text glow — ardea.at
 * Effekt lebt NUR in den Glyphen (background-clip: text).
 *
 * Gating: der Clip hängt an .glow--active, das glow.js erst nach
 * erfolgreicher Initialisierung setzt. Ohne JS / bei reduzierter
 * Bewegung / in Browsern ohne background-clip:text bleibt schlicht
 * lesbarer Text stehen.
 *
 * Die doppelte Klasse .glow.glow--active (Spezifität 0,2,0) sticht
 * GenerateBlocks-Farbregeln mit nur einer Klasse (z. B.
 * .gb-text-b465cfb4) unabhängig von der Stylesheet-Reihenfolge.
 * ============================================================ */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {

	.glow.glow--active {
		--glow-base: #ccc;

		--glow-c0: #f3eee4;
		--glow-c1: #fbf8f1;
		--glow-c2: #ffffff;
		--glow-r0: 500px;
		--glow-r1: 250px;
		--glow-r2: 100px;

		/* Startpositionen off-canvas, bis glow.js sie auf den Cursor zieht */
		--glow-x0: -9999px; --glow-y0: -9999px;
		--glow-x1: -9999px; --glow-y1: -9999px;
		--glow-x2: -9999px; --glow-y2: -9999px;

		color: transparent;
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		        background-clip: text;

		background-color: var(--glow-base);
		background-image:
			radial-gradient(circle var(--glow-r0) at var(--glow-x0) var(--glow-y0), var(--glow-c0) 0%, transparent 68%),
			radial-gradient(circle var(--glow-r1) at var(--glow-x1) var(--glow-y1), var(--glow-c1) 0%, transparent 66%),
			radial-gradient(circle var(--glow-r2) at var(--glow-x2) var(--glow-y2), var(--glow-c2) 0%, transparent 64%);
		background-blend-mode: screen;
		padding-bottom: 0.18em;
	}

	/* <strong> erbt die Transparenz */
	.glow.glow--active strong {
		color: inherit;
		-webkit-text-fill-color: inherit;
	}
}