/*
 * Reusable appearance and text reveal effects.
 * Add .reveal to an element; optionally add one reveal modifier.
 */

/* Content remains visible when JavaScript is disabled or unavailable. */
.reveal {
	--reveal-x: 0px;
	--reveal-y: 24px;
	--reveal-scale: 1;
	--reveal-blur: 0px;
	--reveal-duration: 700ms;
	--reveal-delay: 0ms;
}

html.gki-effects-ready .reveal:not(.is-visible) {
	opacity: 0;
	transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
	filter: blur(var(--reveal-blur));
	will-change: opacity, transform, filter;
}

.reveal,
.reveal.is-visible,
.reveal.visible {
	transition:
		opacity var(--reveal-duration) ease var(--reveal-delay),
		transform var(--reveal-duration) cubic-bezier(.2, .75, .25, 1) var(--reveal-delay),
		filter var(--reveal-duration) ease var(--reveal-delay);
}

.reveal.is-visible,
.reveal.visible {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Assign one modifier to control how an element enters. */
.reveal--fade {
	--reveal-y: 0px;
}

.reveal--up {
	--reveal-y: 32px;
}

.reveal--down {
	--reveal-y: -32px;
}

.reveal--left {
	--reveal-x: -40px;
	--reveal-y: 0px;
}

.reveal--right {
	--reveal-x: 40px;
	--reveal-y: 0px;
}

.reveal--scale {
	--reveal-y: 0px;
	--reveal-scale: .92;
}

.reveal--blur {
	--reveal-blur: 10px;
}

.reveal--text {
	--reveal-y: .45em;
	--reveal-duration: 600ms;
}

/* Optional timing helpers for grouped elements. */
.reveal--delay-1 { --reveal-delay: 100ms; }
.reveal--delay-2 { --reveal-delay: 200ms; }
.reveal--delay-3 { --reveal-delay: 300ms; }
.reveal--delay-4 { --reveal-delay: 400ms; }
.reveal--slow { --reveal-duration: 1000ms; }
.reveal--fast { --reveal-duration: 400ms; }

@media (prefers-reduced-motion: reduce) {
	html.gki-effects-ready .reveal:not(.is-visible),
	.reveal,
	.reveal.is-visible {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
		will-change: auto;
	}
}