/******/
/*** MOTION + STICKY CONTENT ***/
/******/

.js-scroll {
	opacity: 0;
	will-change: opacity, transform;
}

.js-scroll.fade-in-top.scrolled {
	animation: tilted-chair-fade-in-top 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-scroll.fade-in.scrolled {
	animation: tilted-chair-fade-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-scroll.fade-in-bottom.scrolled {
	animation: tilted-chair-fade-in-bottom 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-scroll.wipe-and-zoom {
	-webkit-clip-path: inset(100% 0 0 0);
	clip-path: inset(100% 0 0 0);
	-webkit-transform: translate3d(0, 0, 0) scale(1.04);
	transform: translate3d(0, 0, 0) scale(1.04);
	overflow: clip;
}

.js-scroll.wipe-and-zoom.scrolled {
	-webkit-animation: tilted-chair-wipe-and-zoom 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms) both;
	animation: tilted-chair-wipe-and-zoom 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms) both;
}

.js-scroll.scrolled-complete {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.js-scroll.scrolled.scrolled-complete {
	-webkit-animation: none;
	animation: none;
}

.js-scroll.wipe-and-zoom.scrolled-complete {
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
}

@keyframes tilted-chair-fade-in-top {
	from {
		opacity: 0;
		transform: translate3d(0, -1.5rem, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes tilted-chair-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes tilted-chair-fade-in-bottom {
	from {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes tilted-chair-wipe-and-zoom {
	from {
		-webkit-clip-path: inset(100% 0 0 0);
		clip-path: inset(100% 0 0 0);
		-webkit-transform: translate3d(0, 0, 0) scale(1.04);
		transform: translate3d(0, 0, 0) scale(1.04);
		opacity: 0;
	}

	to {
		-webkit-clip-path: inset(0);
		clip-path: inset(0);
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

@keyframes tilted-chair-wipe-and-zoom {
	from {
		-webkit-clip-path: inset(100% 0 0 0);
		clip-path: inset(100% 0 0 0);
		-webkit-transform: translate3d(0, 0, 0) scale(1.04);
		transform: translate3d(0, 0, 0) scale(1.04);
		opacity: 0;
	}

	to {
		-webkit-clip-path: inset(0);
		clip-path: inset(0);
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

[data-split-lines] h1,
[data-split-lines] h2,
[data-split-lines] h3,
[data-split-lines] h4,
[data-split-lines] h5,
[data-split-lines] h6,
[data-split-lines] p,
[data-split-lines] li,
[data-split-lines] blockquote,
h1[data-split-lines],
h2[data-split-lines],
h3[data-split-lines],
h4[data-split-lines],
h5[data-split-lines],
h6[data-split-lines],
p[data-split-lines],
li[data-split-lines],
blockquote[data-split-lines] {
	font-kerning: none;
}

.split-line-mask {
	display: block;
	width: 100%;
	overflow: hidden;
}

.split-line {
	display: block !important;
	width: 100%;
	text-align: inherit !important;
	will-change: transform, opacity;
}

@media screen and (min-width: 48rem) {
	.sticky-aside {
		--offset: var(--gap-32, 2rem);
		position: sticky;
		top: var(--offset);
		align-self: start;
		flex-grow: 1;
	}
}

@media (prefers-reduced-motion: reduce), print {
	.js-scroll,
	.js-scroll.fade-in.scrolled,
	.js-scroll.fade-in-bottom.scrolled,
	.js-scroll.fade-in-top.scrolled,
	.js-scroll.wipe-and-zoom,
	.js-scroll.wipe-and-zoom.scrolled {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
		-webkit-clip-path: none;
		clip-path: none;
		-webkit-animation: none;
		animation: none;
		transition: none;
		will-change: auto;
	}

	.split-line {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}