/**
 * EduNexa — ادونکسا
 * Widget: Light FX Image (تصویر با جلوه‌ها و انیمیشن‌های نوری پیشرفته)
 *
 * Provides cutting-edge GPU-accelerated light animation styles:
 * 1. Diagonal Glass Shimmer (شاین شیشه‌ای مورب)
 * 2. Rotating Border Beam (اشعه نورانی چرخان دور کادر)
 * 3. Neon Glowing Aura Pulse (هاله نئونی تپنده)
 * 4. Moving Lens Flare & Spotlight (لنز فلر و نورافکن متحرک)
 * 5. Glittering Twinkle Stars & Sparkles (ستاره‌ها و جرقه‌های درخشان)
 * 6. Holographic Iridescent Sheen (طیف نوری هولوگرافیک)
 * 7. Radiant Expanding Ripples (امواج تابشی مدور)
 *
 * @package EduNexa
 * @since   1.2.0
 */

/* ==========================================================================
   1. MAIN CONTAINER & FRAME
   ========================================================================== */
.kn-light-img-card {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	box-sizing: border-box;
	--kn-light-color: #FAB237;
	--kn-light-secondary: #38bdf8;
	--kn-light-duration: 3.5s;
	--kn-light-intensity: 0.85;
	--kn-light-angle: 45deg;
	--kn-light-blur: 20px;
}

.kn-light-img-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.kn-light-img-wrapper {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: #0f172a;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
	isolation: isolate;
}

/* Hover Zoom effect */
.kn-light-img-card.has-hover-zoom .kn-light-img-wrapper:hover {
	transform: translateY(-4px) scale(1.02);
}

.kn-light-img-card.has-hover-zoom .kn-light-img-wrapper:hover .kn-light-img-element {
	transform: scale(1.06);
}

/* Base Image Element */
.kn-light-img-element {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
	backface-visibility: hidden;
	will-change: transform;
}

/* Aspect Ratios */
.kn-light-img-card.aspect-16-9 .kn-light-img-wrapper { aspect-ratio: 16 / 9; }
.kn-light-img-card.aspect-4-3 .kn-light-img-wrapper  { aspect-ratio: 4 / 3; }
.kn-light-img-card.aspect-1-1 .kn-light-img-wrapper  { aspect-ratio: 1 / 1; }
.kn-light-img-card.aspect-3-4 .kn-light-img-wrapper  { aspect-ratio: 3 / 4; }
.kn-light-img-card.aspect-21-9 .kn-light-img-wrapper { aspect-ratio: 21 / 9; }


/* ==========================================================================
   2. LIGHT EFFECT 1: DIAGONAL GLASS SHIMMER (شاین شیشه‌ای مورب)
   ========================================================================== */
.kn-fx-shimmer {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(
		var(--kn-light-angle, 45deg),
		transparent 30%,
		rgba(255, 255, 255, 0.05) 42%,
		var(--kn-light-color, rgba(255, 255, 255, 0.85)) 50%,
		rgba(255, 255, 255, 0.05) 58%,
		transparent 70%
	);
	opacity: var(--kn-light-intensity, 0.85);
	mix-blend-mode: overlay;
	transform: translateX(-100%) translateY(-100%) rotate(0deg);
}

/* Animation modes */
.kn-light-img-card.light-fx-shimmer.trigger-always .kn-fx-shimmer,
.kn-light-img-card.light-fx-shimmer.trigger-always_and_hover .kn-fx-shimmer {
	animation: knShimmerSweep var(--kn-light-duration, 3.5s) infinite ease-in-out;
}

