:root {
	--slpm-ease: cubic-bezier(.22, 1, .36, 1);
	--slpm-red: var(--slp-red, #981f25);
}

.slpm-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 3px;
	background: var(--slpm-red);
	pointer-events: none;
	transform: scaleX(var(--slpm-progress, 0));
	transform-origin: left center;
	will-change: transform;
}

.slp-motion-active .slpm-reveal {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 760ms var(--slpm-ease) var(--slpm-delay, 0ms), transform 760ms var(--slpm-ease) var(--slpm-delay, 0ms);
}

.slp-motion-active .slpm-reveal--left { transform: translate3d(-34px, 0, 0); }
.slp-motion-active .slpm-reveal--scale { transform: scale(.965); }
.slp-motion-active .slpm-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.slp-motion-ready .slp-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 760ms var(--slpm-ease) var(--slp-delay, 0ms), transform 760ms var(--slpm-ease) var(--slp-delay, 0ms);
}

.slp-motion-ready .slp-reveal.is-visible { opacity: 1; transform: translateY(0); }

.slpm-line-reveal { position: relative; }
.slpm-line-reveal::after {
	display: block;
	width: min(84px, 18vw);
	height: 1px;
	margin-top: 22px;
	background: currentColor;
	content: "";
	opacity: .3;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 900ms var(--slpm-ease) calc(var(--slpm-delay, 0ms) + 180ms);
}

.slpm-line-reveal.is-visible::after,
.is-visible .slpm-line-reveal::after { transform: scaleX(1); }

.slp-kicker::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 640ms var(--slpm-ease) calc(var(--slp-delay, 0ms) + 120ms);
}

.slp-kicker.is-visible::before,
.is-visible .slp-kicker::before { transform: scaleX(1); }

.slpm-media { overflow: hidden; }
.slp-motion-active .slpm-media > img,
.slp-motion-active img.slpm-media {
	filter: saturate(.86);
	transform: scale(1.035);
	transition: filter 1100ms ease, transform 1100ms var(--slpm-ease);
}

.slp-motion-active .slpm-media.is-visible > img,
.slp-motion-active img.slpm-media.is-visible { filter: saturate(1); transform: scale(1); }

.slpm-card { transition: box-shadow 360ms ease, transform 360ms var(--slpm-ease), border-color 360ms ease !important; }
.slpm-link-arrow span:last-child,
.slpm-link-arrow::after { transition: transform 260ms var(--slpm-ease); }

.slpm-section-mark { position: relative; }
.slpm-section-mark::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--slpm-red);
	content: "";
	transition: width 900ms var(--slpm-ease);
}

.slpm-section-mark.is-visible::before { width: min(72px, 18vw); }
.slpm-hero-sequence > * { transition-delay: var(--slpm-delay, 0ms) !important; }
.slp-hero::before { animation: slpm-hero-wash 11s ease-in-out infinite; }
.slp-hero__grain { animation: slpm-grain 12s steps(2, end) infinite; }
.slp-scroll-cue i { animation: slpm-scroll-line 2.3s ease-in-out infinite; transform-origin: top center; }
.slp-founder__monogram::before { animation: slpm-orbit 24s linear infinite; }
.slp-cta__word { animation: slpm-drift 8s ease-in-out infinite; }
.slpm-scrolled #masthead { box-shadow: 0 10px 30px rgba(17,17,15,.07); }
details[open] > *:not(summary) { animation: slpm-details-in 360ms var(--slpm-ease) both; }

@media (hover: hover) and (pointer: fine) {
	.slpm-card:hover { box-shadow: 0 24px 58px rgba(23,23,21,.11) !important; transform: translateY(-7px); }
	.slpm-link-arrow:hover span:last-child,
	.slpm-link-arrow:hover::after { transform: translateX(5px); }
	.slp-button:hover { box-shadow: 0 12px 28px rgba(23,23,21,.13); }
}

@keyframes slpm-hero-wash { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes slpm-grain { 0%, 100% { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(.65%, -.5%, 0); } 70% { transform: translate3d(-.5%, .65%, 0); } }
@keyframes slpm-scroll-line { 0% { opacity: .25; transform: scaleY(.2); } 45% { opacity: 1; transform: scaleY(1); } 100% { opacity: .12; transform: scaleY(1); transform-origin: bottom center; } }
@keyframes slpm-orbit { to { transform: rotate(360deg); } }
@keyframes slpm-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-.02em, -.025em, 0); } }
@keyframes slpm-details-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	.slp-motion-ready .slp-reveal,
	.slp-motion-active .slpm-reveal,
	.slp-motion-active .slpm-media > img,
	.slp-motion-active img.slpm-media { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
	.slp-kicker::before,
	.slpm-line-reveal::after,
	.slpm-section-mark::before { transform: none !important; transition: none !important; }
	.slp-hero::before,
	.slp-hero__grain,
	.slp-scroll-cue i,
	.slp-founder__monogram::before,
	.slp-cta__word,
	details[open] > *:not(summary) { animation: none !important; }
}