/* =========================================================
   Elementor Light Effects Pro — light-effects.css
   Tutti gli effetti usano CSS custom properties (vars)
   ========================================================= */

/* ─── BASE WIDGET ─────────────────────────────────────────────────────────── */
/*
 * Il posizionamento del wrapper .elementor-element viene gestito da un tag
 * <style> scoped per ID emesso dal PHP render(), in modo che ogni istanza
 * del widget possa avere z-index indipendente senza conflitti.
 */

.elp-light-effect {
	pointer-events: none;
}

/* Modalità ABSOLUTE: il widget si estende a coprire tutto il contenitore padre
   che deve avere position:relative (gestito dall'editor JS o dal CSS dell'utente) */
.elp-light-effect.elp-mode-absolute {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Modalità FULLSIZE: si comporta come il widget Spacer — occupa spazio nel flusso */
.elp-light-effect.elp-mode-fullsize {
	position: relative;
	width: 100%;
	height: var(--elp-height, 400px);
	overflow: hidden;
}

/* Contenitore interno dell'effetto */
.elp-light-effect .elp-inner {
	position: absolute;
	mix-blend-mode: var(--elp-blend, screen);
}

/* In modalità absolute, l'inner si posiziona in X/Y rispetto al contenitore */
.elp-mode-absolute .elp-inner {
	left: var(--elp-x, 50%);
	top: var(--elp-y, 50%);
	transform: translate(-50%, -50%);
}

/* In modalità fullsize, l'inner copre tutta l'area */
.elp-mode-fullsize .elp-inner {
	inset: 0;
	width: 100%;
	height: 100%;
	transform: none;
}


/* ─── ARCO LUMINOSO ───────────────────────────────────────────────────────── */

.elp-effect-arc .elp-inner {
	width: var(--elp-size, 600px);
	height: var(--elp-size, 600px);
	border-radius: 50%;
	border: var(--elp-thickness, 2px) solid var(--elp-color, #aa00ff);
	box-shadow:
		0 0 var(--elp-blur, 20px) var(--elp-spread, 10px) var(--elp-color, #aa00ff),
		inset 0 0 var(--elp-blur, 20px) var(--elp-spread, 10px) var(--elp-color, #aa00ff);
	transform: translate(-50%, -50%) rotate(var(--elp-angle, 0deg));
	opacity: var(--elp-intensity, 0.7);
	background: transparent;
}

.elp-mode-fullsize.elp-effect-arc .elp-inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(var(--elp-angle, 0deg));
}


/* ─── PUNTO LUCE (SPOT) ───────────────────────────────────────────────────── */

.elp-effect-spot .elp-inner {
	width: var(--elp-size, 400px);
	height: var(--elp-size, 400px);
	background: radial-gradient(
		circle,
		var(--elp-color, #aa00ff) 0%,
		transparent var(--elp-falloff, 70%)
	);
	filter: blur(var(--elp-blur, 30px));
	opacity: var(--elp-intensity, 0.8);
	border-radius: 50%;
}

.elp-mode-fullsize.elp-effect-spot .elp-inner {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


/* ─── FASCIO DI LUCE (BEAM) ───────────────────────────────────────────────── */

.elp-effect-beam .elp-inner {
	width: var(--elp-beam-width, 60px);
	height: var(--elp-size, 500px);
	background: linear-gradient(
		to bottom,
		var(--elp-color, #aa00ff) 0%,
		transparent 100%
	);
	filter: blur(var(--elp-blur, 10px));
	transform: translate(-50%, -50%) rotate(var(--elp-angle, 0deg));
	transform-origin: center top;
	opacity: var(--elp-intensity, 0.6);
	border-radius: 50% 50% 0 0 / 20px 20px 0 0;
}

.elp-mode-fullsize.elp-effect-beam .elp-inner {
	left: 50%;
	top: 0;
	transform: translateX(-50%) rotate(var(--elp-angle, 0deg));
	transform-origin: top center;
}


/* ─── NEON GLOW ───────────────────────────────────────────────────────────── */

.elp-effect-neon-glow .elp-inner {
	opacity: var(--elp-intensity, 0.9);
}

/* Direzione orizzontale */
.elp-effect-neon-glow[style*="--elp-neon-direction:horizontal"] .elp-inner,
.elp-effect-neon-glow .elp-inner {
	width: var(--elp-neon-length, 80%);
	height: var(--elp-thickness, 2px);
	background: var(--elp-color, #00ffff);
	box-shadow:
		0 0 var(--elp-blur, 10px) var(--elp-color, #00ffff),
		0 0 calc(var(--elp-blur, 10px) * 2) var(--elp-color, #00ffff),
		0 0 calc(var(--elp-blur, 10px) * 4) var(--elp-color, #00ffff);
	transform: translate(-50%, -50%);
}

.elp-mode-fullsize.elp-effect-neon-glow .elp-inner {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Verticale */
.elp-effect-neon-glow.elp-neon-vertical .elp-inner {
	width: var(--elp-thickness, 2px);
	height: var(--elp-neon-length, 80%);
}

/* Diagonale ↗ */
.elp-effect-neon-glow.elp-neon-diagonal-1 .elp-inner {
	width: var(--elp-neon-length, 80%);
	height: var(--elp-thickness, 2px);
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Diagonale ↘ */
.elp-effect-neon-glow.elp-neon-diagonal-2 .elp-inner {
	width: var(--elp-neon-length, 80%);
	height: var(--elp-thickness, 2px);
	transform: translate(-50%, -50%) rotate(45deg);
}


/* ─── GOD RAYS ────────────────────────────────────────────────────────────── */

.elp-effect-god-rays .elp-inner {
	width: var(--elp-size, 700px);
	height: var(--elp-size, 700px);
	background: conic-gradient(
		from var(--elp-angle, 0deg),
		transparent 0deg,
		var(--elp-color, rgba(255,255,200,0.2)) calc(360deg / var(--elp-rays, 8) * 0.35),
		transparent calc(360deg / var(--elp-rays, 8))
	);
	filter: blur(var(--elp-blur, 8px));
	transform: translate(-50%, -50%);
	opacity: var(--elp-intensity, 0.6);
	border-radius: 50%;
}

.elp-mode-fullsize.elp-effect-god-rays .elp-inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


/* ─── BOKEH ───────────────────────────────────────────────────────────────── */

.elp-effect-bokeh .elp-inner {
	width: 100%;
	height: 100%;
	opacity: 1;
}

.elp-mode-absolute.elp-effect-bokeh .elp-inner {
	left: 0;
	top: 0;
	transform: none;
	width: 100%;
	height: 100%;
}

.elp-effect-bokeh .elp-inner span {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, var(--elp-color, #aa00ff) 0%, transparent 70%);
	opacity: var(--elp-intensity, 0.5);
	filter: blur(var(--elp-blur, 4px));
}


/* ─── AURORA BOREALE ──────────────────────────────────────────────────────── */

.elp-effect-aurora .elp-inner {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse 90% var(--elp-aurora-h, 40%) at 50% 0%,
			var(--elp-color, rgba(0,200,100,0.45)) 0%,
			transparent 100%),
		radial-gradient(ellipse 70% calc(var(--elp-aurora-h, 40%) * 0.7) at 20% 5%,
			var(--elp-color2, rgba(100,0,200,0.3)) 0%,
			transparent 100%),
		radial-gradient(ellipse 60% calc(var(--elp-aurora-h, 40%) * 0.6) at 80% 8%,
			var(--elp-color, rgba(0,200,100,0.2)) 0%,
			transparent 100%);
	filter: blur(var(--elp-blur, 30px));
	opacity: var(--elp-intensity, 0.7);
	transform: none;
}

.elp-mode-absolute.elp-effect-aurora .elp-inner {
	left: 0;
	top: 0;
	transform: none;
	width: 100%;
	height: 100%;
}


/* ─── LENS FLARE ──────────────────────────────────────────────────────────── */

.elp-effect-lens-flare .elp-inner {
	width: var(--elp-size, 150px);
	height: var(--elp-size, 150px);
	transform: translate(-50%, -50%);
}

.elp-mode-fullsize.elp-effect-lens-flare .elp-inner {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Nucleo principale */
.elp-effect-lens-flare .elp-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		#ffffff 0%,
		var(--elp-color, #aa00ff) 20%,
		transparent 70%
	);
	opacity: var(--elp-intensity, 0.6);
	filter: blur(var(--elp-blur, 8px));
}

/* Raggi streak */
.elp-effect-lens-flare .elp-inner::after {
	content: '';
	position: absolute;
	inset: -100%;
	background: conic-gradient(
		from calc(var(--elp-flare-angle, 45deg) - 3deg) at 50% 50%,
		transparent 0deg,
		var(--elp-color, rgba(170,0,255,0.4)) 3deg,
		transparent 6deg,
		transparent calc(var(--elp-flare-angle, 45deg) + 87deg),
		var(--elp-color, rgba(170,0,255,0.4)) calc(var(--elp-flare-angle, 45deg) + 90deg),
		transparent calc(var(--elp-flare-angle, 45deg) + 93deg),
		transparent calc(var(--elp-flare-angle, 45deg) + 177deg),
		var(--elp-color, rgba(170,0,255,0.4)) calc(var(--elp-flare-angle, 45deg) + 180deg),
		transparent calc(var(--elp-flare-angle, 45deg) + 183deg),
		transparent calc(var(--elp-flare-angle, 45deg) + 267deg),
		var(--elp-color, rgba(170,0,255,0.4)) calc(var(--elp-flare-angle, 45deg) + 270deg),
		transparent calc(var(--elp-flare-angle, 45deg) + 273deg)
	);
	opacity: calc(var(--elp-intensity, 0.6) * 0.4);
	filter: blur(2px);
}


/* ─── ANIMAZIONI ──────────────────────────────────────────────────────────── */

@keyframes elp-pulse {
	0%, 100% { opacity: var(--elp-intensity, 0.7); transform: translate(-50%, -50%) scale(1); }
	50%       { opacity: calc(var(--elp-intensity, 0.7) * 0.4); transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes elp-pulse-arc {
	0%, 100% { opacity: var(--elp-intensity, 0.7); transform: translate(-50%, -50%) rotate(var(--elp-angle, 0deg)) scale(1); }
	50%       { opacity: calc(var(--elp-intensity, 0.7) * 0.4); transform: translate(-50%, -50%) rotate(var(--elp-angle, 0deg)) scale(1.05); }
}

@keyframes elp-float {
	0%, 100% { transform: translate(-50%, -50%) translateY(0); }
	50%       { transform: translate(-50%, -50%) translateY(-12px); }
}

@keyframes elp-rotate {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes elp-flicker {
	0%, 100% { opacity: var(--elp-intensity, 0.7); }
	20%       { opacity: calc(var(--elp-intensity, 0.7) * 0.2); }
	40%       { opacity: var(--elp-intensity, 0.7); }
	60%       { opacity: calc(var(--elp-intensity, 0.7) * 0.5); }
	80%       { opacity: calc(var(--elp-intensity, 0.7) * 0.8); }
}

@keyframes elp-wave {
	0%, 100% { transform: translate(-50%, -50%) skewX(0deg) scaleX(1); }
	25%       { transform: translate(-50%, -50%) skewX(4deg) scaleX(1.05); }
	75%       { transform: translate(-50%, -50%) skewX(-4deg) scaleX(0.97); }
}

@keyframes elp-float-full {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

@keyframes elp-bokeh-drift {
	0%   { transform: translate(0, 0) scale(1); opacity: var(--elp-intensity, 0.5); }
	33%  { transform: translate(8px, -12px) scale(1.1); }
	66%  { transform: translate(-6px, 5px) scale(0.9); }
	100% { transform: translate(0, 0) scale(1); opacity: var(--elp-intensity, 0.5); }
}

/* Applicazione animazioni — modalità absolute */
.elp-mode-absolute.elp-animated.elp-anim-pulse .elp-inner          { animation: elp-pulse var(--elp-anim-duration, 3s) var(--elp-anim-easing, ease-in-out) infinite; }
.elp-mode-absolute.elp-animated.elp-effect-arc.elp-anim-pulse .elp-inner { animation: elp-pulse-arc var(--elp-anim-duration, 3s) var(--elp-anim-easing, ease-in-out) infinite; }
.elp-mode-absolute.elp-animated.elp-anim-float .elp-inner           { animation: elp-float var(--elp-anim-duration, 3s) var(--elp-anim-easing, ease-in-out) infinite; }
.elp-mode-absolute.elp-animated.elp-anim-rotate .elp-inner          { animation: elp-rotate var(--elp-anim-duration, 6s) linear infinite; }
.elp-mode-absolute.elp-animated.elp-anim-flicker .elp-inner         { animation: elp-flicker var(--elp-anim-duration, 2s) var(--elp-anim-easing, ease-in-out) infinite; }
.elp-mode-absolute.elp-animated.elp-anim-wave .elp-inner            { animation: elp-wave var(--elp-anim-duration, 4s) var(--elp-anim-easing, ease-in-out) infinite; }

/* Applicazione animazioni — modalità fullsize */
.elp-mode-fullsize.elp-animated.elp-anim-pulse .elp-inner           { animation: elp-pulse var(--elp-anim-duration, 3s) var(--elp-anim-easing, ease-in-out) infinite; }
.elp-mode-fullsize.elp-animated.elp-anim-float .elp-inner           { animation: elp-float-full var(--elp-anim-duration, 3s) var(--elp-anim-easing, ease-in-out) infinite; }
.elp-mode-fullsize.elp-animated.elp-anim-flicker .elp-inner         { animation: elp-flicker var(--elp-anim-duration, 2s) var(--elp-anim-easing, ease-in-out) infinite; }

/* Bokeh — ogni span ha un drift ritardato */
.elp-animated.elp-anim-float .elp-inner span,
.elp-animated.elp-anim-pulse .elp-inner span {
	animation: elp-bokeh-drift var(--elp-anim-duration, 3s) var(--elp-anim-easing, ease-in-out) infinite;
}

.elp-animated .elp-inner span:nth-child(2n)   { animation-delay: -0.8s; }
.elp-animated .elp-inner span:nth-child(3n)   { animation-delay: -1.6s; animation-duration: calc(var(--elp-anim-duration, 3s) * 1.3); }
.elp-animated .elp-inner span:nth-child(5n)   { animation-delay: -2.4s; animation-duration: calc(var(--elp-anim-duration, 3s) * 0.8); }
.elp-animated .elp-inner span:nth-child(7n)   { animation-delay: -3.2s; }


/* ─── COMPATIBILITÀ EDITOR ELEMENTOR ──────────────────────────────────────── */

/* Nell'editor, il wrapper del widget Elementor non deve interferire */
.elementor-editor-active .elp-light-effect.elp-mode-absolute {
	position: absolute;
}

/* Assicura che il contenitore padre nell'editor mostri il bordo corretto */
.elementor-editor-active
.elementor-widget-elp_light_effect.elp-mode-absolute
~ .elementor-element {
	position: static;
}

/* Indicatore visivo nell'editor per sapere dove si trova il widget */
.elementor-editor-active .elementor-widget-elp_light_effect .elementor-widget-container {
	outline: none;
}