/**
 * Light Effects for Elementor — disegno CSS degli effetti.
 *
 * I valori (colore, spessore, raggio, posizione, bagliore, opacità, profondità, rumore) arrivano
 * come variabili CSS impostate da Elementor sul wrapper del Container tramite i controlli.
 * Ogni var() ha un fallback, così l'effetto è gradevole anche prima di toccare i controlli.
 *
 * L'effetto si attiva solo quando il wrapper ha SIA `le-active-yes` (switcher acceso)
 * SIA `le-fx-<id>` (tipo di effetto selezionato).
 */

/* ------------------------------------------------------------------ *
 * Effetto: Arco
 * ------------------------------------------------------------------ */

/*
 * Il container fa da contenitore di posizionamento per gli pseudo-elementi (position:relative)
 * e DEVE formare un proprio stacking context (isolation:isolate): senza di esso lo pseudo con
 * z-index:-1 ("dietro al contenuto") finirebbe dietro lo sfondo del container e sparirebbe.
 *
 * Qui calcoliamo anche le variabili derivate, così le ereditano SIA ::before (arco) SIA ::after (rumore).
 */
/* Tutti gli effetti hanno bisogno di un contesto di posizionamento + stacking context. */
.elementor-element.le-active-yes.le-fx-arco,
.elementor-element.le-active-yes.le-fx-cerchio,
.elementor-element.le-active-yes.le-fx-linea,
.elementor-element.le-active-yes.le-fx-punti,
.elementor-element.le-active-yes.le-fx-spot {
	position: relative;
	isolation: isolate;
}

