/*
 * Entrance motion.
 *
 * Gated on .has-js, which header.php sets before the first paint. Without JavaScript nothing here
 * applies and every element is simply visible, so a failed script cannot leave a blank page.
 *
 * The stagger comes from --reveal-i, an index the markup sets on each sibling, multiplied by the
 * --reveal-step token. reveal.js reads the same token, so the script and the stylesheet cannot
 * disagree about the rhythm.
 */

.has-js [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--duration-reveal) var(--ease),
		transform var(--duration-reveal) var(--ease);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
	will-change: opacity, transform;
}

.has-js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Once it has arrived the hint is a cost with no benefit, and on the gallery it would keep three
   large photographs on their own compositing layers for the life of the page. */
.has-js [data-reveal].is-settled {
	will-change: auto;
}

/*
 * The marker sweep. The block is a background, so it can be wiped in by width alone with no extra
 * element and no layout work.
 */
.has-js .marker {
	background-size: 0% var(--marker-height);
	transition: background-size var(--duration-marker) var(--ease);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step) + var(--duration) * 0.75);
}

.has-js .is-visible .marker,
.has-js .marker.is-visible {
	background-size: 100% var(--marker-height);
}

/*
 * Reduced motion: no travel and no wipe, but the reveal still runs as a plain fade so the page
 * does not appear to load in two stages. base.css has already collapsed the durations.
 */
@media (prefers-reduced-motion: reduce) {
	.has-js [data-reveal] {
		transform: none;
		transition-delay: 0s;
	}

	.has-js .marker {
		background-size: 100% var(--marker-height);
		transition: none;
	}
}