/*
Maudimi Motion Studio front-end.
All content stays visible without JS. Hidden reveal states only apply after JS is ready.
*/

body.maudimi-motion-active {
	--maudimi-motion-distance: 20px;
	--maudimi-motion-scale: 0.975;
	--maudimi-motion-blur: 8px;
	--maudimi-motion-duration: 720ms;
	--maudimi-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.maudimi-motion-level-soft {
	--maudimi-motion-distance: 12px;
	--maudimi-motion-scale: 0.99;
	--maudimi-motion-blur: 0px;
	--maudimi-motion-duration: 520ms;
}

body.maudimi-motion-level-immersive,
body.maudimi-motion-level-cinematic {
	--maudimi-motion-distance: 24px;
	--maudimi-motion-scale: 0.965;
	--maudimi-motion-blur: 10px;
	--maudimi-motion-duration: 860ms;
}

html.maudimi-motion-js body.maudimi-motion-active .maudimi-reveal {
	opacity: 0;
	transform: translate3d(0, var(--maudimi-motion-distance), 0) scale(var(--maudimi-motion-scale));
	filter: blur(var(--maudimi-motion-blur));
	transition:
		opacity var(--maudimi-motion-duration) var(--maudimi-motion-ease),
		transform var(--maudimi-motion-duration) var(--maudimi-motion-ease),
		filter var(--maudimi-motion-duration) var(--maudimi-motion-ease);
	will-change: opacity, transform, filter;
}

html.maudimi-motion-js body.maudimi-motion-active .maudimi-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
}

body.maudimi-motion-active .maudimi-card-motion {
	--maudimi-motion-x: 50%;
	--maudimi-motion-y: 20%;
	--maudimi-motion-rx: 0deg;
	--maudimi-motion-ry: 0deg;
	transition:
		transform 360ms var(--maudimi-motion-ease),
		box-shadow 360ms ease,
		border-color 260ms ease,
		filter 360ms ease;
	transform: perspective(1000px) rotateX(var(--maudimi-motion-rx)) rotateY(var(--maudimi-motion-ry)) translateY(0);
}

body.maudimi-motion-active .maudimi-card-motion::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: radial-gradient(circle at var(--maudimi-motion-x) var(--maudimi-motion-y), rgba(255, 217, 133, 0.2), transparent 16rem);
	opacity: 0;
	pointer-events: none;
	content: "";
	transition: opacity 260ms ease;
}

body.maudimi-motion-active .maudimi-card-motion.is-motion-hovered::before,
body.maudimi-motion-active .maudimi-card-motion:hover::before {
	opacity: 1;
}

body.maudimi-motion-active .maudimi-card-motion.is-motion-hovered,
body.maudimi-motion-active .maudimi-card-motion:hover,
body.maudimi-motion-active .maudimi-card-motion:focus-visible {
	border-color: rgba(255, 217, 133, 0.56) !important;
	filter: saturate(1.05);
	transform: perspective(1000px) rotateX(var(--maudimi-motion-rx)) rotateY(var(--maudimi-motion-ry)) translateY(-5px);
}

body.maudimi-motion-active .maudimi-cta-motion {
	position: relative;
	overflow: hidden;
}

body.maudimi-motion-active .maudimi-cta-motion::after {
	position: absolute;
	inset: -80% -40%;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.34), transparent 70%);
	content: "";
	transform: translateX(-80%) rotate(8deg);
	transition: transform 650ms var(--maudimi-motion-ease);
}

body.maudimi-motion-active .maudimi-cta-motion:hover::after,
body.maudimi-motion-active .maudimi-cta-motion:focus-visible::after {
	transform: translateX(80%) rotate(8deg);
}

body.maudimi-motion-active .maudimi-depth {
	transform: translate3d(0, var(--maudimi-depth-y, 0), 0);
	transition: transform 180ms linear;
	will-change: transform;
}

body.maudimi-motion-active.maudimi-motion-mechanical .maudimi-mechanical::before {
	animation: maudimi-mechanical-drift 28s linear infinite;
}

@keyframes maudimi-mechanical-drift {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

body.maudimi-motion-active.maudimi-motion-amber-glow .maudimi-glow,
body.maudimi-motion-active.maudimi-motion-amber-glow .wp-block-button__link {
	box-shadow: 0 18px 52px rgba(255, 217, 133, 0.18), 0 0 0 1px rgba(255, 217, 133, 0.08);
}

body.maudimi-motion-active.maudimi-motion-light-dust.maudimi-motion-level-cinematic::before,
body.maudimi-motion-active.maudimi-motion-light-dust.maudimi-motion-level-immersive::before {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(255, 217, 133, 0.2) 0 1px, transparent 1.5px),
		radial-gradient(circle, rgba(255, 248, 234, 0.16) 0 1px, transparent 1.5px);
	background-position: 0 0, 42px 72px;
	background-size: 180px 220px, 260px 300px;
	content: "";
	opacity: 0.12;
	animation: maudimi-dust-drift 36s linear infinite;
}

@keyframes maudimi-dust-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, -80px, 0); }
}

body.maudimi-motion-active.maudimi-motion-building-sequence .maudimi-threshold-doors .maudimi-editorial-door {
	transition-delay: calc(var(--maudimi-door-index, 0) * 90ms);
}

body.maudimi-motion-active.maudimi-motion-building-sequence .maudimi-building-sequence.is-threshold-open + .maudimi-threshold-doors .maudimi-editorial-door {
	opacity: 1;
	transform: translateY(0) scale(1);
}

body.maudimi-motion-reduced .maudimi-reveal,
body.maudimi-motion-off .maudimi-reveal {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

@media (max-width: 782px) {
	body.maudimi-motion-active {
		--maudimi-motion-distance: 14px;
		--maudimi-motion-blur: 0px;
	}

	body.maudimi-motion-active .maudimi-depth {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	body.maudimi-motion-active .maudimi-reveal,
	body.maudimi-motion-active .maudimi-card-motion,
	body.maudimi-motion-active .maudimi-depth {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}