.elementor-element.le-active-yes.le-fx-arco {
	/* Centro orizzontale del cerchio in base al punto di riferimento scelto:
	 * --le-arc-sign = 0 (centro) / 1 (lato sinistro) / -1 (lato destro).
	 * Es. lato sinistro: centro = posizione + raggio, così il punto SINISTRO dell'arco
	 * cade esattamente sulla posizione impostata. */
	--le-arc-cx: calc(var(--le-arc-x, 50%) + (var(--le-arc-sign, 0) * var(--le-arc-radius, 600px)));

	/* Metà spessore: il core è centrato sul raggio (da R-half a R+half). */
	--le-arc-half: calc(var(--le-arc-thickness, 5px) / 2);

	/* Colore del bagliore/rumore (eredita dal colore principale se non impostato). */
	--le-arc-gc: var(--le-arc-glow-color, var(--le-arc-color, #ffffff));
}

/*
 * Lo pseudo-elemento copre esattamente il box del container (inset: 0): così il
 * radial-gradient viene ritagliato ai bordi del container in modo naturale, senza
 * bisogno di overflow:hidden (che romperebbe ombre/sticky dei figli).
 */
.elementor-element.le-active-yes.le-fx-arco::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--le-arc-z, -1);
	opacity: var(--le-arc-opacity, 1);

	/* Colore dell'alone: stesso colore del bagliore con alfa = Intensità (0–100%).
	 * Tenendo l'alfa costante, allargando il bagliore l'alone NON si dilueve/sparisce. */
	--le-arc-halo: color-mix( in srgb, var(--le-arc-gc) calc(var(--le-arc-glow-intensity, 80) * 1%), transparent );

	/*
	 * Gradiente: alone morbido -> core pieno -> alone morbido -> trasparente.
	 * Le rampe verso l'alone ammorbidiscono lo stacco tra la linea netta e il bagliore.
	 */
	background: radial-gradient(
		circle var(--le-arc-radius, 600px) at var(--le-arc-cx) 50%,
		transparent calc(var(--le-arc-radius, 600px) - var(--le-arc-half) - var(--le-arc-glow, 15px)),
		var(--le-arc-halo) calc(var(--le-arc-radius, 600px) - var(--le-arc-half) - (var(--le-arc-glow, 15px) * 0.35)),
		var(--le-arc-color, #ffffff) calc(var(--le-arc-radius, 600px) - var(--le-arc-half)),
		var(--le-arc-color, #ffffff) calc(var(--le-arc-radius, 600px) + var(--le-arc-half)),
		var(--le-arc-halo) calc(var(--le-arc-radius, 600px) + var(--le-arc-half) + (var(--le-arc-glow, 15px) * 0.35)),
		transparent calc(var(--le-arc-radius, 600px) + var(--le-arc-half) + var(--le-arc-glow, 15px))
	);

	/* Bloom esterno aggiuntivo: due drop-shadow impilati (più luminosi di uno solo)
	 * scalati sul bagliore, così estendono l'alone senza farlo sparire. */
	filter:
		drop-shadow(0 0 calc(var(--le-arc-glow, 15px) * 0.5) var(--le-arc-gc))
		drop-shadow(0 0 calc(var(--le-arc-glow, 15px) * 1.2) var(--le-arc-gc));
	-webkit-filter:
		drop-shadow(0 0 calc(var(--le-arc-glow, 15px) * 0.5) var(--le-arc-gc))
		drop-shadow(0 0 calc(var(--le-arc-glow, 15px) * 1.2) var(--le-arc-gc));
}

/*
 * Rumore / granulosità attorno all'arco (attivo solo con classe `le-arc-noise-yes`).
 *
 * - background-image: grana generata da un SVG feTurbulence (data-URI, nessun file esterno).
 * - background-color + background-blend-mode: multiply: colora la grana col colore dell'arco
 *   (grana bianca -> colore; grana nera -> nero, ignorato dallo screen successivo).
 * - mask: anello che confina la grana attorno all'arco, sfumando ai bordi (diffusione = spread).
 * - mix-blend-mode: screen: le particelle si "accendono" sullo sfondo scuro.
 */
.elementor-element.le-active-yes.le-fx-arco.le-arc-noise-yes::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--le-arc-z, -1);
	opacity: var(--le-arc-noise-op, 0.6);

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: var(--le-arc-noise-scale, 160px) var(--le-arc-noise-scale, 160px);
	background-color: var(--le-arc-gc);
	background-blend-mode: multiply;
	mix-blend-mode: screen;

	-webkit-mask-image: radial-gradient(
		circle var(--le-arc-radius, 600px) at var(--le-arc-cx) 50%,
		transparent calc(var(--le-arc-radius, 600px) - var(--le-arc-half) - var(--le-arc-noise-spread, 40px)),
		#000 calc(var(--le-arc-radius, 600px) - var(--le-arc-half)),
		#000 calc(var(--le-arc-radius, 600px) + var(--le-arc-half)),
		transparent calc(var(--le-arc-radius, 600px) + var(--le-arc-half) + var(--le-arc-noise-spread, 40px))
	);
	mask-image: radial-gradient(
		circle var(--le-arc-radius, 600px) at var(--le-arc-cx) 50%,
		transparent calc(var(--le-arc-radius, 600px) - var(--le-arc-half) - var(--le-arc-noise-spread, 40px)),
		#000 calc(var(--le-arc-radius, 600px) - var(--le-arc-half)),
		#000 calc(var(--le-arc-radius, 600px) + var(--le-arc-half)),
		transparent calc(var(--le-arc-radius, 600px) + var(--le-arc-half) + var(--le-arc-noise-spread, 40px))
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ------------------------------------------------------------------ *
 * Effetto: Cerchio completo (anello centrato, stessa resa dell'arco)
 * ------------------------------------------------------------------ */
.elementor-element.le-active-yes.le-fx-cerchio::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--le-ring-z, -1);
	opacity: var(--le-ring-opacity, 1);

	--le-ring-half: calc(var(--le-ring-thickness, 4px) / 2);
	--le-ring-gc: var(--le-ring-glow-color, var(--le-ring-color, #ffffff));
	--le-ring-halo: color-mix( in srgb, var(--le-ring-gc) calc(var(--le-ring-glow-intensity, 80) * 1%), transparent );

	background: radial-gradient(
		circle var(--le-ring-radius, 200px) at var(--le-ring-x, 50%) var(--le-ring-y, 50%),
		transparent calc(var(--le-ring-radius, 200px) - var(--le-ring-half) - var(--le-ring-glow, 15px)),
		var(--le-ring-halo) calc(var(--le-ring-radius, 200px) - var(--le-ring-half) - (var(--le-ring-glow, 15px) * 0.35)),
		var(--le-ring-color, #ffffff) calc(var(--le-ring-radius, 200px) - var(--le-ring-half)),
		var(--le-ring-color, #ffffff) calc(var(--le-ring-radius, 200px) + var(--le-ring-half)),
		var(--le-ring-halo) calc(var(--le-ring-radius, 200px) + var(--le-ring-half) + (var(--le-ring-glow, 15px) * 0.35)),
		transparent calc(var(--le-ring-radius, 200px) + var(--le-ring-half) + var(--le-ring-glow, 15px))
	);

	filter:
		drop-shadow(0 0 calc(var(--le-ring-glow, 15px) * 0.5) var(--le-ring-gc))
		drop-shadow(0 0 calc(var(--le-ring-glow, 15px) * 1.2) var(--le-ring-gc));
	-webkit-filter:
		drop-shadow(0 0 calc(var(--le-ring-glow, 15px) * 0.5) var(--le-ring-gc))
		drop-shadow(0 0 calc(var(--le-ring-glow, 15px) * 1.2) var(--le-ring-gc));
}

/* ------------------------------------------------------------------ *
 * Effetto: Linea luminosa (barra neon orientabile)
 * ------------------------------------------------------------------ */
.elementor-element.le-active-yes.le-fx-linea::before {
	content: "";
	position: absolute;
	left: var(--le-line-x, 50%);
	top: var(--le-line-y, 50%);
	width: var(--le-line-length, 60%);
	height: var(--le-line-thickness, 4px);
	transform: translate(-50%, -50%) rotate(var(--le-line-angle, 0deg));
	transform-origin: center center;
	pointer-events: none;
	z-index: var(--le-line-z, -1);
	opacity: var(--le-line-opacity, 1);
	border-radius: 999px;

	--le-line-gc: var(--le-line-glow-color, var(--le-line-color, #ffffff));

	/* Core con estremità sfumate. */
	background: linear-gradient(
		90deg,
		transparent 0,
		var(--le-line-color, #ffffff) 12%,
		var(--le-line-color, #ffffff) 88%,
		transparent 100%
	);

	/* Alone interno a intensità controllata + bloom esterno morbido. */
	box-shadow: 0 0 calc(var(--le-line-glow, 15px) * 0.7) color-mix( in srgb, var(--le-line-gc) calc(var(--le-line-glow-intensity, 80) * 1%), transparent );
	filter: drop-shadow(0 0 calc(var(--le-line-glow, 15px) * 1.3) var(--le-line-gc));
	-webkit-filter: drop-shadow(0 0 calc(var(--le-line-glow, 15px) * 1.3) var(--le-line-gc));
}

/* ------------------------------------------------------------------ *
 * Effetto: Punti luce / bokeh (griglia di puntini sfalsati)
 * ------------------------------------------------------------------ */
.elementor-element.le-active-yes.le-fx-punti::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--le-dots-z, -1);
	opacity: var(--le-dots-opacity, 1);
	mix-blend-mode: screen;

	--le-dots-c: color-mix( in srgb, var(--le-dots-color, #ffffff) calc(var(--le-dots-intensity, 90) * 1%), transparent );

	/* Due layer a dimensioni/offset diversi per un aspetto meno regolare. */
	background-image:
		radial-gradient(circle at center, var(--le-dots-c) 0, transparent var(--le-dots-size, 3px)),
		radial-gradient(circle at center, var(--le-dots-c) 0, transparent calc(var(--le-dots-size, 3px) * 0.6));
	background-size:
		var(--le-dots-density, 60px) var(--le-dots-density, 60px),
		calc(var(--le-dots-density, 60px) * 1.7) calc(var(--le-dots-density, 60px) * 1.7);
	background-position:
		0 0,
		calc(var(--le-dots-density, 60px) * 0.5) calc(var(--le-dots-density, 60px) * 0.4);

	filter: drop-shadow(0 0 var(--le-dots-glow, 4px) var(--le-dots-color, #ffffff));
	-webkit-filter: drop-shadow(0 0 var(--le-dots-glow, 4px) var(--le-dots-color, #ffffff));
}

/* ------------------------------------------------------------------ *
 * Effetto: Bagliore / Spotlight (macchia di luce morbida posizionabile)
 * ------------------------------------------------------------------ */
.elementor-element.le-active-yes.le-fx-spot::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--le-spot-z, -1);
	opacity: var(--le-spot-opacity, 1);
	mix-blend-mode: screen;

	background: radial-gradient(
		circle var(--le-spot-size, 300px) at var(--le-spot-x, 50%) var(--le-spot-y, 50%),
		color-mix( in srgb, var(--le-spot-color, #ffffff) calc(var(--le-spot-intensity, 70) * 1%), transparent ) 0,
		transparent 100%
	);
}