/**
 * Viewport fade-in reveals.
 *
 * Usage in the block editor (Additional CSS class(es)):
 * - `sanc-reveal` on any block to fade it in when it enters the viewport.
 * - `sanc-reveal-children` on a Group, Grid, or Columns block to stagger
 *   each direct child. Do not also add `sanc-reveal` to those children.
 *
 * Skip the hero cover and overlay header — they are already on screen.
 */

.sanc-reveal,
.sanc-reveal-children > * {
	--sanc-reveal-delay: 0ms;
	opacity: 0;
	transform: translateY(var(--sanc-reveal-distance, 1.25rem));
	transition:
		opacity var(--sanc-reveal-duration, 0.7s) var(--sanc-reveal-easing, ease),
		transform var(--sanc-reveal-duration, 0.7s) var(--sanc-reveal-easing, ease);
	transition-delay: var(--sanc-reveal-delay);
}

.sanc-reveal.is-visible,
.sanc-reveal-children > *.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sanc-reveal,
	.sanc-reveal-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}