/**
 * Scroll reveal animations. Driven by reveal.js on every device.
 *
 * Usage — add to a block via Advanced → Additional CSS class(es):
 *   reveal            the block itself slides in
 *   reveal-children   the parts inside the block slide in one after another
 *   both together     the block slides in and its parts cascade inside it
 *
 * 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.
 *
 * reveal.js adds `reveal-js` to <html> before first paint, so if the script
 * ever fails to load the content simply renders as usual — nothing hides.
 * It also tags the inner parts it animates with `reveal-item`.
 */

/* ---------------------------------------------------------------- tokens */

.reveal,
.reveal-item {
	--reveal-distance: 200px;
	--reveal-duration: .9s;
	--reveal-easing: cubic-bezier(.22, .61, .36, 1);
}

/* 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(12px); }

/* Distance */
.reveal--near { --reveal-distance: 80px; }
.reveal--far  { --reveal-distance: 360px; }

/* Speed */
.reveal--fast { --reveal-duration: .6s; }
.reveal--slow { --reveal-duration: 1.4s; }

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

/* Mobile: a 200px travel is most of a phone screen */
@media (max-width: 767px) {
	.reveal,
	.reveal-item {
		--reveal-distance: 90px;
	}

	.reveal--near { --reveal-distance: 40px; }
	.reveal--far  { --reveal-distance: 150px; }
}

/* ------------------------------------------------------------- animation */

.reveal-js .reveal,
.reveal-js .reveal-item {
	opacity: 0;
	transform: var(--reveal-transform, translate3d(0, var(--reveal-distance), 0));
	filter: var(--reveal-filter, none);
	will-change: opacity, transform;
	transition: opacity var(--reveal-duration) var(--reveal-easing),
		transform var(--reveal-duration) var(--reveal-easing),
		filter var(--reveal-duration) var(--reveal-easing);
	transition-delay: var(--reveal-delay, 0s);
}

.reveal-js .reveal.is-revealed,
.reveal-js .reveal-item.is-revealed {
	opacity: 1;
	transform: none;
	filter: none;
	will-change: auto;
}