/**
 * LazyLoad CSS - Styles for lazy loading states and animations
 */

/* Base styles for lazy loading images */
img[data-src] {
	background-color: #e5e7eb !important;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		transparent 40%,
		rgba(255, 255, 255, 0.8) 50%,
		transparent 60%,
		transparent 100%
	) !important;
	background-size: 200% 100% !important;
	background-repeat: no-repeat !important;
	animation: shimmer 1.5s linear infinite !important;
}

@keyframes shimmer {
	0% {
		background-position: -100% center;
	}
	100% {
		background-position: 200% center;
	}
}

/* Loading state */
.lazy-loading {
	opacity: 0.8;
	background-color: #d1d5db;
}

/* Loaded state - stop animation */
img[data-src].lazy-loaded {
	animation: none !important;
	background-image: none !important;
	background-color: transparent !important;
}

.lazy-loaded {
	opacity: 1;
}

/* Ensure transitions work on lazy loaded images */
img[data-src] {
	transition-property: transform, opacity, filter !important;
}

/* Error state */
.lazy-error {
	opacity: 0.5;
	background-color: #f3f4f6;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDMTMuMSAyIDE0IDIuOSAxNCA0VjEwQzE0IDExLjEgMTMuMSAxMiAxMiAxMkMxMC45IDEyIDEwIDExLjEgMTAgMTBWNFYyWiIgZmlsbD0iIzk5OTk5OSIvPgo8cGF0aCBkPSJNMTIgMTRDMTMuMSAxNCAxNCAxNC45IDE0IDE2VjIwQzE0IDIxLjEgMTMuMSAyMiAxMiAyMkMxMC45IDIyIDEwIDIxLjEgMTAgMjBWMThDMTAgMTYuOSAxMC45IDE2IDEyIDE2WiIgZmlsbD0iIzk5OTk5OSIvPgo8L3N2Zz4K");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

/* Background image lazy loading */
[data-bg] {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

/* Add shimmer effect to background images before loading */
[data-bg]:not(.lazy-loaded)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e5e7eb;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		transparent 40%,
		rgba(255, 255, 255, 0.8) 50%,
		transparent 60%,
		transparent 100%
	);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: shimmer 1.5s linear infinite;
	z-index: 1;
}

[data-bg].lazy-loading {
	opacity: 0.8;
	background-color: #e5e7eb;
	background-image: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.8) 50%, transparent 75%);
	background-size: 200% 100%;
	background-position: -200% 0;
	animation: lazy-loading-shimmer 1.5s infinite ease-in-out;
}

[data-bg].lazy-loaded {
	opacity: 1;
}

[data-bg].lazy-error {
	opacity: 0.5;
	background-color: #f3f4f6;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDMTMuMSAyIDE0IDIuOSAxNCA0VjEwQzE0IDExLjEgMTMuMSAxMiAxMiAxMkMxMC45IDEyIDEwIDExLjEgMTAgMTBWNFYyWiIgZmlsbD0iIzk5OTk5OSIvPgo8cGF0aCBkPSJNMTIgMTRDMTMuMSAxNCAxNCAxNC45IDE0IDE2VjIwQzE0IDIxLjEgMTMuMSAyMiAxMiAyMkMxMC45IDIyIDEwIDIxLjEgMTAgMjBWMThDMTAgMTYuOSAxMC45IDE2IDEyIDE2WiIgZmlsbD0iIzk5OTk5OSIvPgo8L3N2Zz4K");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

/* Animations removed - using JavaScript instead */

/* Fade in animation */
.lazy-fade-in {
	opacity: 0;
}

.lazy-fade-in.lazy-loaded {
	opacity: 1;
}

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

.lazy-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Aspect ratio containers for responsive images */
.lazy-aspect-16-9 {
	aspect-ratio: 16 / 9;
}

.lazy-aspect-4-3 {
	aspect-ratio: 4 / 3;
}

.lazy-aspect-1-1 {
	aspect-ratio: 1 / 1;
}

.lazy-aspect-5-3 {
	aspect-ratio: 5 / 3;
}

/* Loading spinner for more complex loading states */
.lazy-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	border: 2px solid #f3f4f6;
	border-top: 2px solid #3b82f6;
	border-radius: 50%;
	animation: lazy-spin 1s linear infinite;
}

@keyframes lazy-spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Utility classes */
.lazy-hidden {
	visibility: hidden;
}

.lazy-visible {
	visibility: visible;
}

/* Print styles - ensure images are visible when printing */
@media print {
	img[data-src] {
		opacity: 1 !important;
	}

	.lazy-loading,
	.lazy-error {
		opacity: 1 !important;
		background: none !important;
	}
}