/* ==========================================================================
   Agency Pro — Animations
   Scroll-reveal, floating cards, and AI flow motion. All CSS-driven;
   JS only toggles classes (see assets/js/main.js).
   ========================================================================== */

/* Scroll reveal base state + revealed state */
.agency-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.agency-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.agency-floating-card,
	.agency-ai-flow-step {
		animation: none !important;
		transition: none !important;
	}
}

/* Gentle floating motion for hero cards */
.agency-floating-card-1 {
	animation: agency-float-a 5s ease-in-out infinite;
}

.agency-floating-card-2 {
	animation: agency-float-b 6s ease-in-out infinite;
}

.agency-floating-card-3 {
	animation: agency-float-c 4.5s ease-in-out infinite;
}

@keyframes agency-float-a {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes agency-float-b {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

@keyframes agency-float-c {
	0%, 100% { transform: translateY(0) translateX(0); }
	50% { transform: translateY(-6px) translateX(4px); }
}

/* Skyline bars subtle pulse */
.agency-mock-skyline span {
	animation: agency-pulse 3s ease-in-out infinite;
}

.agency-mock-skyline span:nth-child(2n) {
	animation-delay: 0.4s;
}

.agency-mock-skyline span:nth-child(3n) {
	animation-delay: 0.8s;
}

@keyframes agency-pulse {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

/* Mini bar chart grow-in */
.agency-mini-bars span {
	animation: agency-grow-bar 1.2s ease forwards;
	height: 0;
}

@keyframes agency-grow-bar {
	from { height: 0; }
	to { height: var(--h); }
}

/* Animated counters (JS updates textContent; this just smooths repaint) */
.agency-stat-number {
	transition: color 0.3s ease;
}

/* AI flow step highlight cycle handled by JS toggling .is-active,
   this defines the transition polish */
.agency-ai-flow-connector {
	position: relative;
	overflow: hidden;
}

.agency-ai-flow-connector::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--agency-secondary-blue);
	transition: height 0.6s ease;
}

.agency-ai-flow-connector.is-filled::after {
	height: 100%;
}

/* Mobile menu fade-in (display toggling itself is handled in main.css
   via .is-open; this just softens the appearance) */
.agency-mobile-menu.is-open {
	animation: agency-fade-in 0.25s ease;
}

/* Testimonial slide fade */
.agency-testimonial-slide {
	animation: agency-fade-in 0.4s ease;
}

@keyframes agency-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}