.mouj-slider--3d {
	--mouj3d-glow-a: #00c8ff;
	--mouj3d-glow-b: #7657ff;
	--mouj3d-particle: #ff8a3d;
	--mouj3d-rx: 0deg;
	--mouj3d-ry: 0deg;
	--mouj3d-light-x: 50%;
	--mouj3d-light-y: 42%;
	--mouj3d-button-x: 0px;
	--mouj3d-button-y: 0px;
	--mouj3d-progress-duration: 6500ms;
	--mouj3d-arrow-prev-shift: 0px;
	--mouj3d-arrow-next-shift: 0px;
	--mouj3d-arrow-prev-gutter: max(18px, calc((100% - 1360px) / 2 - 108px + var(--mouj3d-arrow-prev-shift)));
	--mouj3d-arrow-next-gutter: max(18px, calc((100% - 1360px) / 2 - 108px + var(--mouj3d-arrow-next-shift)));

	background: var(--mouj-bg);
	perspective: 1400px;
}

.mouj-slider--3d::before {
	display: none;
}

.mouj-slider--3d::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: none;
	pointer-events: none;
	transition: background-position .25s ease;
}

.mouj-slider--3d .mouj-slider__track {
	z-index: 2;
}

.mouj-slider--3d .mouj-slider__wave {
	display: none !important;
}

.mouj3d__scene {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.mouj3d__aurora {
	position: absolute;
	width: 34vw;
	height: 34vw;
	min-width: 360px;
	min-height: 360px;
	border-radius: 50%;
	display: none;
	opacity: .2;
	filter: blur(74px);
	will-change: transform;
}

.mouj3d__aurora--a {
	left: -7%;
	top: 3%;
	background: var(--mouj3d-glow-a);
	animation: mouj3d-aurora-a 9s ease-in-out infinite alternate;
}

.mouj3d__aurora--b {
	right: 23%;
	bottom: -28%;
	background: var(--mouj3d-glow-b);
	opacity: .17;
	animation: mouj3d-aurora-b 11s ease-in-out infinite alternate;
}

.mouj3d__grid {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -35%;
	height: 68%;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 54px 54px;
	opacity: .23;
	transform: perspective(650px) rotateX(69deg) rotateZ(-5deg);
	transform-origin: center top;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, #000 100%);
}

.mouj3d__grain {
	display: none !important;
}

.mouj3d__orbit,
.mouj3d__ring {
	display: none !important;
}

.mouj3d__particle {
	position: absolute;
	left: var(--particle-x);
	top: var(--particle-y);
	width: var(--particle-size);
	height: var(--particle-size);
	border-radius: 50%;
	background: var(--mouj3d-particle);
	box-shadow: 0 0 8px var(--mouj3d-particle), 0 0 18px var(--mouj3d-particle);
	opacity: 0;
	animation: mouj3d-particle var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.mouj3d-density--subtle .mouj3d__scene {
	opacity: .68;
}

.mouj3d-density--intense .mouj3d__scene {
	opacity: 1;
}

.mouj3d-density--intense .mouj3d__aurora {
	opacity: .28;
}

.mouj-slider--3d .mouj-slider__visual {
	position: relative;
	transform-style: preserve-3d;
}

.mouj3d__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 390px;
	transform-style: preserve-3d;
	transform: perspective(1150px) rotateX(var(--mouj3d-rx)) rotateY(var(--mouj3d-ry)) translate3d(0, 0, 42px);
	transition: transform .22s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
	will-change: transform;
}

.mouj3d__stage::before {
	content: "";
	position: absolute;
	z-index: -2;
	width: 75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 200, 255, .31), rgba(118, 87, 255, .1) 42%, transparent 69%);
	filter: blur(16px);
	transform: translateZ(-80px) scale(.94);
	animation: mouj3d-halo 4.8s ease-in-out infinite alternate;
}

.mouj3d__stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 18%;
	right: 18%;
	bottom: 5%;
	height: 12%;
	border-radius: 50%;
	background: rgba(0, 8, 28, .46);
	filter: blur(17px);
	transform: translateZ(-45px) rotateX(72deg);
	transition: transform .25s ease, opacity .25s ease;
}

.mouj-slider--3d .mouj-slider__image {
	position: relative;
	z-index: 2;
	grid-area: 1 / 1;
	filter: drop-shadow(-5px 27px 31px rgba(0, 10, 38, .34)) drop-shadow(0 0 22px rgba(0, 200, 255, .1));
}

.mouj-slider--3d.has-floating .mouj-slider__slide.is-active .mouj3d__stage {
	animation: mouj3d-float 5.2s ease-in-out infinite;
}

