/**
 * Scroll reveal utility. Add .pd-reveal to any block to fade + rise it into view.
 *
 * PROGRESSIVE ENHANCEMENT — read before editing.
 *
 * The hidden state is scoped to `html.pd-js`, a class that reveal.js adds the
 * moment it runs. This ordering is deliberate: if the script is blocked, fails,
 * or the browser lacks IntersectionObserver, `pd-js` is never added, the rules
 * below never match, and the content simply renders normally. Hiding with CSS
 * alone would risk a permanently blank section — never do that.
 *
 * Stagger a group by setting --pd-reveal-delay on individual items.
 */

/**
 * TIMING IS A UX DECISION, NOT A TASTE ONE.
 *
 * These numbers were halved after the reveal was reported as "scroll and there
 * is emptiness, then things appear" — which is exactly what it was doing. At
 * 0.7s with stagger delays running to 400ms, the last card in a grid took over a
 * second to become visible after it was triggered, and it was triggered late
 * (see reveal.js). Anyone scrolling at speed outran it and saw blank bands, which
 * reads as a page that has not loaded rather than one that is animating.
 *
 * The effect still exists for someone reading down the page at normal speed. It
 * just no longer withholds content long enough to be mistaken for absence.
 *
 * Movement is 0.75rem rather than 1.5rem for the same reason: a shorter distance
 * looks settled sooner even mid-transition.
 */
html.pd-js .pd-reveal {
	opacity: 0;
	transform: translateY( 0.75rem );
	transition:
		opacity 0.4s ease,
		transform 0.4s cubic-bezier( 0.2, 0.7, 0.3, 1 );

	/*
	 * Staggers are declared per component (80ms, 160ms, 240ms…) across a dozen
	 * stylesheets. Halving them here scales every one of them from a single
	 * place — the per-file values stay readable as "first, second, third" while
	 * the actual wait is short enough to survive a fast scroll.
	 */
	transition-delay: calc( var( --pd-reveal-delay, 0ms ) * 0.5 );
}

html.pd-js .pd-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/**
 * Respect a reduced-motion preference: show everything, immediately, with no
 * transition. reveal.js also skips the observer in this case, so this is
 * belt-and-braces for a preference toggled after load.
 */
@media ( prefers-reduced-motion: reduce ) {
	html.pd-js .pd-reveal,
	html.pd-js .pd-reveal.is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}