/* Lazy Loading Styles */

/* Base lazy image container */
.lazy-image {
	position: relative;
	overflow: hidden;
}

/* Base lazy load image */
.lazy-load {
	transition: all 0.5s ease-in-out;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========== EFFECT: PIXELATED (default) ========== */
.lazy-image[data-effect='pixelated'][data-loaded='false'] .lazy-load,
.lazy-image:not([data-effect])[data-loaded='false'] .lazy-load {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	filter: blur(1px);
}

.lazy-image[data-effect='pixelated'][data-loaded='true'] .lazy-load,
.lazy-image:not([data-effect])[data-loaded='true'] .lazy-load {
	image-rendering: auto;
	filter: blur(0);
}

/* ========== EFFECT: SMOOTH FADE ========== */
.lazy-image[data-effect='fade'][data-loaded='false'] .lazy-load {
	opacity: 0;
	transform: scale(1.05);
}

.lazy-image[data-effect='fade'][data-loaded='true'] .lazy-load {
	opacity: 1;
	transform: scale(1);
}

/* ========== EFFECT: BLUR TO CLEAR ========== */
.lazy-image[data-effect='blur'][data-loaded='false'] .lazy-load {
	filter: blur(10px);
	transform: scale(1.1);
}

.lazy-image[data-effect='blur'][data-loaded='true'] .lazy-load {
	filter: blur(0);
	transform: scale(1);
}

/* ========== EFFECT: SLIDE UP ========== */
.lazy-image[data-effect='slide-up'][data-loaded='false'] .lazy-load {
	opacity: 0;
	transform: translateY(50px) scale(0.9);
}

.lazy-image[data-effect='slide-up'][data-loaded='true'] .lazy-load {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ========== EFFECT: SCALE IN ========== */
.lazy-image[data-effect='scale'][data-loaded='false'] .lazy-load {
	opacity: 0;
	transform: scale(0.8);
}

.lazy-image[data-effect='scale'][data-loaded='true'] .lazy-load {
	opacity: 1;
	transform: scale(1);
}

/* ========== EFFECT: COLOR OVERLAY ========== */
.lazy-image[data-effect='overlay'] {
	position: relative;
}

.lazy-image[data-effect='overlay']::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, #da2128, #ff6b6b);
	opacity: 0.8;
	transition: opacity 0.5s ease-in-out;
	z-index: 1;
}

.lazy-image[data-effect='overlay'][data-loaded='true']::after {
	opacity: 0;
}

.lazy-image[data-effect='overlay'][data-loaded='false'] .lazy-load {
	filter: grayscale(1) brightness(0.7);
}

.lazy-image[data-effect='overlay'][data-loaded='true'] .lazy-load {
	filter: grayscale(0) brightness(1);
}

/* Loading spinner overlay */
.lazy-image::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #da2128;
	border-radius: 50%;
	animation: lazy-spin 1s linear infinite;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

/* Show spinner only while loading */
.lazy-image[data-loading='true']::before {
	opacity: 1;
}

/* Hide spinner when loaded */
.lazy-image[data-loaded='true']::before {
	opacity: 0;
}

/* Spinner animation */
@keyframes lazy-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Fade in animation for loaded images */
.lazy-image[data-loaded='true'] {
	animation: fadeInImage 0.5s ease-in-out;
}

@keyframes fadeInImage {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 1;
	}
}

/* Progressive enhancement for browsers without Intersection Observer */
.no-intersection-observer .lazy-load {
	/* Fallback: just use regular loading */
}

/* Error state */
.lazy-image[data-error='true'] {
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 14px;
}

.lazy-image[data-error='true']::after {
	content: 'Image failed to load';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

/* Responsive optimizations */
@media (max-width: 768px) {
	.lazy-image[data-loaded='false'] .lazy-load {
		filter: blur(0.5px); /* Less blur on mobile for better performance */
	}
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lazy-load {
		transition: none;
	}

	.lazy-image::before {
		animation: none;
	}

	.lazy-image[data-loaded='true'] {
		animation: none;
	}
}