/* =====================================================
 * AppAgentix - About Us scroll zoom
 *
 * Loaded on the About Us template only (see inc/scripts.php), after
 * aboutus.css. Every rule needs the page's .aboutus-page body class and
 * .auz-ready, which assets/js/aboutus-zoom.js adds only once it is
 * running - so with JavaScript off, reduced motion, an older browser or
 * in print, nothing here applies and the page is exactly as before.
 *
 * The zoom animates the individual scale and opacity properties, not
 * transform. The hover zooms and lifts in aboutus.css use transform, so
 * the two combine instead of one overwriting the other, and no element's
 * own transition list is replaced.
 *
 *   settle  An image starts at 1.1x and eases back to 1x. Only used on
 *           images whose frame clips overflow, so it never widens the
 *           page.
 *   zoom    A heading or card grows from 0.95x while it fades in. Never
 *           above 1x.
 * ===================================================== */

@media screen and (prefers-reduced-motion: no-preference) {
	/* Waiting off screen. */
	.aboutus-page.auz-ready [data-auz="settle"]:not(.is-zoomed) {
		scale: 1.1;
	}

	.aboutus-page.auz-ready [data-auz="zoom"]:not(.is-zoomed) {
		opacity: 0;
		scale: 0.95;
	}

	/* Arrived. --auz-delay staggers elements that arrive together. The
	   backwards fill holds the start frame through the delay, then lets
	   go, so nothing keeps an animation running once it has played. */
	.aboutus-page.auz-ready [data-auz="settle"].is-zoomed {
		animation: aboutus-zoom-settle 1000ms cubic-bezier(0.22, 1, 0.36, 1) var(--auz-delay, 0ms) backwards;
	}

	.aboutus-page.auz-ready [data-auz="zoom"].is-zoomed {
		animation: aboutus-zoom-in 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--auz-delay, 0ms) backwards;
	}

	/* On screen when the page loaded: shown as it is, not played. */
	.aboutus-page.auz-ready [data-auz].is-instant {
		animation: none;
	}
}

@keyframes aboutus-zoom-settle {
	from {
		scale: 1.1;
	}

	to {
		scale: 1;
	}
}

@keyframes aboutus-zoom-in {
	from {
		opacity: 0;
		scale: 0.95;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}