/* Multiunit cube: the interactive 3D hero cube (assets/js/cube.js). Shared by the site and the under-construction page. */

/* The 3D cube ---------------------------------------------------------------- */

.mu-cube3d {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	container-type: inline-size;
	outline-offset: 6px;
}

.mu-cube3d.is-live .mu-cube3d__fallback {
	display: none;
}

.mu-c3__scene {
	position: absolute;
	inset: 0;
	perspective: 1500px;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.mu-cube3d.is-dragging .mu-c3__scene {
	cursor: grabbing;
}

.mu-c3__rotor {
	--s: 17cqi;
	--gap: 0.06;
	--lift: 0px;
	--step: calc(var(--s) * (1 + var(--gap)));
	position: absolute;
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
	will-change: transform;
}

.mu-cube3d.is-open .mu-c3__rotor {
	--gap: 0.16;
	--lift: calc(var(--s) * 0.75);
}

.mu-c3__cubelet {
	--k: 1;
	position: absolute;
	transform-style: preserve-3d;
	transform: translate3d(
		calc(var(--x) * var(--step) * var(--k)),
		calc(var(--y) * var(--step) * var(--k) + var(--y) * var(--lift)),
		calc(var(--z) * var(--step) * var(--k))
	);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mu-cube3d .mu-c3__cubelet {
	transition-delay: calc(var(--d, 0) * 45ms);
}

.mu-cube3d.is-resetting .mu-c3__cubelet {
	--k: 1.07;
	transition: transform 0.5s cubic-bezier(0.3, 0, 0.2, 1) calc(var(--d, 0) * 45ms);
}

.mu-cube3d .mu-c3__cubelet.is-hover {
	transition-delay: 0s;
}

.mu-c3__cubelet.is-hover {
	--k: 1.1;
	transition-duration: 0.25s;
}

.mu-c3__face {
	--f: color-mix(in srgb, var(--wp--preset--color--contrast) 9%, var(--wp--preset--color--base));
	position: absolute;
	top: calc(var(--s) / -2);
	left: calc(var(--s) / -2);
	width: var(--s);
	height: var(--s);
	box-sizing: border-box;
	background: var(--f);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--base));
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: background-color 0.6s var(--mu-ease);
}

.mu-c3__face--front { transform: translateZ(calc(var(--s) / 2)); --f: color-mix(in srgb, var(--wp--preset--color--contrast) 11%, var(--wp--preset--color--base)); }
.mu-c3__face--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.mu-c3__face--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); --f: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--base)); }
.mu-c3__face--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); --f: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, var(--wp--preset--color--base)); }
.mu-c3__face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); --f: color-mix(in srgb, var(--wp--preset--color--contrast) 17%, var(--wp--preset--color--base)); }
.mu-c3__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); --f: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, var(--wp--preset--color--base)); }

html[data-theme="light"] .mu-c3__face { --f: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, #ffffff); }
html[data-theme="light"] .mu-c3__face--top { --f: #ffffff; }
html[data-theme="light"] .mu-c3__face--front { --f: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, #ffffff); }
html[data-theme="light"] .mu-c3__face--right { --f: color-mix(in srgb, var(--wp--preset--color--contrast) 13%, #ffffff); }

.mu-c3__cubelet.is-hover .mu-c3__face {
	border-color: var(--wp--preset--color--accent);
}

.mu-cube3d .mu-c3__cubelet.is-corner .mu-c3__face,
.is-style-mu-assembly.is-complete .mu-c3__cubelet.is-corner .mu-c3__face {
	--f: var(--wp--preset--color--accent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--base));
}

.mu-cube3d .mu-c3__cubelet.is-corner .mu-c3__face--front,
.is-style-mu-assembly.is-complete .mu-c3__cubelet.is-corner .mu-c3__face--front {
	--f: color-mix(in srgb, var(--wp--preset--color--accent) 82%, var(--wp--preset--color--base));
}

.mu-cube3d .mu-c3__cubelet.is-corner .mu-c3__face--right,
.is-style-mu-assembly.is-complete .mu-c3__cubelet.is-corner .mu-c3__face--right {
	--f: color-mix(in srgb, var(--wp--preset--color--accent) 66%, var(--wp--preset--color--base));
}

.mu-c3__labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mu-c3__label {
	position: absolute;
	right: -0.5rem;
	top: calc(18% + var(--i) * 32%);
	padding: 0.2rem 0.55rem;
	border: var(--mu-rule);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.4s var(--mu-ease), transform 0.4s var(--mu-ease);
	transition-delay: calc(var(--i) * 80ms);
}

.mu-cube3d.is-open .mu-c3__label {
	opacity: 1;
	transform: none;
}

/* Visually hidden, still read by screen readers (also defined by the site; repeated here so the cube
   works on standalone pages such as the under-construction page). */
.mu-c3__controls .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mu-c3__controls {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.mu-hero-art {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

@media (min-width: 960px) {
	.mu-hero-art {
		max-width: 26rem !important;
	}
}

@media (max-width: 959px) {
	.mu-hero-art {
		grid-row: auto !important;
		justify-self: center !important;
		width: min(78vw, 20rem) !important;
		margin: 1rem 0 0 !important;
	}

	.mu-c3__label {
		right: -0.25rem;
		font-size: 0.6875rem;
	}
}