/* ── Scroll fade-in entrance animations ───────────────────────────────────── */
/* Opt in: add class `fade-in`. Stagger capped at 3 elements (delay-0/1/2 only). */
/* Auto-stagger: put `data-fade-stagger` on a parent; JS adds fade-in + delay-N.  */

@keyframes fade-in-up {
	from { opacity: 0; translate: 0 24px; }
	to   { opacity: 1; translate: 0 0; }
}

/* Guard: only hide when JS has run (class added via wp_head inline script) */
.fade-in-ready .fade-in {
	opacity: 0;
	translate: 0 24px;
}

.fade-in-ready .fade-in.visible {
	animation: fade-in-up 0.6s ease forwards;
	animation-delay: var(--fade-in-delay, 0s);
}

/* Stagger delay tokens — max 3 levels, 100ms total spread */
.fade-in-delay-0 { --fade-in-delay: 0s; }
.fade-in-delay-1 { --fade-in-delay: 0.05s; }
.fade-in-delay-2 { --fade-in-delay: 0.1s; }

/* Collapse stagger on mobile — staggered entrances feel laggy on small screens */
@media (max-width: 768px) {
	[class*="fade-in-delay-"] {
		--fade-in-delay: 0s;
	}
}

/* Reduced motion: show everything immediately, no animation */
@media (prefers-reduced-motion: reduce) {
	.fade-in-ready .fade-in,
	.fade-in-ready .fade-in.visible {
		opacity: 1;
		translate: none;
		animation: none;
	}
}