/**
 * reveals.css — scroll animation states.
 *
 * Elements carry data-reveal and are revealed by an IntersectionObserver in
 * main.js, which adds .is-revealed. Nothing animates when the visitor has
 * asked for reduced motion: the tokens collapse to zero and the rules below
 * are switched off entirely.
 */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
	will-change: opacity, transform;
}

.js [data-reveal="fade"] {
	transform: none;
}

.js [data-reveal="left"] {
	transform: translateX(calc(var(--reveal-distance) * -1));
}

.js [data-reveal="right"] {
	transform: translateX(var(--reveal-distance));
}

.js [data-reveal="scale"] {
	transform: scale(.96);
}

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

/* Children stagger in sequence. The index is set by main.js. */

.js [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

.js [data-reveal-group].is-revealed > * {
	opacity: 1;
	transform: none;
}

/* A line that draws itself across, used under section headings. */

.js [data-reveal-line] {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--dur-slow) var(--ease-out);
}

.js [data-reveal-line].is-revealed {
	transform: scaleX(1);
}

/* Counters hold their space while they tick up. */

[data-count] {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal],
	.js [data-reveal-group] > *,
	.js [data-reveal-line] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* With JavaScript off nothing is hidden: the .js class is only added by the
   inline snippet in header.php, so [data-reveal] elements render as-is. */