/*
 * Scrolla Blocks — animation presets.
 * BEM: .scrolla-anim block, .scrolla-anim--{style} modifiers.
 *
 * Timing is overridable per block via custom properties set inline by the
 * render filter: --scrolla-duration (default 700ms), --scrolla-delay (0ms).
 */

.scrolla-anim--fade-up {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity var(--scrolla-duration, 700ms) cubic-bezier(0.16, 1, 0.3, 1),
		transform var(--scrolla-duration, 700ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.scrolla-anim--fade-up.scrolla-animated {
	opacity: 1;
	transform: none;
}

.scrolla-anim--fade-in {
	opacity: 0;
	transition: opacity var(--scrolla-duration, 700ms) ease;
}

.scrolla-anim--fade-in.scrolla-animated {
	opacity: 1;
}

.scrolla-anim--slide-left {
	opacity: 0;
	transform: translateX(-50px);
	transition:
		opacity var(--scrolla-duration, 700ms) ease,
		transform var(--scrolla-duration, 700ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.scrolla-anim--slide-left.scrolla-animated {
	opacity: 1;
	transform: none;
}

.scrolla-anim--slide-right {
	opacity: 0;
	transform: translateX(50px);
	transition:
		opacity var(--scrolla-duration, 700ms) ease,
		transform var(--scrolla-duration, 700ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.scrolla-anim--slide-right.scrolla-animated {
	opacity: 1;
	transform: none;
}

.scrolla-anim--scale-in {
	opacity: 0;
	transform: scale(0.88);
	transition:
		opacity var(--scrolla-duration, 700ms) ease,
		transform var(--scrolla-duration, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scrolla-anim--scale-in.scrolla-animated {
	opacity: 1;
	transform: none;
}

.scrolla-anim--clip-reveal {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--scrolla-duration, 850ms) cubic-bezier(0.77, 0, 0.175, 1);
}

.scrolla-anim--clip-reveal.scrolla-animated {
	clip-path: inset(0 0% 0 0);
}

/*
 * Base rule last: transition shorthands above reset transition-delay,
 * so the per-block delay must cascade after every modifier.
 */
.scrolla-anim {
	transition-delay: var(--scrolla-delay, 0ms);
}

/*
 * Reduced motion: the library reveals content immediately; this makes sure
 * that reveal doesn't itself animate.
 */
@media (prefers-reduced-motion: reduce) {

	.scrolla-anim,
	[data-scrolla] {
		transition: none !important;
	}
}