/**
 * Advantage Biz Marketing - Animations & Motion System
 * Modern Editorial Motion Philosophy
 *
 * Optimized for performance with:
 * - CSS custom properties for consistency
 * - Reduced motion support
 * - Minimal keyframe definitions
 * - No render-blocking
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
	/* Animation Timing */
	--animation-fast: 200ms;
	--animation-normal: 300ms;
	--animation-slow: 400ms;
	--animation-stagger: 80ms;

	/* Animation Easing */
	--ease-out: ease-out;
	--ease-in-out: ease-in-out;

	/* Motion Colors */
	--accent-gold: #d4a03c;
	--accent-gold-light: rgba(212, 160, 60, 0.2);
	--shadow-color: rgba(0, 0, 0, 0.08);
	--white-overlay: rgba(255, 255, 255, 0.2);

	/* Spacing */
	--lift-distance: -4px;
	--slide-distance: 20px;
}

/* ==========================================================================
   2. Keyframe Animations (Consolidated)
   ========================================================================== */

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(var(--slide-distance)); }
	to { opacity: 1; transform: translateY(0); }
}

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

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

/* ==========================================================================
   3. Page Load Animations
   ========================================================================== */

.fade-up {
	animation: fadeUp var(--animation-slow) var(--ease-out) forwards;
	opacity: 0;
}

.fade-up-group > * {
	opacity: 0;
	animation: fadeUp var(--animation-slow) var(--ease-out) forwards;
}

.fade-up-group > *:nth-child(1) { animation-delay: calc(var(--animation-stagger) * 0); }
.fade-up-group > *:nth-child(2) { animation-delay: calc(var(--animation-stagger) * 1); }
.fade-up-group > *:nth-child(3) { animation-delay: calc(var(--animation-stagger) * 2); }
.fade-up-group > *:nth-child(4) { animation-delay: calc(var(--animation-stagger) * 3); }
.fade-up-group > *:nth-child(5) { animation-delay: calc(var(--animation-stagger) * 4); }
.fade-up-group > *:nth-child(6) { animation-delay: calc(var(--animation-stagger) * 5); }
.fade-up-group > *:nth-child(7) { animation-delay: calc(var(--animation-stagger) * 6); }
.fade-up-group > *:nth-child(8) { animation-delay: calc(var(--animation-stagger) * 7); }

.fade-in {
	animation: fadeIn var(--animation-slow) var(--ease-out) forwards;
	opacity: 0;
}

/* ==========================================================================
   4. Card & Image Effects (Consolidated)
   ========================================================================== */

.article-card,
.card,
.wp-block-post-card,
.wp-block-post-featured-image {
	transition: transform var(--animation-fast) var(--ease-out),
	            box-shadow var(--animation-fast) var(--ease-out);
}

.article-card:hover,
.card:hover,
.wp-block-post-card:hover {
	transform: translateY(var(--lift-distance));
	box-shadow: 0 12px 40px var(--shadow-color);
}

.article-card:focus-within,
.card:focus-within {
	box-shadow: 0 8px 32px rgba(212, 160, 60, 0.15);
}

/* Image container for zoom effect */
.card-image,
.post-thumbnail,
.wp-block-post-featured-image {
	overflow: hidden;
}

.card-image img,
.post-thumbnail img,
.wp-block-post-featured-image img {
	transition: transform var(--animation-slow) var(--ease-out);
}

.article-card:hover .card-image img,
.card:hover .post-thumbnail img,
.wp-block-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Image reveal on scroll */
.img-reveal {
	opacity: 0;
	transform: scale(1.05);
	transition: opacity var(--animation-slow) var(--ease-out),
	            transform var(--animation-slow) var(--ease-out);
}

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

/* ==========================================================================
   5. Button Effects (Consolidated)
   ========================================================================== */

.btn-primary,
.wp-block-button__link,
button,
input[type="submit"],
.button {
	position: relative;
	overflow: hidden;
}

.btn-primary::before,
.wp-block-button__link::before,
button::before,
input[type="submit"]::before,
.button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--white-overlay);
	transition: left var(--animation-normal) var(--ease-out);
	z-index: 0;
}

.btn-primary:hover::before,
.wp-block-button__link:hover::before,
button:hover::before,
input[type="submit"]:hover::before,
.button:hover::before {
	left: 100%;
}

.btn-primary,
.wp-block-button__link {
	z-index: 1;
}

.btn-primary:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
.button:hover {
	background-color: var(--accent-gold);
}

.btn-primary:active,
.wp-block-button__link:active,
button:active,
.button:active {
	transform: scale(0.98);
}

/* ==========================================================================
   6. Navigation Effects (Consolidated)
   ========================================================================== */

.nav-link,
.wp-block-navigation-link a,
.main-navigation a,
.site-header a {
	position: relative;
}

.nav-link::after,
.wp-block-navigation-link a::after,
.main-navigation a::after,
.site-header a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--accent-gold);
	transition: width var(--animation-normal) var(--ease-out);
}

.nav-link:hover::after,
.wp-block-navigation-link a:hover::after,
.main-navigation a:hover::after,
.site-header a:hover::after,
.nav-link.current::after,
.wp-block-navigation-link.is-current::after,
.main-navigation .current-menu-item a::after,
.site-header .current-menu-item a::after {
	width: 100%;
}

.nav-link:hover,
.wp-block-navigation-link a:hover,
.main-navigation a:hover {
	color: var(--accent-gold);
}

/* Dropdown animation */
.wp-block-navigation-submenu,
.sub-menu,
.dropdown-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--animation-fast) var(--ease-out),
	            transform var(--animation-fast) var(--ease-out),
	            visibility var(--animation-fast);
}

.wp-block-navigation-item:hover > .wp-block-navigation-submenu,
.menu-item:hover > .sub-menu,
.nav-item:hover > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ==========================================================================
   7. Reading Progress Bar
   ========================================================================== */

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-gold), #e8b84a);
	width: 0%;
	z-index: 9999;
	transition: width 100ms linear;
}

.reading-progress::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
	filter: blur(2px);
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   8. Utility & Scroll Reveal
   ========================================================================== */

.scroll-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--animation-slow) var(--ease-out),
	            transform var(--animation-slow) var(--ease-out);
}

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

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--accent-gold);
	outline-offset: 2px;
}

/* Page transition */
.page-transition {
	opacity: 0;
	animation: fadeIn 300ms ease-out forwards;
}

/* Pause animations utility */
.pause-animations *,
.pause-animations *::before,
.pause-animations *::after {
	animation-play-state: paused !important;
	transition-play-state: paused !important;
}

/* ==========================================================================
   9. Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.fade-up,
	.fade-in,
	.img-reveal {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.article-card:hover,
	.card:hover,
	.wp-block-post-card:hover {
		transform: none;
		box-shadow: 0 4px 16px var(--shadow-color);
	}

	.article-card:hover .card-image img,
	.card:hover .post-thumbnail img,
	.wp-block-post-card:hover .wp-block-post-featured-image img {
		transform: none;
	}

	.nav-link::after,
	.wp-block-navigation-link a::after {
		transition: none;
	}

	.btn-primary::before,
	.wp-block-button__link::before {
		display: none;
	}

	.reading-progress {
		display: none;
	}
}