/*
 * Reveal animations.
 *
 * Subtle by design: 10px rise + fade, 560ms, ease-out, staggered by --rd.
 * Nothing moves more than a few pixels and nothing scales or rotates.
 *
 * Contract:
 *   [data-reveal-root]  the observed section; gets .is-revealed
 *   [data-reveal]       a descendant that animates in
 * --rd                per-element delay (default 0ms)
 */

[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition:
		opacity 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0ms),
		transform 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0ms);
	will-change: opacity, transform;
}

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

/* Once it has played, drop the hint so it stops costing anything. */
.is-revealed [data-reveal] {
	will-change: auto;
}

/* Media rises from slightly further and takes a touch longer. */
[data-reveal="media"] {
	transform: translate3d(0, 16px, 0);
	transition-duration: 0.68s;
}

/* Cards in a grid: same treatment, staggered inline via --rd. */
[data-reveal="card"] {
	transform: translate3d(0, 12px, 0);
}

/*
 * Accessibility: honour the OS setting. Everything is visible with no
 * movement at all - not merely a shorter animation.
 */
@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	.is-revealed [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}