@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Kelas animasi */
.animate-element {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-element.animated {
	opacity: 1;
}

/* Variasi animasi */
.animate-fade-up {
	transform: translateY(40px);
}

.animate-fade-up.animated {
	transform: translateY(0);
}

.animate-fade-down {
	transform: translateY(-40px);
}

.animate-fade-down.animated {
	transform: translateY(0);
}

.animate-fade-left {
	transform: translateX(-40px);
}

.animate-fade-left.animated {
	transform: translateX(0);
}

.animate-fade-right {
	transform: translateX(40px);
}

.animate-fade-right.animated {
	transform: translateX(0);
}

.animate-zoom {
	transform: scale(0.9);
}

.animate-zoom.animated {
	transform: scale(1);
}

.animate-flip {
	transform: perspective(1000px) rotateY(90deg);
}

.animate-flip.animated {
	transform: perspective(1000px) rotateY(0);
}

/* Delay animasi */
.delay-1 {
	transition-delay: 0.1s;
}

.delay-2 {
	transition-delay: 0.2s;
}

.delay-3 {
	transition-delay: 0.3s;
}

.delay-4 {
	transition-delay: 0.4s;
}

.delay-5 {
	transition-delay: 0.5s;
}

.delay-6 {
	transition-delay: 0.6s;
}

.delay-7 {
	transition-delay: 0.7s;
}

.delay-8 {
	transition-delay: 0.8s;
}

/* Duration animasi */
.duration-fast {
	transition-duration: 0.5s;
}

.duration-normal {
	transition-duration: 0.8s;
}

.duration-slow {
	transition-duration: 1.2s;
}