/*
 * Motion.
 *
 * Every rule here is wrapped in `@media (prefers-reduced-motion: no-preference)`
 * rather than bolted on and reversed later. That ordering matters: the
 * un-animated site is the real one, and motion is added only for people who
 * have not asked for less of it. Nothing here moves layout, and nothing here
 * is required to read the page.
 */

@media (prefers-reduced-motion: no-preference) {

	/* ---------- Scroll reveal ------------------------------------------
	 *
	 * Sections rise slightly as they come into view. The initial state is
	 * applied by JavaScript, so if the script never runs the content is
	 * simply visible — the one failure mode that must never hide content.
	 * -------------------------------------------------------------------- */

	.js-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 620ms cubic-bezier(0.2, 0, 0, 1),
			transform 620ms cubic-bezier(0.2, 0, 0, 1);
		will-change: opacity, transform;
	}

	.js-reveal.is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	/* Children of a revealed group come in just behind it, which reads as one
	   movement rather than a queue of separate ones. */
	.js-reveal-stagger > * {
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity 520ms cubic-bezier(0.2, 0, 0, 1),
			transform 520ms cubic-bezier(0.2, 0, 0, 1);
	}

	.js-reveal-stagger.is-revealed > * {
		opacity: 1;
		transform: none;
	}

	.js-reveal-stagger.is-revealed > :nth-child(2) { transition-delay: 70ms; }
	.js-reveal-stagger.is-revealed > :nth-child(3) { transition-delay: 140ms; }
	.js-reveal-stagger.is-revealed > :nth-child(4) { transition-delay: 210ms; }
	.js-reveal-stagger.is-revealed > :nth-child(5) { transition-delay: 280ms; }
	.js-reveal-stagger.is-revealed > :nth-child(6) { transition-delay: 350ms; }

	/* ---------- Hero -----------------------------------------------------
	 *
	 * A very slow push-in on the hero photograph. Slow enough that it reads
	 * as depth rather than as an animation you are meant to notice.
	 * -------------------------------------------------------------------- */

	.cong-hero .wp-block-cover__image-background,
	.cong-ministry__media {
		animation: cong-drift 24s ease-out both;
	}

	@keyframes cong-drift {
		from { transform: scale(1.06); }
		to   { transform: scale(1); }
	}

	/* ---------- Links ----------------------------------------------------
	 *
	 * Underlines draw in from the left rather than appearing all at once.
	 * background-size animates on the compositor; text-decoration does not.
	 * -------------------------------------------------------------------- */

	.cong-nav__primary a,
	.cong-menu__links a {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0% 2px;
		transition: background-size 260ms cubic-bezier(0.2, 0, 0, 1), color 160ms;
	}

	.cong-nav__primary a:hover,
	.cong-nav__primary a:focus-visible,
	.cong-menu__links a:hover,
	.cong-menu__links a:focus-visible {
		background-size: 100% 2px;
	}

	/* The nav's own border-bottom would double up with the drawn underline. */
	.cong-nav__primary a:hover {
		border-bottom-color: transparent;
	}

	/* ---------- Cards ----------------------------------------------------- */

	.cong-card {
		transition:
			transform 260ms cubic-bezier(0.2, 0, 0, 1),
			box-shadow 260ms cubic-bezier(0.2, 0, 0, 1),
			border-color 260ms;
	}

	.cong-card:hover,
	.cong-card:focus-within {
		transform: translateY(-3px);
	}

	.cong-card__media img {
		transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
	}

	.cong-card:hover .cong-card__media img,
	.cong-card:focus-within .cong-card__media img {
		transform: scale(1.04);
	}

	/* ---------- Buttons --------------------------------------------------- */

	.wp-element-button,
	.wp-block-button__link {
		transition:
			background-color 180ms ease,
			color 180ms ease,
			transform 180ms cubic-bezier(0.2, 0, 0, 1),
			box-shadow 180ms ease;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: translateY(0);
	}

	/* ---------- Menu ------------------------------------------------------
	 *
	 * The columns arrive just after the panel, so opening reads as one motion
	 * instead of a wall of links appearing at once.
	 * -------------------------------------------------------------------- */

	.cong-menu__group {
		opacity: 0;
		transform: translateY(10px);
		transition:
			opacity 320ms cubic-bezier(0.2, 0, 0, 1),
			transform 320ms cubic-bezier(0.2, 0, 0, 1);
	}

	.cong-menu.is-open .cong-menu__group {
		opacity: 1;
		transform: none;
	}

	.cong-menu.is-open .cong-menu__group:nth-child(2) { transition-delay: 40ms; }
	.cong-menu.is-open .cong-menu__group:nth-child(3) { transition-delay: 80ms; }
	.cong-menu.is-open .cong-menu__group:nth-child(4) { transition-delay: 120ms; }
	.cong-menu.is-open .cong-menu__group:nth-child(5) { transition-delay: 160ms; }
	.cong-menu.is-open .cong-menu__group:nth-child(6) { transition-delay: 200ms; }
	.cong-menu.is-open .cong-menu__group:nth-child(7) { transition-delay: 240ms; }

	/* ---------- Header ---------------------------------------------------- */

	.cong-header {
		transition: box-shadow 200ms ease, padding 200ms ease;
	}

	/*
	 * The logo no longer shrinks on scroll.
	 *
	 * It was a nice idea and a bad one: the mark changes size under you while
	 * you are reading, which is movement with nothing to say, and the reflow
	 * nudges the whole row. A header that stays put is easier to use.
	 */

	/* ---------- Between pages ---------------------------------------------
	 *
	 * A cross-fade on navigation in browsers that support it. Purely additive:
	 * where it is unsupported the page simply changes as it always did.
	 * -------------------------------------------------------------------- */

	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: cong-fade-out 120ms ease both;
	}

	::view-transition-new(root) {
		animation: cong-fade-in 220ms ease both;
	}

	@keyframes cong-fade-out {
		to { opacity: 0; }
	}

	@keyframes cong-fade-in {
		from { opacity: 0; }
	}
}