/* Enhanced Animations */
@keyframes slide_in_left {
	from {
		opacity: 0;
		transform: translateX(-2rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide_in_right {
	from {
		opacity: 0;
		transform: translateX(2rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide_in_up {
	from {
		opacity: 0;
		transform: translateY(2rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes scale_in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bounce_in {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

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

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: calc(200px + 100%) 0;
	}
}

/* Animation utility classes */
.animate-fade-in {
	animation: fade_in 0.6s ease-out;
}

.animate-slide-up {
	animation: slide_in_up 0.6s ease-out;
}

.animate-slide-left {
	animation: slide_in_left 0.6s ease-out;
}

.animate-slide-right {
	animation: slide_in_right 0.6s ease-out;
}

.animate-scale-in {
	animation: scale_in 0.4s ease-out;
}

.animate-bounce-in {
	animation: bounce_in 0.6s ease-out;
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* Intersection Observer animations */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease;
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: all 0.6s ease;
}

.reveal-left.active {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(30px);
	transition: all 0.6s ease;
}

.reveal-right.active {
	opacity: 1;
	transform: translateX(0);
}

/* Hover effects */
.hover-lift {
	transition: transform 0.2s ease;
}

.hover-lift:hover {
	transform: translateY(-4px);
}

.hover-grow {
	transition: transform 0.2s ease;
}

.hover-grow:hover {
	transform: scale(1.05);
}

.hover-glow {
	transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
	box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* Loading animations */
.loading-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--border);
	border-top: 4px solid var(--accent);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading-dots {
	display: inline-flex;
	gap: 4px;
}

.loading-dots span {
	width: 8px;
	height: 8px;
	background: var(--accent);
	border-radius: 50%;
	animation: dots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) {
	animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes dots {
	0%,
	80%,
	100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}