/* MN Effects - Image Loop Animations */

/* Base wrapper styles */
.mn-image-effects-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.mn-image-effects-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

/* Overlay base */
.mn-image-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ===================================
   1. SHIMMER/SHINE EFFECT
   =================================== */

.mn-loop-shimmer .mn-image-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0) 25%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0) 75%,
		transparent 100%
	);
	animation: mnShimmer var(--mn-duration, 3000ms) var(--mn-easing, ease) infinite;
}

@keyframes mnShimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* ===================================
   2. GRADIENT SHIFT EFFECT
   =================================== */

.mn-loop-gradient-shift .mn-image-overlay {
	background: linear-gradient(
		270deg,
		rgba(255, 0, 100, 0.4),
		rgba(0, 100, 255, 0.4),
		rgba(100, 255, 0, 0.4),
		rgba(255, 0, 100, 0.4)
	);
	background-size: 300% 300%;
	animation: mnGradientShift var(--mn-duration, 4000ms) var(--mn-easing, ease) infinite;
}

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

/* Gradient color variants */
.mn-loop-gradient-shift.mn-gradient-warm .mn-image-overlay {
	background: linear-gradient(
		270deg,
		rgba(255, 100, 0, 0.4),
		rgba(255, 200, 0, 0.4),
		rgba(255, 0, 100, 0.4),
		rgba(255, 100, 0, 0.4)
	);
}

.mn-loop-gradient-shift.mn-gradient-cool .mn-image-overlay {
	background: linear-gradient(
		270deg,
		rgba(0, 100, 255, 0.4),
		rgba(0, 200, 255, 0.4),
		rgba(100, 0, 255, 0.4),
		rgba(0, 100, 255, 0.4)
	);
}

.mn-loop-gradient-shift.mn-gradient-dark .mn-image-overlay {
	background: linear-gradient(
		270deg,
		rgba(0, 0, 0, 0.5),
		rgba(50, 50, 50, 0.3),
		rgba(0, 0, 0, 0.5)
	);
}

/* ===================================
   3. SCANLINE EFFECT
   =================================== */

.mn-loop-scanline .mn-image-overlay::before {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255, 255, 255, 0.1) 45%,
		rgba(255, 255, 255, 0.3) 50%,
		rgba(255, 255, 255, 0.1) 55%,
		transparent 100%
	);
	animation: mnScanline var(--mn-duration, 8000ms) linear infinite;
}

@keyframes mnScanline {
	0% {
		top: -100%;
	}
	100% {
		top: 100%;
	}
}

/* Scanline with grid pattern */
.mn-loop-scanline .mn-image-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.05) 0px,
		transparent 1px,
		transparent 2px
	);
	opacity: 0.5;
}

/* Scanline variants */
.mn-loop-scanline.mn-scanline-tech .mn-image-overlay::before {
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 255, 100, 0.2) 45%,
		rgba(0, 255, 100, 0.5) 50%,
		rgba(0, 255, 100, 0.2) 55%,
		transparent 100%
	);
}

.mn-loop-scanline.mn-scanline-retro .mn-image-overlay::before {
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255, 100, 0, 0.2) 45%,
		rgba(255, 100, 0, 0.5) 50%,
		rgba(255, 100, 0, 0.2) 55%,
		transparent 100%
	);
}

/* ===================================
   4. PULSE OVERLAY EFFECT
   =================================== */

.mn-loop-pulse-overlay .mn-image-overlay {
	background: rgba(0, 0, 0, 0.3);
	animation: mnPulseOverlay var(--mn-duration, 2000ms) var(--mn-easing, ease-in-out) infinite;
}

@keyframes mnPulseOverlay {
	0%, 100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.7;
	}
}

/* Pulse overlay variants */
.mn-loop-pulse-overlay.mn-pulse-light .mn-image-overlay {
	background: rgba(255, 255, 255, 0.2);
}

.mn-loop-pulse-overlay.mn-pulse-colored .mn-image-overlay {
	background: rgba(0, 100, 255, 0.3);
}

.mn-loop-pulse-overlay.mn-pulse-warm .mn-image-overlay {
	background: rgba(255, 100, 0, 0.3);
}

/* ===================================
   RESPONSIVE & MOBILE
   =================================== */

@media (max-width: 768px) {
	/* Slower animations on mobile for better performance */
	.mn-loop-shimmer .mn-image-overlay::before {
		animation-duration: 4000ms;
	}
	
	.mn-loop-gradient-shift .mn-image-overlay {
		animation-duration: 5000ms;
	}
	
	.mn-loop-scanline .mn-image-overlay::before {
		animation-duration: 10000ms;
	}
}

/* ===================================
   ACCESSIBILITY
   =================================== */

@media (prefers-reduced-motion: reduce) {
	.mn-loop-shimmer .mn-image-overlay::before,
	.mn-loop-gradient-shift .mn-image-overlay,
	.mn-loop-scanline .mn-image-overlay::before,
	.mn-loop-pulse-overlay .mn-image-overlay {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ===================================
   PAUSED STATE
   =================================== */

.mn-image-effects-wrapper.mn-paused .mn-image-overlay::before,
.mn-image-effects-wrapper.mn-paused .mn-image-overlay {
	animation-play-state: paused;
}

/* ===================================
   HOVER PAUSE (Optional)
   =================================== */

.mn-image-effects-wrapper.mn-pause-on-hover:hover .mn-image-overlay::before,
.mn-image-effects-wrapper.mn-pause-on-hover:hover .mn-image-overlay {
	animation-play-state: paused;
}