/**
 * Scroll reveal animations — CSS only, no JavaScript.
 *
 * Usage: add the `reveal` class to any block/section, or `reveal-children`
 * to animate its direct children one after another.
 *
 * Effect modifiers: reveal--up (default), reveal--down, reveal--left,
 * reveal--right, reveal--fade, reveal--zoom, reveal--blur.
 * Distance: reveal--near, reveal--far.
 * Speed: reveal--fast, reveal--slow.
 *
 * Built on scroll-driven animations (`animation-timeline: view()`). Browsers
 * without support simply render the content as usual — the whole block is
 * behind @supports, so there is nothing to fall back from.
 */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		.reveal,
		.reveal-children > * {
			--reveal-distance: 90px;
			--reveal-start: 0%;
			--reveal-span: 35%;

			/* Ease-out: the block arrives fast and settles — that reads as
			   a slide-in rather than as content simply tied to the scrollbar.
			   Note: --reveal-span is a share of the element's own height, so
			   very tall sections animate over more scrolling. Override it per
			   block with an inline style (e.g. --reveal-span: 180px) if needed. */
			animation: reveal-in cubic-bezier(.16, .84, .44, 1) both;
			animation-timeline: view();
			animation-range: entry var(--reveal-start)
				entry calc(var(--reveal-start) + var(--reveal-span));
		}

		@keyframes reveal-in {
			from {
				opacity: 0;
				transform: var(--reveal-transform, translate3d(0, var(--reveal-distance), 0));
				filter: var(--reveal-filter, none);
			}
		}

		/* Directions / effects */
		.reveal--up    { --reveal-transform: translate3d(0, var(--reveal-distance), 0); }
		.reveal--down  { --reveal-transform: translate3d(0, calc(var(--reveal-distance) * -1), 0); }
		.reveal--left  { --reveal-transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0); }
		.reveal--right { --reveal-transform: translate3d(var(--reveal-distance), 0, 0); }
		.reveal--fade  { --reveal-transform: none; }
		.reveal--zoom  { --reveal-transform: scale(.92); }
		.reveal--blur  { --reveal-transform: none; --reveal-filter: blur(10px); }

		/* Distance */
		.reveal--near { --reveal-distance: 40px; }
		.reveal--far  { --reveal-distance: 160px; }

		/* Speed — a shorter range means the animation finishes sooner */
		.reveal--fast { --reveal-span: 20%; }
		.reveal--slow { --reveal-span: 60%; }

		/* Stagger: each child starts a little later than the previous one */
		.reveal-children > *:nth-child(2)    { --reveal-start: 8%; }
		.reveal-children > *:nth-child(3)    { --reveal-start: 16%; }
		.reveal-children > *:nth-child(4)    { --reveal-start: 24%; }
		.reveal-children > *:nth-child(n+5)  { --reveal-start: 32%; }

		/* Horizontal moves must not create a page-wide scrollbar */
		.reveal--left,
		.reveal--right {
			overflow-x: clip;
		}
	}
}