/**
 * Kurs - Glass Hover efekt.
 *
 * Tri sloja, sve preko CSS custom properties koje JS azurira po elementu
 * (vidi kurs-glass-hover-fx.js) - bez injektiranja child markupa, samo
 * ::before/::after pseudo-elementi na postojecem Elementor wrapperu
 * (.elementor-element-{id}):
 *
 * - ::before = putujuci border-glow: conic-gradient prsten izrezan na sam
 *   rub elementa preko mask-composite (exclude) trika, kut rotacije je
 *   animirana @property varijabla (--kurs-glass-angle).
 * - ::after  = backdrop-filter (blur+saturate onoga sto je STVARNO iza
 *   elementa - prava "boja iz pozadine" bez ikakvog JS uzorkovanja boje)
 *   + suptilni tint + cursor spotlight (radial-gradient na poziciji
 *   pokazivaca, --kurs-glass-mx/--kurs-glass-my u postocima), slozeni kao
 *   dva background sloja jednog te istog pseudo-elementa.
 *
 * Oba pseudo-elementa imaju z-index:-1 (unutar vlastitog stacking konteksta
 * elementa) - crtaju se iznad pozadine/bordera elementa, ali ispod stvarnog
 * sadrzaja (naslov, tekst, slika...), tocno kao kod ostalih Kurs hover
 * modula koji ne smiju prekriti sadrzaj.
 */

@property --kurs-glass-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.kurs-glass-hover-fx {
	position: relative;
	isolation: isolate;
	--kurs-glass-mx: 50%;
	--kurs-glass-my: 50%;
}

/* --- ::after - backdrop-filter (glass tint) + cursor spotlight --- */
.kurs-glass-hover-fx.kurs-glass-fx-after::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(
			var( --kurs-glass-spot-size, 220px ) circle at var( --kurs-glass-mx ) var( --kurs-glass-my ),
			var( --kurs-glass-spot-color, transparent ),
			transparent 70%
		),
		var( --kurs-glass-tint-color, transparent );
	backdrop-filter: blur( var( --kurs-glass-blur, 0px ) ) saturate( var( --kurs-glass-saturate, 100% ) );
	-webkit-backdrop-filter: blur( var( --kurs-glass-blur, 0px ) ) saturate( var( --kurs-glass-saturate, 100% ) );
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.kurs-glass-hover-fx.kurs-glass-fx-after:hover::after {
	opacity: 1;
}

/* --- ::before - putujuci border-glow (conic-gradient prsten) --- */
.kurs-glass-hover-fx.kurs-glass-fx-glow::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	padding: var( --kurs-glass-glow-width, 2px );
	background: conic-gradient(
		from var( --kurs-glass-angle ),
		transparent,
		var( --kurs-glass-glow-color, #fff ) 20%,
		transparent 40%
	);
	-webkit-mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.kurs-glass-hover-fx.kurs-glass-fx-glow:hover::before {
	opacity: var( --kurs-glass-glow-opacity, 0.8 );
	animation: kurs-glass-spin var( --kurs-glass-glow-speed, 3s ) linear infinite;
}

@keyframes kurs-glass-spin {
	to {
		--kurs-glass-angle: 360deg;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.kurs-glass-hover-fx.kurs-glass-fx-glow:hover::before {
		animation: none;
	}
}