.mouj-slider--3d .mouj-slider__slide.is-leaving .mouj3d__stage {
	animation: mouj3d-stage-out calc(var(--mouj-duration) * .52) cubic-bezier(.4, 0, .2, 1) both !important;
}

.mouj-slider--3d .mouj-slider__content {
	transform-style: preserve-3d;
}

.mouj-slider--3d .mouj-slider__eyebrow {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .3);
	background: linear-gradient(135deg, var(--mouj-accent), #ff8d45);
	box-shadow: 0 12px 30px rgba(255, 107, 61, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
	transform: translateZ(26px);
}

.mouj-slider--3d .mouj-slider__eyebrow::after {
	content: "";
	position: absolute;
	top: -70%;
	bottom: -70%;
	left: -45%;
	width: 28%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
	transform: rotate(17deg);
	animation: mouj3d-shimmer 4.4s ease-in-out infinite;
}

.mouj-slider--3d .mouj-slider__title {
	text-shadow: 0 8px 28px rgba(0, 8, 35, .28), 0 0 34px rgba(0, 200, 255, .07);
}

.mouj-slider--3d .mouj-slider__button {
	border-color: rgba(255, 255, 255, .34);
	background: linear-gradient(135deg, var(--mouj-accent), #ff8d45);
	color: #fff;
	box-shadow: 0 14px 32px rgba(255, 107, 61, .2), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.mouj-slider--3d .mouj-slider__button:hover {
	color: #fff;
	box-shadow: 0 18px 42px rgba(255, 107, 61, .3), 0 0 24px rgba(255, 138, 61, .12), inset 0 1px 0 rgba(255, 255, 255, .32);
}

.mouj3d__button-stage {
	display: inline-flex;
	align-self: var(--mouj-align);
	justify-self: var(--mouj-align);
	transform: translate3d(var(--mouj3d-button-x), var(--mouj3d-button-y), 28px);
	transition: transform .22s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.mouj-slider--3d .mouj-slider__arrow {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	z-index: 9 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50% !important;
	background: rgba(5, 25, 58, .32);
	box-shadow: 0 14px 34px rgba(0, 8, 32, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
	backdrop-filter: blur(12px);
	transform: translateY(-50%) !important;
}

.mouj-slider--3d .mouj-slider__arrow:hover {
	border-color: rgba(0, 200, 255, .35);
	background: rgba(5, 25, 58, .58);
	box-shadow: 0 0 24px rgba(0, 200, 255, .12);
	transform: translateY(-50%) scale(1.04) !important;
}

.mouj-slider--3d .mouj-slider__arrow:active {
	transform: translateY(-50%) scale(.94) !important;
}

.mouj-slider--3d .mouj-slider__arrow--prev {
	left: var(--mouj3d-arrow-prev-gutter) !important;
	right: auto !important;
}

.mouj-slider--3d .mouj-slider__arrow--next {
	right: var(--mouj3d-arrow-next-gutter) !important;
	left: auto !important;
}

.mouj-slider--3d .mouj-slider__dots {
	bottom: 36px;
}

.mouj-slider--3d .mouj-slider__dot {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 8px !important;
	height: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 0 !important;
	line-height: 0 !important;
	transform: none !important;
	background: var(--mouj-nav) !important;
	opacity: .36 !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, .12) !important;
	transition: width .3s var(--mouj-ease), opacity .3s ease !important;
}

.mouj-slider--3d .mouj-slider__dot.is-active {
	width: 26px !important;
	height: 8px !important;
	background: linear-gradient(90deg, var(--mouj3d-glow-a), var(--mouj3d-particle)) !important;
	opacity: .92 !important;
	box-shadow: 0 0 16px rgba(0, 200, 255, .22) !important;
}

.mouj3d__progress {
	position: absolute;
	z-index: 8;
	right: 50%;
	bottom: 19px;
	width: min(280px, 28vw);
	height: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .13);
	transform: translateX(50%);
	pointer-events: none;
}

.mouj3d__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--mouj3d-glow-a), var(--mouj3d-particle));
	box-shadow: 0 0 12px rgba(0, 200, 255, .45);
	transform: scaleX(0);
	transform-origin: right center;
}

.mouj3d__progress.is-running .mouj3d__progress-bar {
	animation: mouj3d-progress var(--mouj3d-progress-duration) linear both;
}

.mouj-slider--3d.is-progress-suspended .mouj3d__progress-bar {
	animation-play-state: paused;
}

