/* Utility classes and animations */

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		transform: translateX(-20px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Animation utilities */
.animate-fade-in {
	animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-up {
	animation: fadeInUp 0.8s ease-out;
}

.animate-slide-in {
	animation: slideIn 0.6s ease-out;
}

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

/* Image responsive */
.img-responsive {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Loading states */
.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Responsive images with lazy loading */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
	opacity: 1;
}

/* Performance optimizations */
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* 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;
		scroll-behavior: auto !important;
	}
}