.mx-slider-scroll {
	--mx-slider-scroll-fg: #fff;
	--mx-slider-scroll-muted: rgba(255, 255, 255, 0.78);
	position: relative;
	overflow: clip;
	color: var(--mx-slider-scroll-fg);
	font-family: inherit;
}

.mx-slider-scroll *,
.mx-slider-scroll *::before,
.mx-slider-scroll *::after {
	box-sizing: border-box;
}

.mx-slider-scroll__stage {
	position: relative;
	height: calc(var(--mx-slider-scroll-count, 1) * var(--mx-slider-scroll-height, 100vh));
}

.mx-slider-scroll[data-mode="auto"] .mx-slider-scroll__stage {
	height: var(--mx-slider-scroll-height, 100vh);
}

.mx-slider-scroll[data-mode="auto"] .mx-slider-scroll__sticky {
	position: relative;
	top: auto;
}

.mx-slider-scroll__sticky {
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--mx-slider-scroll-height, 100vh);
	min-height: 420px;
	overflow: hidden;
}

.mx-slider-scroll__layers,
.mx-slider-scroll__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mx-slider-scroll__layer {
	display: block;
}

.mx-slider-scroll__source {
	position: absolute;
	top: 0;
	left: -2px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mx-slider-scroll__layer image {
	filter: brightness(0.72);
}

.mx-slider-scroll__texts {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: clamp(28px, 7vw, 108px);
}

.mx-slider-scroll__text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: inherit;
	clip-path: inset(100% 0 0);
	opacity: 0;
	pointer-events: none;
}

.mx-slider-scroll__text.is-active {
	clip-path: inset(0);
	opacity: 1;
	pointer-events: auto;
}

.mx-slider-scroll__content {
	width: min(100%, 900px);
}

.mx-slider-scroll__info {
	margin: 0 0 22px;
	color: var(--mx-slider-scroll-muted);
	font-size: clamp(12px, 1vw, 15px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mx-slider-scroll__title {
	max-width: 12ch;
	margin: 0;
	font-size: clamp(48px, 9vw, 94px);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.055em;
	text-transform: uppercase;
}

.mx-slider-scroll__description {
	max-width: 48ch;
	margin: 28px 0 0;
	color: var(--mx-slider-scroll-muted);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.65;
}

.mx-slider-scroll__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	color: inherit;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.mx-slider-scroll__link:hover,
.mx-slider-scroll__link:focus-visible {
	background: #fff;
	color: #080808;
}

.mx-slider-scroll__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	gap: 10px;
	padding: clamp(20px, 4vw, 48px);
}

.mx-slider-scroll__segment {
	position: relative;
	height: 2px;
	flex: 1;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.32);
}

.mx-slider-scroll__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: #fff;
}

@media (max-width: 767px) {
	.mx-slider-scroll__texts {
		padding: 28px;
	}

	.mx-slider-scroll__description {
		max-width: 36ch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-slider-scroll__link {
		transition: none;
	}
}