@keyframes mouj3d-float {
	0%, 100% {
		transform: perspective(1150px) rotateX(var(--mouj3d-rx)) rotateY(var(--mouj3d-ry)) translate3d(0, 0, 42px);
	}
	50% {
		transform: perspective(1150px) rotateX(calc(var(--mouj3d-rx) + .7deg)) rotateY(calc(var(--mouj3d-ry) + .6deg)) translate3d(0, 8px, 55px);
	}
}

@keyframes mouj3d-stage-out {
	0% {
		opacity: 1;
		filter: blur(0);
		transform: perspective(1150px) rotateX(var(--mouj3d-rx)) rotateY(var(--mouj3d-ry)) translate3d(0, 0, 42px) scale(1);
	}
	100% {
		opacity: 0;
		filter: blur(2px);
		transform: perspective(1150px) rotateX(-2deg) rotateY(5deg) translate3d(-28px, 8px, -55px) scale(.96);
	}
}

@keyframes mouj3d-halo {
	from { opacity: .58; transform: translateZ(-80px) scale(.9); }
	to { opacity: .95; transform: translateZ(-80px) scale(1.06); }
}

@keyframes mouj3d-aurora-a {
	from { transform: translate3d(-4%, -3%, 0) scale(.92); }
	to { transform: translate3d(13%, 8%, 0) scale(1.08); }
}

@keyframes mouj3d-aurora-b {
	from { transform: translate3d(4%, 5%, 0) scale(.9); }
	to { transform: translate3d(-11%, -8%, 0) scale(1.12); }
}

@keyframes mouj3d-particle {
	0%, 100% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.45); }
	28% { opacity: .75; }
	62% { opacity: .35; transform: translate3d(12px, -28px, 0) scale(1); }
	82% { opacity: 0; transform: translate3d(-8px, -48px, 0) scale(.68); }
}

@keyframes mouj3d-shimmer {
	0%, 56% { left: -45%; opacity: 0; }
	68% { opacity: .7; }
	86%, 100% { left: 125%; opacity: 0; }
}

@keyframes mouj3d-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (max-width: 1024px) {
	.mouj3d__stage {
		min-height: 330px;
	}

	.mouj3d__progress {
		width: min(240px, 30vw);
	}
}

@media (max-width: 767px) {
	.mouj-slider--3d {
		background: var(--mouj-bg);
	}

	.mouj3d__grid {
		bottom: -23%;
		height: 50%;
		background-size: 38px 38px;
		opacity: .15;
	}

	.mouj3d__aurora {
		width: 76vw;
		height: 76vw;
		min-width: 0;
		min-height: 0;
		filter: blur(52px);
	}

	.mouj3d__aurora--a { left: -27%; top: 21%; }
	.mouj3d__aurora--b { right: -19%; bottom: 1%; }

	.mouj3d__particle:nth-of-type(n + 8) {
		display: none;
	}

	.mouj3d__stage {
		min-height: 205px;
		transform: perspective(900px) translate3d(0, 0, 24px);
	}

	.mouj-slider--3d .mouj-slider__image {
		filter: drop-shadow(0 20px 24px rgba(0, 10, 38, .32)) drop-shadow(0 0 18px rgba(0, 200, 255, .1));
	}

	.mouj-slider--3d .mouj-slider__arrow {
		top: auto !important;
		bottom: 13px !important;
		width: 38px !important;
		height: 38px !important;
		transform: none !important;
	}

	.mouj-slider--3d .mouj-slider__arrow:hover {
		transform: scale(1.04) !important;
	}

	.mouj-slider--3d .mouj-slider__arrow:active {
		transform: scale(.94) !important;
	}

	.mouj-slider--3d .mouj-slider__arrow--prev {
		left: max(8px, calc(17px + var(--mouj3d-arrow-prev-shift))) !important;
		right: auto !important;
	}

	.mouj-slider--3d .mouj-slider__arrow--next {
		right: max(8px, calc(17px + var(--mouj3d-arrow-next-shift))) !important;
		left: auto !important;
	}

	.mouj3d__button-stage {
		grid-column: 1;
		grid-row: 5;
		justify-self: var(--mouj-align);
	}

	.mouj3d__button-stage .mouj-slider__button {
		grid-column: auto;
		grid-row: auto;
	}

	.mouj-slider--3d .mouj-slider__dots {
		bottom: 29px;
	}

	.mouj3d__progress {
		bottom: 17px;
		width: 150px;
	}
}

@media (hover: none), (pointer: coarse) {
	.mouj-slider--3d.has-depth .mouj3d__stage {
		--mouj3d-rx: 0deg;
		--mouj3d-ry: 0deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mouj-slider--3d *,
	.mouj-slider--3d *::before,
	.mouj-slider--3d *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.mouj-slider--3d .mouj3d__stage,
	.mouj3d__button-stage {
		transform: none !important;
	}
}
