/* Scroll Animation Styles */

/* Base transition for all animations */
.animate-on-scroll,
.fade-in,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.zoom-in,
.zoom-out,
.flip-in,
.rotate-in,
.bounce-in {
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base state - hidden before animation */
.animate-on-scroll {
	opacity: 0;
}

/* Animated state - visible after scroll trigger */
.animate-on-scroll.animated {
	opacity: 1;
}

/* Fade In */
.fade-in {
	opacity: 0;
}

.fade-in.animated {
	opacity: 1;
}

/* Slide Up */
.slide-up {
	opacity: 0;
	transform: translateY(50px);
}

.slide-up.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Slide Down */
.slide-down {
	opacity: 0;
	transform: translateY(-50px);
}

.slide-down.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Slide Left */
.slide-left {
	opacity: 0;
	transform: translateX(-50px);
}

.slide-left.animated {
	opacity: 1;
	transform: translateX(0);
}

/* Slide Right */
.slide-right {
	opacity: 0;
	transform: translateX(50px);
}

.slide-right.animated {
	opacity: 1;
	transform: translateX(0);
}

/* Zoom In */
.zoom-in {
	opacity: 0;
	transform: scale(0.8);
}

.zoom-in.animated {
	opacity: 1;
	transform: scale(1);
}

/* Zoom Out */
.zoom-out {
	opacity: 0;
	transform: scale(1.2);
}

.zoom-out.animated {
	opacity: 1;
	transform: scale(1);
}

/* Flip In */
.flip-in {
	opacity: 0;
	transform: perspective(400px) rotateY(90deg);
}

.flip-in.animated {
	opacity: 1;
	transform: perspective(400px) rotateY(0);
}

/* Rotate In */
.rotate-in {
	opacity: 0;
	transform: rotate(-180deg) scale(0.5);
}

.rotate-in.animated {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* Bounce In */
.bounce-in {
	opacity: 0;
	transform: scale(0.3);
}

.bounce-in.animated {
	opacity: 1;
	transform: scale(1);
	animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
	0% {
		transform: scale(0.3);
	}
	50% {
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

/* Stagger Delays */
.delay-100 {
	transition-delay: 0.1s;
}

.delay-200 {
	transition-delay: 0.2s;
}

.delay-300 {
	transition-delay: 0.3s;
}

.delay-400 {
	transition-delay: 0.4s;
}

.delay-500 {
	transition-delay: 0.5s;
}

.delay-600 {
	transition-delay: 0.6s;
}

.delay-700 {
	transition-delay: 0.7s;
}

.delay-800 {
	transition-delay: 0.8s;
}

.delay-900 {
	transition-delay: 0.9s;
}

.delay-1000 {
	transition-delay: 1s;
}

/* Duration variants */
.duration-fast {
	transition-duration: 0.4s;
}

.duration-normal {
	transition-duration: 0.8s;
}

.duration-slow {
	transition-duration: 1.2s;
}

/* Easing variants */
.ease-in {
	transition-timing-function: ease-in;
}

.ease-out {
	transition-timing-function: ease-out;
}

.ease-in-out {
	transition-timing-function: ease-in-out;
}

.ease-bounce {
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Responsive - reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll,
	.fade-in,
	.slide-up,
	.slide-down,
	.slide-left,
	.slide-right,
	.zoom-in,
	.zoom-out,
	.flip-in,
	.rotate-in,
	.bounce-in {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}