/* ==========================================================================
   Animations & Transitions
   ========================================================================== */

/* Keyframes */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideLeft {
	from {
		opacity: 0;
		transform: translateX(30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideRight {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Intersection Observer Reveal Classes */
.reveal {
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
	opacity: 1;
	visibility: visible;
}

.reveal.fade-in.active {
	animation: fadeIn 0.8s ease forwards;
}

.reveal.slide-up {
	transform: translateY(40px);
}

.reveal.slide-up.active {
	transform: translateY(0);
	animation: slideUp 0.8s cubic-bezier(0.5, 0, 0, 1) forwards;
}

.reveal.slide-left {
	transform: translateX(40px);
}

.reveal.slide-left.active {
	transform: translateX(0);
	animation: slideLeft 0.8s cubic-bezier(0.5, 0, 0, 1) forwards;
}

.reveal.slide-right {
	transform: translateX(-40px);
}

.reveal.slide-right.active {
	transform: translateX(0);
	animation: slideRight 0.8s cubic-bezier(0.5, 0, 0, 1) forwards;
}

/* Delay modifiers for staggered animations */
.delay-100 {
	animation-delay: 100ms;
	transition-delay: 100ms;
}

.delay-200 {
	animation-delay: 200ms;
	transition-delay: 200ms;
}

.delay-300 {
	animation-delay: 300ms;
	transition-delay: 300ms;
}

.delay-400 {
	animation-delay: 400ms;
	transition-delay: 400ms;
}

.delay-500 {
	animation-delay: 500ms;
	transition-delay: 500ms;
}