:root {
	--fab-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.fab-motion-smooth-anchors {
	scroll-behavior: smooth;
}

.fab-motion-section {
	--fab-motion-duration: 700ms;
	--fab-motion-delay: 0ms;
	--fab-motion-distance: 36px;
	--fab-motion-scale: 0.98;
	--fab-motion-child-delay: 60ms;
}

.fab-motion-section,
.fab-motion-child {
	opacity: 1;
	transform: none;
}

html.fab-motion-ready .fab-motion-pending {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity var(--fab-motion-duration) var(--fab-motion-ease) var(--fab-motion-delay),
		transform var(--fab-motion-duration) var(--fab-motion-ease) var(--fab-motion-delay);
}

html.fab-motion-ready .fab-motion-pending.fab-motion-preset-fade-up {
	transform: translate3d(0, var(--fab-motion-distance), 0);
}

html.fab-motion-ready .fab-motion-pending.fab-motion-preset-reveal-left {
	transform: translate3d(calc(var(--fab-motion-distance) * -1), 0, 0);
}

html.fab-motion-ready .fab-motion-pending.fab-motion-preset-reveal-right {
	transform: translate3d(var(--fab-motion-distance), 0, 0);
}

html.fab-motion-ready .fab-motion-pending.fab-motion-preset-soft-scale {
	transform: scale(var(--fab-motion-scale));
}

html.fab-motion-ready .fab-motion-pending.fab-motion-preset-stagger {
	transform: translate3d(0, calc(var(--fab-motion-distance) * .55), 0);
}

html.fab-motion-ready .fab-motion-pending.fab-motion-preset-opacity,
html.fab-motion-ready .fab-motion-pending.fab-motion-preset-fade-in,
html.fab-motion-ready .fab-motion-safe {
	transform: none;
}

html.fab-motion-ready .fab-motion-child {
	transition:
		opacity var(--fab-motion-duration) var(--fab-motion-ease),
		transform var(--fab-motion-duration) var(--fab-motion-ease);
	transition-delay: calc(var(--fab-motion-delay) + (var(--fab-motion-index, 0) * var(--fab-motion-child-delay)));
}

html.fab-motion-ready .fab-motion-pending .fab-motion-child {
	opacity: 0;
	transform: translate3d(0, calc(var(--fab-motion-distance) * .45), 0);
}

html.fab-motion-ready .fab-motion-revealed,
html.fab-motion-ready .fab-motion-revealed .fab-motion-child {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (max-width: 1024px) {
	.fab-motion-section {
		--fab-motion-distance: var(--fab-motion-distance-tablet, 28px);
	}
}

@media (max-width: 767px) {
	.fab-motion-section {
		--fab-motion-distance: var(--fab-motion-distance-mobile, 20px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.fab-motion-ready .fab-motion-pending,
	html.fab-motion-ready .fab-motion-child {
		opacity: 1;
		transform: none;
		transition-duration: 1ms;
		transition-delay: 0ms;
	}
}