/**
 * AMARA 225 Animations & Effects
 *
 * @package AMARA_225
 * @since 1.0.0
 *
 * Animaciones sutiles y elegantes que reflejan la esencia de AMARA 225
 */

/**
 * ======================================================================
 * 1. FADE IN ANIMATIONS
 * ======================================================================
 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

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

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

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

/**
 * ======================================================================
 * 2. SCALE ANIMATIONS
 * ======================================================================
 */
@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes heartbeat {
	0%, 100% {
		transform: scale(1);
	}
	10%, 30% {
		transform: scale(0.95);
	}
	20%, 40%, 60%, 80% {
		transform: scale(1.05);
	}
	50%, 70% {
		transform: scale(1.1);
	}
}

/**
 * ======================================================================
 * 3. ROTATE ANIMATIONS
 * ======================================================================
 */
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes wiggle {
	0%, 100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-5deg);
	}
	75% {
		transform: rotate(5deg);
	}
}

/**
 * ======================================================================
 * 4. BOUNCE ANIMATIONS
 * ======================================================================
 */
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-7px);
	}
}

/**
 * ======================================================================
 * 5. SLIDE ANIMATIONS
 * ======================================================================
 */
@keyframes slideInUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideInDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

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

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

/**
 * ======================================================================
 * 6. SPECIAL EFFECTS
 * ======================================================================
 */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 5px var(--amara-primary), 0 0 10px var(--amara-primary);
	}
	50% {
		box-shadow: 0 0 20px var(--amara-primary), 0 0 30px var(--amara-primary);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
}

/**
 * ======================================================================
 * 7. UTILITY ANIMATION CLASSES
 * ======================================================================
 */

/* Fade animations */
.animate-fadeIn {
	animation: fadeIn 0.6s ease-in-out;
}

.animate-fadeInUp {
	animation: fadeInUp 0.8s ease-out;
}

.animate-fadeInDown {
	animation: fadeInDown 0.8s ease-out;
}

.animate-fadeInLeft {
	animation: fadeInLeft 0.8s ease-out;
}

.animate-fadeInRight {
	animation: fadeInRight 0.8s ease-out;
}

/* Scale animations */
.animate-scaleIn {
	animation: scaleIn 0.5s ease-out;
}

.animate-pulse {
	animation: pulse 2s infinite;
}

.animate-heartbeat {
	animation: heartbeat 1.5s ease-in-out infinite;
}

/* Bounce animations */
.animate-bounceIn {
	animation: bounceIn 0.8s ease-out;
}

.animate-bounce {
	animation: bounce 2s infinite;
}

/* Slide animations */
.animate-slideInUp {
	animation: slideInUp 0.6s ease-out;
}

.animate-slideInDown {
	animation: slideInDown 0.6s ease-out;
}

.animate-slideInLeft {
	animation: slideInLeft 0.6s ease-out;
}

.animate-slideInRight {
	animation: slideInRight 0.6s ease-out;
}

/* Special effects */
.animate-float {
	animation: float 3s ease-in-out infinite;
}

.animate-glow {
	animation: glow 2s ease-in-out infinite;
}

/**
 * ======================================================================
 * 8. SCROLL REVEAL ANIMATIONS (Applied via JavaScript)
 * ======================================================================
 */
.scroll-reveal {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

.scroll-reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-left.revealed {
	opacity: 1;
	transform: translateX(0);
}

.scroll-reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-right.revealed {
	opacity: 1;
	transform: translateX(0);
}

.scroll-reveal-scale {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-scale.revealed {
	opacity: 1;
	transform: scale(1);
}

/**
 * ======================================================================
 * 9. STAGGER DELAYS (for sequential animations)
 * ======================================================================
 */
.delay-1 { animation-delay: 0.1s; transition-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; transition-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; transition-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; transition-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; transition-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; transition-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; transition-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; transition-delay: 0.8s; }

/**
 * ======================================================================
 * 10. AMARA 225 SPECIFIC ANIMATIONS
 * ======================================================================
 */

/* Hero title animation */
.amara-hero-title {
	animation: fadeInUp 1s ease-out 0.3s both;
}

.amara-hero-subtitle {
	animation: fadeInUp 1s ease-out 0.5s both;
}

.amara-hero-description {
	animation: fadeInUp 1s ease-out 0.7s both;
}

.amara-hero-cta {
	animation: fadeInUp 1s ease-out 0.9s both;
}

/* Section title underline animation */
@keyframes drawLine {
	from {
		width: 0;
	}
	to {
		width: 80px;
	}
}

.section-title::after {
	animation: drawLine 0.8s ease-out 0.3s both;
}

/* Card hover effects */
.amara-pilar-card,
.amara-servicio-card,
.amara-testimonio-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.amara-pilar-card:hover {
	animation: pulse 0.6s ease-in-out;
}

/* Button ripple effect */
@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

.btn {
	position: relative;
	overflow: hidden;
}

.btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
	width: 300px;
	height: 300px;
}

/* FAQ toggle animation */
.faq-toggle {
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-question:hover .faq-toggle {
	transform: translateY(-50%) rotate(90deg);
	background-color: var(--amara-secondary);
}

/* Number counter animation */
@keyframes countUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.step-number {
	animation: bounceIn 0.8s ease-out;
}

/* Gradient animation for backgrounds */
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.gradient-animated {
	background-size: 200% 200%;
	animation: gradientShift 15s ease infinite;
}

/* Loading spinner */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.loading-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid rgba(212, 175, 55, 0.3);
	border-top-color: var(--amara-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

/* Testimonial image hover effect */
.testimonio-image {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.testimonio-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.amara-testimonio-card:hover .testimonio-image::before {
	left: 100%;
}

/* Pilar icon rotation on hover */
.pilar-icon {
	transition: transform 0.5s ease;
}

.amara-pilar-card:hover .pilar-icon {
	transform: rotateY(360deg);
}

/* Service image zoom effect */
.servicio-image {
	overflow: hidden;
}

.servicio-image img {
	transition: transform 0.5s ease;
}

.amara-servicio-card:hover .servicio-image img {
	transform: scale(1.15);
}

/* Text typing effect (for hero or special sections) */
@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes blink {
	50% {
		border-color: transparent;
	}
}

.typing-effect {
	overflow: hidden;
	border-right: 2px solid var(--amara-primary);
	white-space: nowrap;
	animation: typing 3s steps(40) 1s both, blink 0.75s step-end infinite;
}

/**
 * ======================================================================
 * 11. SMOOTH SCROLL BEHAVIOR
 * ======================================================================
 */
html {
	scroll-behavior: smooth;
}

/* Smooth scroll for anchor links */
a[href^="#"] {
	scroll-behavior: smooth;
}

/**
 * ======================================================================
 * 12. PERFORMANCE OPTIMIZATIONS
 * ======================================================================
 */

/* GPU acceleration for smooth animations */
.animate-fadeInUp,
.animate-fadeInDown,
.animate-fadeInLeft,
.animate-fadeInRight,
.animate-scaleIn,
.scroll-reveal {
	will-change: transform, opacity;
}

/* Remove will-change after animation */
.scroll-reveal.revealed {
	will-change: auto;
}

/**
 * ======================================================================
 * 13. ACCESSIBILITY - RESPECT USER PREFERENCES
 * ======================================================================
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.scroll-reveal,
	.scroll-reveal-left,
	.scroll-reveal-right,
	.scroll-reveal-scale {
		opacity: 1 !important;
		transform: none !important;
	}

	html {
		scroll-behavior: auto;
	}
}