/**
 * Modern Entrance Animations for Home Page
 * 
 * Minimalistic, performant animations following modern web design trends.
 * Uses GPU-accelerated properties (transform, opacity) for smooth performance.
 */

/* ============================================
   Animation Keyframes
   ============================================ */

/* Fade in with subtle slide up - for hero content */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Simple fade in - for general content */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Scale in with fade - for cards and statistics */
@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Slide in from bottom - for scroll-triggered content */
@keyframes slideInFromBottom {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   Initial States (hidden before animation)
   ============================================ */

.acme-animate-hero,
.acme-animate-fade,
.acme-animate-scale,
.acme-animate-slide {
	opacity: 0;
}

/* ============================================
   Active Animation States
   ============================================ */

/* Hero animations - triggered immediately on page load */
.acme-animate-hero.is-visible {
	animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade animations - subtle and elegant */
.acme-animate-fade.is-visible {
	animation: fadeIn 0.6s ease-out forwards;
}

/* Scale animations - for cards and statistics */
.acme-animate-scale.is-visible {
	animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Slide animations - for scroll-triggered content */
.acme-animate-slide.is-visible {
	animation: slideInFromBottom 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================
   Stagger Delays (for sequential animations)
   ============================================ */

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

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

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

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

.acme-animate-delay-5 {
	animation-delay: 0.5s;
}

.acme-animate-delay-6 {
	animation-delay: 0.6s;
}

/* ============================================
   Accessibility: Respect prefers-reduced-motion
   ============================================ */

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

/* ============================================
   Performance Optimization
   ============================================ */

/* Use will-change for elements that will animate */
.acme-animate-hero,
.acme-animate-fade,
.acme-animate-scale,
.acme-animate-slide {
	will-change: opacity, transform;
}

/* Remove will-change after animation completes */
.acme-animate-hero.is-visible,
.acme-animate-fade.is-visible,
.acme-animate-scale.is-visible,
.acme-animate-slide.is-visible {
	will-change: auto;
}