:root {
	--vpoc-animate-distance: 40px;
	--vpoc-animate-duration: 0.6s;
	--vpoc-animate-easing: ease;
}

/**
 * Scroll-triggered animation base classes.
 *
 * Add any of these classes to a block via Advanced → Additional CSS class(es):
 *   .fade-in
 *   .slide-in-left
 *   .slide-in-right
 *   .slide-in-up
 *   .slide-in-down
 *
 * Elements start hidden/inset and animate in once they scroll into view.
 * The JS adds the .is-visible class when the element enters the viewport.
 *
 * Optional data attributes & classes to customize the animation:
* Data attribute | `data-animate-delay="200"` | Delay the animation by 200ms |
* Data attribute | `data-animate-distance="60"` | Override the slide distance (pixels) |
* Class name | `animate-delay-200` | Delay the animation by 200ms |
* Class name | `animate-distance-60` | Override the slide distance (pixels) |
 */

.fade-in,
.is-style-fade-in,
.slide-in-left,
.is-style-slide-in-left,
.slide-in-right,
.is-style-slide-in-right,
.slide-in-up,
.is-style-slide-in-up,
.slide-in-down,
.is-style-slide-in-down {
	opacity: 0;
	transition:
		opacity var(--vpoc-animate-duration) var(--vpoc-animate-easing),
		transform var(--vpoc-animate-duration) var(--vpoc-animate-easing);
}

.fade-in,
.is-style-fade-in {
	transform: none;
}

.slide-in-left,
.is-style-slide-in-left {
	transform: translateX(calc(var(--vpoc-animate-distance) * -1));
}

.slide-in-right,
.is-style-slide-in-right {
	transform: translateX(var(--vpoc-animate-distance));
}

.slide-in-up,
.is-style-slide-in-up {
	transform: translateY(var(--vpoc-animate-distance));
}

.slide-in-down,
.is-style-slide-in-down {
	transform: translateY(calc(var(--vpoc-animate-distance) * -1));
}

.fade-in.is-visible,
.is-style-fade-in.is-visible,
.slide-in-left.is-visible,
.is-style-slide-in-left.is-visible,
.slide-in-right.is-visible,
.is-style-slide-in-right.is-visible,
.slide-in-up.is-visible,
.is-style-slide-in-up.is-visible, 
.slide-in-down.is-visible,
.is-style-slide-in-down.is-visible {
	opacity: 1;
	transform: translate(0, 0);
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.fade-in,
	.is-style-fade-in,
	.slide-in-left,
	.is-style-slide-in-left,
	.slide-in-right,
	.is-style-slide-in-right,
	.slide-in-up,
	.is-style-slide-in-up,
	.slide-in-down,
	.is-style-slide-in-down {
		transition: none;
		opacity: 1;
		transform: none;
	}
}