/**
 * AnyMag Scroll Animations (~4KB)
 * Loaded ONLY on pages that set $anymag_needs_scroll_animations = true.
 * Elements start hidden, JS (GSAP or IntersectionObserver) adds .am-visible.
 */

/* ─── Base State: Hidden but occupying space (no CLS) ─── */
.am-fade-up,
.am-fade-down,
.am-fade-left,
.am-fade-right,
.am-scale-in,
.am-clip-reveal {
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.am-fade-up    { transform: translateY(30px); }
.am-fade-down  { transform: translateY(-30px); }
.am-fade-left  { transform: translateX(-30px); }
.am-fade-right { transform: translateX(30px); }
.am-scale-in   { transform: scale(0.92); }
.am-clip-reveal {
	clip-path: inset(0 100% 0 0);
	transition: opacity 0.6s ease, clip-path 0.7s ease;
}

/* ─── Visible State ─── */
.am-visible.am-fade-up,
.am-visible.am-fade-down {
	opacity: 1;
	transform: translateY(0);
}
.am-visible.am-fade-left,
.am-visible.am-fade-right {
	opacity: 1;
	transform: translateX(0);
}
.am-visible.am-scale-in {
	opacity: 1;
	transform: scale(1);
}
.am-visible.am-clip-reveal {
	opacity: 1;
	clip-path: inset(0 0% 0 0);
}

/* ─── Stagger Delays (applied via class in HTML) ─── */
.am-delay-1 { transition-delay: 0.1s; }
.am-delay-2 { transition-delay: 0.2s; }
.am-delay-3 { transition-delay: 0.3s; }
.am-delay-4 { transition-delay: 0.4s; }
.am-delay-5 { transition-delay: 0.5s; }
.am-delay-6 { transition-delay: 0.6s; }

/* ─── Section Title Underline Draw ─── */
.am-title-reveal {
	position: relative;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.am-title-reveal::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--am-accent, #2563eb);
	transition: width 0.6s ease 0.3s;
}
.am-visible.am-title-reveal {
	opacity: 1;
	transform: translateX(0);
}
.am-visible.am-title-reveal::after {
	width: 60px;
}

/* ─── Ken Burns (for hero images) ─── */
@keyframes am-ken-burns {
	0%   { transform: scale(1) translate(0, 0); }
	50%  { transform: scale(1.06) translate(-1%, -0.5%); }
	100% { transform: scale(1) translate(0, 0); }
}
.am-ken-burns {
	animation: am-ken-burns 20s ease-in-out infinite;
	will-change: transform;
}

/* ─── Ticker Scroll (for breaking news) ─── */
@keyframes am-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.am-ticker-scroll {
	animation: am-ticker-scroll 30s linear infinite;
}
.am-ticker-scroll:hover {
	animation-play-state: paused;
}

/* ─── Counter Glow (on count-up completion) ─── */
@keyframes am-counter-glow {
	0%   { text-shadow: none; }
	50%  { text-shadow: 0 0 12px rgba(37,99,235,0.3); }
	100% { text-shadow: none; }
}
.am-counter-done {
	animation: am-counter-glow 1s ease-out;
}

/* ─── Floating Gentle Bob (for decorative elements) ─── */
@keyframes am-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
.am-float {
	animation: am-float 3s ease-in-out infinite;
}

/* ─── Progress Line Draw (for step connectors) ─── */
.am-line-draw {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	transition: stroke-dashoffset 1.2s ease;
}
.am-visible .am-line-draw {
	stroke-dashoffset: 0;
}

/* ─── Mobile: Simpler Animations ─── */
@media (max-width: 768px) {
	.am-fade-up,
	.am-fade-down,
	.am-fade-left,
	.am-fade-right {
		/* Reduce distance on mobile */
		transform: translateY(15px) !important;
	}
	.am-visible.am-fade-up,
	.am-visible.am-fade-down,
	.am-visible.am-fade-left,
	.am-visible.am-fade-right {
		transform: translateY(0) !important;
	}
	/* Disable stagger on mobile for faster perceived load */
	.am-delay-1, .am-delay-2, .am-delay-3,
	.am-delay-4, .am-delay-5, .am-delay-6 {
		transition-delay: 0s !important;
	}
	/* No Ken Burns on mobile (performance) */
	.am-ken-burns {
		animation: none;
	}
}

/* ─── Reduced Motion: Override all scroll animations ─── */
@media (prefers-reduced-motion: reduce) {
	.am-fade-up, .am-fade-down, .am-fade-left, .am-fade-right,
	.am-scale-in, .am-clip-reveal, .am-title-reveal {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.am-ken-burns, .am-ticker-scroll, .am-float {
		animation: none !important;
	}
}