/**
 * Scroll Animations CSS
 * Similar to AOS (Animate On Scroll)
 * 
 * @package 3DAYSGC
 */

/* ============================================
   BASE ANIMATION STATES
   ============================================ */

.aos-item {
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* ============================================
   FADE IN ANIMATIONS
   ============================================ */

.aos-fade {
	opacity: 0;
}

.aos-fade.aos-animate {
	opacity: 1;
}

.aos-fade-up {
	opacity: 0;
	transform: translateY(30px);
}

.aos-fade-up.aos-animate {
	opacity: 1;
	transform: translateY(0);
}

.aos-fade-down {
	opacity: 0;
	transform: translateY(-30px);
}

.aos-fade-down.aos-animate {
	opacity: 1;
	transform: translateY(0);
}

.aos-fade-left {
	opacity: 0;
	transform: translateX(-30px);
}

.aos-fade-left.aos-animate {
	opacity: 1;
	transform: translateX(0);
}

.aos-fade-right {
	opacity: 0;
	transform: translateX(30px);
}

.aos-fade-right.aos-animate {
	opacity: 1;
	transform: translateX(0);
}

/* ============================================
   DELAYS
   ============================================ */

.aos-delay-100 {
	transition-delay: 0.1s;
}

.aos-delay-200 {
	transition-delay: 0.2s;
}

.aos-delay-300 {
	transition-delay: 0.3s;
}

.aos-delay-400 {
	transition-delay: 0.4s;
}

.aos-delay-500 {
	transition-delay: 0.5s;
}

.aos-delay-600 {
	transition-delay: 0.6s;
}

/* ============================================
   DURATION
   ============================================ */

.aos-duration-300 {
	transition-duration: 0.3s;
}

.aos-duration-500 {
	transition-duration: 0.5s;
}

.aos-duration-600 {
	transition-duration: 0.6s;
}

.aos-duration-800 {
	transition-duration: 0.8s;
}

.aos-duration-1000 {
	transition-duration: 1s;
}

/* ============================================
   RESPONSIVE - Disable on mobile if needed
   ============================================ */

@media (max-width: 768px) {
	.aos-item {
		/* Opcional: deshabilitar animaciones en móvil para mejor rendimiento */
		/* opacity: 1 !important;
		transform: none !important; */
	}
}

