/*
 * Ashton Graham reusable stagger fade effect
 * ------------------------------------------
 *
 * Use this when you want a subtle fade/slide reveal for a row or grid of items.
 *
 * Markup pattern:
 *
 * <div class="ag-fade-sequence" data-ag-fade-sequence>
 *   <div class="ag-fade-item" data-ag-fade-item style="--ag-fade-delay: 0ms;">...</div>
 *   <div class="ag-fade-item" data-ag-fade-item style="--ag-fade-delay: 120ms;">...</div>
 *   <div class="ag-fade-item" data-ag-fade-item style="--ag-fade-delay: 240ms;">...</div>
 * </div>
 *
 * Required behavior:
 * - Add `data-ag-fade-sequence` to the parent wrapper.
 * - Add `data-ag-fade-item` to each child you want to animate.
 * - Optional: set `--ag-fade-delay` inline or in CSS per item.
 *
 * Runtime behavior:
 * - JS should add `.is-visible` to each item when the sequence enters view.
 * - Site-wide JS helper lives in `/js/functions.js` as `initAgFadeSequences()`.
 * - Without JS, items should remain visible if `.ag-fade-sequence--static` is added.
 *
 * Useful tweaks:
 * - Change `--ag-fade-distance` for more/less movement.
 * - Change `--ag-fade-duration` for slower/faster reveal.
 * - Change `--ag-fade-delay` on each item for stagger spacing.
 */

.ag-fade-sequence {
	--ag-fade-distance: 18px;
	--ag-fade-duration: 900ms;
	--ag-fade-ease: cubic-bezier(0.51, 0.18, 0, 0.88);
}

.ag-fade-item {
	opacity: 0;
	transform: translate3d(0, var(--ag-fade-distance), 0);
	transition:
		opacity var(--ag-fade-duration) var(--ag-fade-ease) var(--ag-fade-delay, 0ms),
		transform var(--ag-fade-duration) var(--ag-fade-ease) var(--ag-fade-delay, 0ms);
	will-change: opacity, transform;
}

.ag-fade-item.is-visible,
.ag-fade-sequence--static .ag-fade-item {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.ag-fade-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}