.kn-light-img-card.light-fx-shimmer.trigger-hover .kn-fx-shimmer {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.kn-light-img-card.light-fx-shimmer.trigger-hover:hover .kn-fx-shimmer {
	opacity: var(--kn-light-intensity, 0.85);
	animation: knShimmerSweep var(--kn-light-duration, 1.8s) 1 ease-in-out;
}

.kn-light-img-card.light-fx-shimmer.trigger-always_and_hover:hover .kn-fx-shimmer {
	animation-duration: calc(var(--kn-light-duration, 3.5s) * 0.6);
	opacity: 1;
}

@keyframes knShimmerSweep {
	0% {
		transform: translateX(-120%) translateY(-120%);
	}
	40%, 100% {
		transform: translateX(120%) translateY(120%);
	}
}


/* ==========================================================================
   3. LIGHT EFFECT 2: ROTATING BORDER BEAM (اشعه نورانی چرخان دور کادر)
   ========================================================================== */
.kn-fx-border-beam {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 4;
	padding: 2px;
	overflow: hidden;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.kn-fx-border-beam::before {
	content: "";
	position: absolute;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	background: conic-gradient(
		from 0deg at 50% 50%,
		transparent 0deg,
		transparent 270deg,
		var(--kn-light-color, #FAB237) 320deg,
		var(--kn-light-secondary, #38bdf8) 350deg,
		transparent 360deg
	);
	opacity: var(--kn-light-intensity, 0.9);
	filter: drop-shadow(0 0 10px var(--kn-light-color, #FAB237));
}

.kn-light-img-card.light-fx-border_beam.trigger-always .kn-fx-border-beam::before,
.kn-light-img-card.light-fx-border_beam.trigger-always_and_hover .kn-fx-border-beam::before {
	animation: knRotateBeam var(--kn-light-duration, 4s) linear infinite;
}

.kn-light-img-card.light-fx-border_beam.trigger-hover .kn-fx-border-beam::before {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.kn-light-img-card.light-fx-border_beam.trigger-hover:hover .kn-fx-border-beam::before {
	opacity: var(--kn-light-intensity, 0.9);
	animation: knRotateBeam var(--kn-light-duration, 3s) linear infinite;
}

@keyframes knRotateBeam {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


/* ==========================================================================
   4. LIGHT EFFECT 3: NEON GLOWING AURA & PULSE (هاله نئونی تپنده)
   ========================================================================== */
.kn-fx-neon-aura {
	position: absolute;
	inset: -15px;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(
		circle at center,
		var(--kn-light-color, #FAB237) 0%,
		var(--kn-light-secondary, #f59e0b) 45%,
		transparent 70%
	);
	filter: blur(var(--kn-light-blur, 25px));
	opacity: calc(var(--kn-light-intensity, 0.85) * 0.7);
	mix-blend-mode: screen;
}

.kn-light-img-card.light-fx-neon_pulse.trigger-always .kn-fx-neon-aura,
.kn-light-img-card.light-fx-neon_pulse.trigger-always_and_hover .kn-fx-neon-aura {
	animation: knNeonBreathing var(--kn-light-duration, 3s) ease-in-out infinite alternate;
}

.kn-light-img-card.light-fx-neon_pulse.trigger-hover .kn-fx-neon-aura {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.kn-light-img-card.light-fx-neon_pulse.trigger-hover:hover .kn-fx-neon-aura {
	opacity: var(--kn-light-intensity, 0.85);
	transform: scale(1.05);
	animation: knNeonBreathing 2s ease-in-out infinite alternate;
}

.kn-light-img-card.light-fx-neon_pulse.trigger-always_and_hover:hover .kn-fx-neon-aura {
	opacity: 1;
	filter: blur(calc(var(--kn-light-blur, 25px) * 1.3));
	transform: scale(1.08);
}

@keyframes knNeonBreathing {
	0% {
		opacity: calc(var(--kn-light-intensity, 0.85) * 0.35);
		transform: scale(0.96);
	}
	100% {
		opacity: var(--kn-light-intensity, 0.85);
		transform: scale(1.04);
	}
}


/* ==========================================================================
   5. LIGHT EFFECT 4: LENS FLARE & SPOTLIGHT (لنز فلر و نورافکن متحرک)
   ========================================================================== */
.kn-fx-lens-flare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	overflow: hidden;
}

.kn-flare-sun {
	position: absolute;
	width: 140px;
	height: 140px;
	top: 50%;
	left: -70px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		#ffffff 0%,
		var(--kn-light-color, #FAB237) 35%,
		var(--kn-light-secondary, rgba(56, 189, 248, 0.4)) 65%,
		transparent 75%
	);
	filter: blur(8px);
	mix-blend-mode: screen;
	opacity: var(--kn-light-intensity, 0.9);
}

.kn-flare-ray {
	position: absolute;
	top: 50%;
	left: -100px;
	width: 320px;
	height: 4px;
	transform: translateY(-50%) rotate(-35deg);
	background: linear-gradient(
		90deg,
		transparent,
		var(--kn-light-color, #FAB237) 50%,
		transparent
	);
	filter: blur(2px);
	mix-blend-mode: screen;
	opacity: 0.8;
}

.kn-light-img-card.light-fx-lens_flare.trigger-always .kn-flare-sun,
.kn-light-img-card.light-fx-lens_flare.trigger-always_and_hover .kn-flare-sun {
	animation: knFlareTraverse var(--kn-light-duration, 4s) ease-in-out infinite alternate;
}

.kn-light-img-card.light-fx-lens_flare.trigger-always .kn-flare-ray,
.kn-light-img-card.light-fx-lens_flare.trigger-always_and_hover .kn-flare-ray {
	animation: knFlareTraverse var(--kn-light-duration, 4s) ease-in-out infinite alternate;
}

.kn-light-img-card.light-fx-lens_flare.trigger-hover .kn-fx-lens-flare {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.kn-light-img-card.light-fx-lens_flare.trigger-hover:hover .kn-fx-lens-flare {
	opacity: 1;
}

.kn-light-img-card.light-fx-lens_flare.trigger-hover:hover .kn-flare-sun,
.kn-light-img-card.light-fx-lens_flare.trigger-hover:hover .kn-flare-ray {
	animation: knFlareTraverse var(--kn-light-duration, 3s) ease-in-out infinite alternate;
}

@keyframes knFlareTraverse {
	0% {
		left: -70px;
		top: 20%;
		transform: scale(0.7);
	}
	50% {
		left: 50%;
		top: 60%;
		transform: scale(1.3);
	}
	100% {
		left: calc(100% - 20px);
		top: 30%;
		transform: scale(0.85);
	}
}


/* ==========================================================================
   6. LIGHT EFFECT 5: TWINKLING SPARKLES (ستاره‌ها و جرقه‌های درخشان)
   ========================================================================== */
.kn-fx-sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}

.kn-sparkle-star {
	position: absolute;
	width: 22px;
	height: 22px;
	color: var(--kn-light-color, #FAB237);
	filter: drop-shadow(0 0 6px var(--kn-light-color, #FAB237));
	opacity: 0;
	transform: scale(0) rotate(0deg);
}

.kn-sparkle-star svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.kn-sparkle-star:nth-child(1) { top: 18%; left: 18%; animation-delay: 0s; }
.kn-sparkle-star:nth-child(2) { top: 72%; left: 24%; animation-delay: 0.6s; width: 16px; height: 16px; }
.kn-sparkle-star:nth-child(3) { top: 22%; right: 20%; animation-delay: 1.2s; width: 26px; height: 26px; }
.kn-sparkle-star:nth-child(4) { top: 68%; right: 18%; animation-delay: 1.8s; width: 18px; height: 18px; }
.kn-sparkle-star:nth-child(5) { top: 48%; left: 52%; animation-delay: 2.4s; width: 24px; height: 24px; }
.kn-sparkle-star:nth-child(6) { top: 82%; left: 75%; animation-delay: 1.0s; width: 14px; height: 14px; }

.kn-light-img-card.light-fx-sparkles.trigger-always .kn-sparkle-star,
.kn-light-img-card.light-fx-sparkles.trigger-always_and_hover .kn-sparkle-star {
	animation: knSparkleTwinkle var(--kn-light-duration, 2.8s) infinite ease-in-out;
}

.kn-light-img-card.light-fx-sparkles.trigger-hover .kn-sparkle-star {
	opacity: 0;
}

.kn-light-img-card.light-fx-sparkles.trigger-hover:hover .kn-sparkle-star {
	animation: knSparkleTwinkle var(--kn-light-duration, 2.2s) infinite ease-in-out;
}

@keyframes knSparkleTwinkle {
	0%, 100% {
		opacity: 0;
		transform: scale(0) rotate(0deg);
	}
	45%, 55% {
		opacity: var(--kn-light-intensity, 1);
		transform: scale(1.15) rotate(90deg);
	}
	75% {
		opacity: 0.3;
		transform: scale(0.6) rotate(140deg);
	}
}


/* ==========================================================================
   7. LIGHT EFFECT 6: HOLOGRAPHIC IRIDESCENT SHEEN (طیف نوری هولوگرافیک)
   ========================================================================== */
.kn-fx-holographic {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(
		135deg,
		rgba(255, 0, 128, 0.22) 0%,
		rgba(255, 165, 0, 0.22) 20%,
		rgba(250, 178, 55, 0.25) 40%,
		rgba(16, 185, 129, 0.22) 60%,
		rgba(56, 189, 248, 0.25) 80%,
		rgba(168, 85, 247, 0.22) 100%
	);
	background-size: 300% 300%;
	mix-blend-mode: color-dodge;
	opacity: var(--kn-light-intensity, 0.7);
}

.kn-light-img-card.light-fx-holographic.trigger-always .kn-fx-holographic,
.kn-light-img-card.light-fx-holographic.trigger-always_and_hover .kn-fx-holographic {
	animation: knHoloShift var(--kn-light-duration, 5s) linear infinite;
}

.kn-light-img-card.light-fx-holographic.trigger-hover .kn-fx-holographic {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.kn-light-img-card.light-fx-holographic.trigger-hover:hover .kn-fx-holographic {
	opacity: var(--kn-light-intensity, 0.7);
	animation: knHoloShift var(--kn-light-duration, 3.5s) linear infinite;
}

@keyframes knHoloShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/* ==========================================================================
   8. LIGHT EFFECT 7: RADIANT EXPANDING RIPPLES (امواج تابشی مدور)
   ========================================================================== */
.kn-fx-ripples {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kn-ripple-ring {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--kn-light-color, #FAB237);
	opacity: 0;
	transform: scale(0.2);
}

.kn-ripple-ring:nth-child(1) { animation-delay: 0s; }
.kn-ripple-ring:nth-child(2) { animation-delay: 1.2s; border-color: var(--kn-light-secondary, #38bdf8); }
.kn-ripple-ring:nth-child(3) { animation-delay: 2.4s; }

.kn-light-img-card.light-fx-radiant_ripple.trigger-always .kn-ripple-ring,
.kn-light-img-card.light-fx-radiant_ripple.trigger-always_and_hover .kn-ripple-ring {
	animation: knRippleExpand var(--kn-light-duration, 3.8s) infinite cubic-bezier(0.1, 0.7, 0.1, 1);
}

.kn-light-img-card.light-fx-radiant_ripple.trigger-hover .kn-ripple-ring {
	opacity: 0;
}

.kn-light-img-card.light-fx-radiant_ripple.trigger-hover:hover .kn-ripple-ring {
	animation: knRippleExpand var(--kn-light-duration, 2.5s) infinite cubic-bezier(0.1, 0.7, 0.1, 1);
}

@keyframes knRippleExpand {
	0% {
		opacity: var(--kn-light-intensity, 0.85);
		transform: scale(0.1);
	}
	70% {
		opacity: 0.35;
	}
	100% {
		opacity: 0;
		transform: scale(6);
	}
}


/* ==========================================================================
   9. OPTIONAL OVERLAY BADGE, SCRIM & TEXT CONTENT
   ========================================================================== */
.kn-light-img-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 23, 42, 0.85) 0%,
		rgba(15, 23, 42, 0.35) 45%,
		transparent 100%
	);
	z-index: 5;
	pointer-events: none;
}

.kn-light-img-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.8);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kn-light-img-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kn-light-color, #FAB237);
	box-shadow: 0 0 8px var(--kn-light-color, #FAB237);
}

.kn-light-img-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	z-index: 6;
	direction: rtl;
	text-align: right;
}

.kn-light-img-title {
	font-size: 1.15rem;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 6px 0;
	line-height: 1.4;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.kn-light-img-subtitle {
	font-size: 0.86rem;
	color: #cbd5e1;
	margin: 0;
	line-height: 1.5;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}