/**
 * Animations for page-oferta.php
 * Entrance animations for sections
 */

/* ========================================================================
   Keyframe Animations
   ======================================================================== */

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

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

/* ========================================================================
   Animation Classes
   ======================================================================== */

/* Fade In Animation */
.animate-fade-in {
	animation: fadeIn 0.8s ease-out forwards;
	opacity: 0;
}

/* Slide In Animation */
.animate-slide-in {
	animation: slideInUp 0.8s ease-out forwards;
	opacity: 0;
}

/* Fade In Up Animation */
.animate-fade-in-up {
	animation: slideInUp 0.8s ease-out forwards;
	opacity: 0;
}

/* Scale In Animation */
.animate-scale-in {
	animation: scaleIn 0.8s ease-out forwards;
	opacity: 0;
}

/* ========================================================================
   Staggered Animations (for multiple elements)
   ======================================================================== */

.animate-stagger-1 {
	animation-delay: 0.1s;
}

.animate-stagger-2 {
	animation-delay: 0.2s;
}

.animate-stagger-3 {
	animation-delay: 0.3s;
}

.animate-stagger-4 {
	animation-delay: 0.4s;
}

/* ========================================================================
   Intersection Observer - Trigger animations on scroll
   ======================================================================== */

.animate-on-scroll {
	opacity: 0;
}

.animate-on-scroll.is-visible {
	animation: fadeIn 0.8s ease-out forwards;
}

.animate-on-scroll.is-visible.animate-slide-in {
	animation: slideInUp 0.8s ease-out forwards;
}

.animate-on-scroll.is-visible.animate-fade-in-up {
	animation: slideInUp 0.8s ease-out forwards;
}

.animate-on-scroll.is-visible.animate-scale-in {
	animation: scaleIn 0.8s ease-out forwards;
}

/* ========================================================================
   Responsive Adjustments
   ======================================================================== */

@media (max-width: 768px) {
	.animate-fade-in,
	.animate-slide-in,
	.animate-fade-in-up,
	.animate-scale-in {
		animation-duration: 0.6s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.animate-fade-in,
	.animate-slide-in,
	.animate-fade-in-up,
	.animate-scale-in {
		animation: none;
		opacity: 1;
		transform: none;
	}
}