/**
 * Odyssey Marketing Agency - Animations Styling
 */

/* ==========================================================================
   1. Scroll Triggered Transitions (IntersectionObserver)
   ========================================================================== */
.fade-up-element {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.fade-up-element.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered Delay for grid layouts */
.stagger-grid > * {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.stagger-grid.animated > * {
	opacity: 1;
	transform: translateY(0);
}

.stagger-grid.animated > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-grid.animated > *:nth-child(2) { transition-delay: 0.15s; }
.stagger-grid.animated > *:nth-child(3) { transition-delay: 0.25s; }
.stagger-grid.animated > *:nth-child(4) { transition-delay: 0.35s; }
.stagger-grid.animated > *:nth-child(5) { transition-delay: 0.45s; }
.stagger-grid.animated > *:nth-child(6) { transition-delay: 0.55s; }
.stagger-grid.animated > *:nth-child(7) { transition-delay: 0.65s; }
.stagger-grid.animated > *:nth-child(8) { transition-delay: 0.75s; }
.stagger-grid.animated > *:nth-child(9) { transition-delay: 0.85s; }

/* ==========================================================================
   2. Page Load Animations (Above-the-Fold)
   ========================================================================== */
body {
	animation: pageEnterFade 0.4s ease-out;
}

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

.hero-animate-badge {
	opacity: 0;
	transform: translateY(10px);
	animation: elementLoadIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate-title {
	opacity: 0;
	transform: translateY(20px);
	animation: elementLoadIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-animate-sub {
	opacity: 0;
	transform: translateY(20px);
	animation: elementLoadIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-animate-btns {
	opacity: 0;
	transform: translateY(20px);
	animation: elementLoadIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-animate-img {
	opacity: 0;
	transform: scale(0.96) translateY(20px);
	animation: elementLoadIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes elementLoadIn {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ==========================================================================
   3. Hover Animations & Transitions
   ========================================================================== */

/* Button Hover scale transition */
.btn {
	transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover {
	transform: translateY(-2px) scale(1.02);
}
.btn:active {
	transform: translateY(0) scale(0.98);
}

/* Card Hover transition */
.service-card, .case-study-card, .blog-card, .team-card, .value-card, .pricing-card, .contact-method-card {
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro interaction transitions */
.faq-question::after {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   4. Accessibility: Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-delay: -1ms !important;
		animation-duration: -1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		scroll-behavior: auto !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		transform: none !important;
	}

	.fade-up-element,
	.stagger-grid > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.hero-animate-badge,
	.hero-animate-title,
	.hero-animate-sub,
	.hero-animate-btns,
	.hero-animate-img {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.btn:hover,
	.service-card:hover,
	.case-study-card:hover,
	.blog-card:hover,
	.team-card:hover,
	.value-card:hover,
	.pricing-card:hover {
		transform: none !important;
		box-shadow: none !important;
	}
}