/**
 * Mirador Suite: Motion.
 *
 * Colours come from the theme's custom properties, with fallbacks so the
 * effects still read with any palette.
 *
 * @package Mirador_Suite
 */

:root {
	--mm-accent: var(--md-accent, #b97f4d);
	--mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Horizontal scroll track ---------- */

.mm-track.is-active {
	position: relative;
	display: block !important;
	padding: 0 !important;
	overflow: visible !important;
}

.mm-track.is-active > .e-con-inner {
	display: block !important;
	max-width: none !important;
	width: 100% !important;
	height: 100%;
	padding: 0 !important;
}

.mm-track__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.mm-track__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	height: 100%;
	width: max-content;
	will-change: transform;
}

/* The script sets each panel's width from Elementor's Width control. */
.mm-track__row > .mm-panel {
	position: relative;
	flex: 0 0 auto;
	width: 100vw;
	max-width: none !important;
	height: 100%;
	min-height: 0 !important;
	margin: 0 !important;
}

/*
 * In the Elementor editor the panels of a sideways section are stacked one
 * under the other at full width, like on a phone, so each one can be edited
 * on its own. A note above the section says how it moves on the live site.
 * Reorder panels by dragging them in the Structure panel.
 */
.elementor-editor-active .mm-hscroll-yes > .e-con-inner,
.elementor-editor-active .e-con.mm-hscroll-yes:not(:has(> .e-con-inner)) {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

.elementor-editor-active .mm-hscroll-yes > .e-con-inner > .e-con,
.elementor-editor-active .e-con.mm-hscroll-yes > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	--width: 100% !important;
	min-height: 70vh;
}

.elementor-editor-active .e-con.mm-hscroll-yes::before {
	content: "Sideways scroll section. On computers these panels sit side by side and slide left as visitors scroll. Here they are stacked so you can edit each one. Change their order by dragging them in the Structure panel.";
	display: block;
	padding: 12px 18px;
	background: #1d2327;
	color: #fff;
	font: 500 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

@media (max-width: 1024px) {
	[data-mm-hscroll] > .e-con-inner,
	.e-con[data-mm-hscroll] {
		flex-direction: column !important;
	}

	[data-mm-hscroll] > .e-con-inner > .e-con,
	.e-con[data-mm-hscroll] > .e-con {
		width: 100% !important;
		--width: 100% !important;
	}
}

/* ---------- Layers ---------- */

[data-mm-speed] {
	will-change: transform;
}

/* ---------- Image reveal ---------- */

.mm-reveal {
	position: relative;
	overflow: hidden;
}

.mm-reveal img {
	transition: opacity 1.1s var(--mm-ease) 0.35s, filter 1.4s var(--mm-ease) 0.35s;
}

.mm-reveal:not(.is-in) img {
	opacity: 0.25;
	filter: grayscale(1) contrast(0.8);
}

.mm-reveal--curtain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--mm-curtain, var(--mm-accent));
	transform-origin: left center;
	transition: transform 1.05s var(--mm-ease) 0.15s;
	pointer-events: none;
}

.mm-reveal--curtain.is-in::after {
	transform: scaleX(0);
}

/* ---------- Inner drift ---------- */

.mm-drift {
	overflow: hidden;
}

.mm-drift img {
	display: block;
	transform: scale(var(--mm-drift-scale, 1.2));
	will-change: transform;
}

/* ---------- Line reveal ---------- */

.mm-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.mm-w__i {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 1s var(--mm-ease);
	transition-delay: calc(var(--mm-line, 0) * 0.09s + 0.1s);
}

.mm-lines.is-in .mm-w__i {
	transform: none;
}

/* ---------- Running text ---------- */

.mm-run {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.mm-run__line {
	display: flex;
	white-space: nowrap;
	will-change: transform;
}

.mm-run__seg {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding-right: 0.45em;
}

.mm-run--vertical .mm-run__line {
	flex-direction: column;
	align-items: center;
}

.mm-run--vertical .mm-run__seg {
	writing-mode: vertical-rl;
	padding: 0 0 0.45em;
}

.mm-run--vertical.mm-run--turn .mm-run__seg {
	transform: rotate(180deg);
}

.mm-run__rule {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: currentColor;
	opacity: 0.25;
}

/* ---------- Circle button ---------- */

.mm-circle {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--mm-circle-size, 132px);
	height: var(--mm-circle-size, 132px);
	border-radius: 50%;
	background: var(--mm-circle-bg, var(--mm-accent));
	color: var(--mm-circle-color, #fff);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 11px;
	transition: transform 0.6s var(--mm-ease), background-color 0.3s ease;
}

.mm-circle:hover,
.mm-circle:focus-visible {
	transform: scale(1.06);
	color: var(--mm-circle-color, #fff);
}

.mm-circle__label {
	position: relative;
	z-index: 1;
}

.mm-circle__ring {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	animation: mm-turn 18s linear infinite;
	fill: currentColor;
	font-size: 9.5px;
	letter-spacing: 0.32em;
	pointer-events: none;
}

@keyframes mm-turn {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Expand ---------- */

.mm-has-expand {
	position: relative;
}

.mm-expand {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	margin: 0;
	padding: 4px 8px;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font: 600 11px/1.2 system-ui, sans-serif;
	letter-spacing: 0.02em;
	cursor: zoom-in;
}

.mm-expand:hover,
.mm-expand:focus-visible {
	background: #000;
}

.mm-viewer {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 4vh 4vw;
	border: 0;
	background: rgba(10, 10, 10, 0.94);
}

.mm-viewer[open] {
	display: grid;
	place-items: center;
}

.mm-viewer::backdrop {
	background: transparent;
}

.mm-viewer img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mm-viewer__close {
	position: absolute;
	top: 24px;
	right: 28px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: #fff;
	font: 500 12px/1 system-ui, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.mm-reveal img,
	.mm-reveal--curtain::after,
	.mm-w__i,
	.mm-circle,
	.mm-circle__ring {
		transition: none !important;
		animation: none !important;
	}

	.mm-reveal:not(.is-in) img {
		opacity: 1;
		filter: none;
	}

	.mm-reveal--curtain::after {
		display: none;
	}

	.mm-w__i {
		transform: none;
	}
}

/* Before the script runs (or without it), nothing stays hidden. */
html:not(.mm-ready) .mm-w__i,
html.mm-static .mm-w__i {
	transform: none;
}

html:not(.mm-ready) .mm-reveal img,
html.mm-static .mm-reveal img {
	opacity: 1;
	filter: none;
}

html:not(.mm-ready) .mm-reveal--curtain::after,
html.mm-static .mm-reveal--curtain::after {
	display: none;
}