/**
 * optimizations.css - Performance and UX optimizations
 */

/* Smooth language transition */
[data-i18n],
[data-i18n-html] {
	transition: opacity 0.2s ease;
}

body.language-switching {
	pointer-events: none;
}

body.language-switching [data-i18n],
body.language-switching [data-i18n-html] {
	opacity: 0.6;
}

/* Lazy loading placeholder */
img[data-src] {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
	min-height: 200px;
}

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

/* Modal optimizations */
.modal {
	will-change: opacity;
	transition: opacity 0.3s ease;
}

/* Reduce repaints */
.navbar {
	will-change: box-shadow;
	transition: box-shadow 0.3s ease;
}

.navbar.shadow-bg {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Performance optimizations */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* Improve button interactions */
.btn,
.btn1,
.btnI {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn1:hover,
.btnI:hover {
	transform: translateY(-2px);
}

.btn:active,
.btn1:active,
.btnI:active {
	transform: translateY(0);
}

/* Loading indicator for language switch */
body.language-switching::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, #007bff, transparent);
	background-size: 50% 100%;
	animation: loadingBar 1s infinite;
	z-index: 9999;
}

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

/* Accessibility improvements */
.dropdown-item:focus,
.btn:focus,
.btn1:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}
}