/* Landing Page Animations - Optimized for Conversions */

/* Base animation settings */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Fade In Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fade-in {
	opacity: 0;
	animation: fadeIn 0.8s ease-out forwards;
}

/* Slide In Animations */
@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(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

.slide-in-left {
	opacity: 0;
	transform: translateX(-50px);
	animation: slideInLeft 1.2s ease-out forwards;
}

.slide-in-right {
	opacity: 0;
	transform: translateX(50px);
	animation: slideInRight 1.2s ease-out forwards;
}

.slide-in-up {
	opacity: 0;
	transform: translateY(50px);
	animation: slideInUp 1.2s ease-out forwards;
}

.slide-in-down {
	opacity: 0;
	transform: translateY(-50px);
	animation: slideInDown 0.8s ease-out forwards;
}

/* Scale/Zoom Animation */
@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.scale-in {
	animation: scaleIn 0.6s ease-out forwards;
}

/* Pulse Animation for CTAs */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

.pulse-on-hover:hover {
	animation: pulse 0.6s ease-in-out;
}

/* Subtle continuous pulse for important CTAs */
@keyframes subtlePulse {
	0%, 100% {
		box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
	}
	50% {
		box-shadow: 0 6px 25px rgba(37, 99, 235, 0.6);
	}
}

.cta-pulse {
	animation: subtlePulse 2s ease-in-out infinite;
}

/* Number Counter Animation - handled by JS but styled here */
.counter-number {
	font-variant-numeric: tabular-nums;
	transition: all 0.3s ease;
}

/* Stagger delays for sequential animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Keep elements invisible until animation starts */
.scale-in,
.fade-in {
	opacity: 0;
}

/* Prevent flash of unstyled content */
[class*="slide-in-"],
[class*="scale-in"],
[class*="fade-in"] {
	animation-fill-mode: forwards;
}

/* Hide hero elements initially until animation classes are applied */
.landing-hero-content,
.landing-hero-image {
	opacity: 0;
}

/* Testimonial Carousel Slide */
@keyframes slideTestimonial {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.testimonial-slide {
	animation: slideTestimonial 0.5s ease-out forwards;
}

/* Hover effects for cards */
.benefit-card,
.testimonial-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover,
.testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Trust badge animations */
.trust-badge {
	opacity: 0; /* Hidden initially until fade-in animation is applied */
	transition: transform 0.2s ease;
}

.trust-badge:hover {
	transform: scale(1.05);
}

/* Feature list items animation */
@keyframes checkmarkPop {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.feature-list li .material-icons-round,
.hero-card-list li .material-icons-round {
	display: inline-block;
}

.animate-checkmark .material-icons-round {
	animation: checkmarkPop 0.4s ease-out forwards;
}

/* Stats section number pop */
@keyframes numberPop {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	60% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.stat-number {
	display: block;
	white-space: nowrap;
}

.stat-number.animate-number {
	animation: numberPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.stat-label {
	display: block;
	white-space: nowrap;
}

/* Image fade-in for feature images */
.feature-image img {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.feature-image img.loaded {
	opacity: 1;
	transform: scale(1);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0s !important;
	}
	
	.animate-on-scroll {
		opacity: 1;
		transform: none;
	}
	
	/* Show hero elements immediately for reduced motion */
	/* !important is justified here as this is a critical accessibility override */
	/* that must take precedence over any animation-related opacity settings */
	.landing-hero-content,
	.landing-hero-image,
	.trust-badge {
		opacity: 1 !important;
	}
}

/* Fallback: Show hero elements if JavaScript doesn't load within 2 seconds */
/* This prevents content from being permanently hidden if JS fails */
/* Only applies if no animation class has been added (i.e., JS failed) */
/* Note: Uses attribute selector matching existing animation class naming pattern */
/* (slide-in-*, fade-in) established in this file and landing-animations.js */
.landing-hero-content:not([class*="slide-in"]),
.landing-hero-image:not([class*="slide-in"]),
.trust-badge:not([class*="fade-in"]) {
	animation: showFallback 0s ease 2s forwards;
}

@keyframes showFallback {
	to {
		opacity: 1;
	}
}