/* ── Keyframes ────────────────────────────── */

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heroZoom {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

@keyframes arrowFadeIn {
	from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes arrowFloat {
	0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
	50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

@keyframes heroImageFadeUp {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroKenBurns {
	0%   { transform: scale(1.04) translate(0, 0); }
	100% { transform: scale(1.16) translate(-1.4%, 2%); }
}

@keyframes heroCaptionFade {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Entry animations ────────────────────── */

.animate-fade-up {
	opacity: 0;
	animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-delay-1 { animation-delay: 0.15s; transition-delay: 0.15s; }
.animate-delay-2 { animation-delay: 0.3s; transition-delay: 0.3s; }
.animate-delay-3 { animation-delay: 0.45s; transition-delay: 0.45s; }

/* ── Scroll-triggered animations ─────────── */

.animate-on-scroll {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.animate-on-scroll.animate-delay-1 { transition-delay: 0.12s; }
.animate-on-scroll.animate-delay-2 { transition-delay: 0.24s; }
.animate-on-scroll.animate-delay-3 { transition-delay: 0.36s; }

/* ── Reduced motion ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.animate-fade-up,
	.animate-on-scroll {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.hero-slide--active {
		animation: none !important;
	}

	.hero-scroll-hint {
		animation: none !important;
	}

	.page-hero-image,
	.page-hero-slide,
	.page-hero-slide.is-active {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}