/* mm-carousel-3d
   9 monitors orbit a wide ring as flat 2D billboards. Front monitor large,
   sides smaller, back row visible behind. All screens face forward at all
   times. Arrows live in their own columns outside the carousel band. */

.mm-carousel-3d-breakout {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 1600px;
}

.mm-carousel-3d-wrap {
	position: relative;
	width: 100%;
	margin: 0 0 60px;
}

.mm-carousel-3d__controls {
	position: relative;
	z-index: 1100;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	/* Pull the controls up into the carousel band, just below the front
	   monitor's bottom edge. The offset scales with the monitor size so
	   it stays correctly positioned at every viewport width. */
	margin-top: -100px;
}

.mm-carousel-3d {
	position: relative;
	width: 100%;
	height: 720px;
	overflow: visible;
}

.mm-carousel-3d__stage {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
}

.mm-monitor {
	position: absolute;
	left: 0;
	top: 0;
	width: 460px;
	height: 260px;
	margin-left: -230px;
	margin-top: -130px;
	transition: opacity 600ms ease, filter 600ms ease;
	will-change: transform, opacity;
}

.mm-monitor.is-front { cursor: pointer; }

.mm-monitor__frame {
	position: absolute;
	inset: 0;
	background: url('/images/backgrounds/assets/monitor-no-stand.png') center center / contain no-repeat;
	z-index: 2;
	pointer-events: none;
}

.mm-monitor__video {
	position: absolute;
	left: 1.5%;
	top: 3%;
	right: 1.5%;
	bottom: 7%;
	overflow: hidden;
	z-index: 3;
}

.mm-monitor__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}


/* Dark overlay across the entire screen area on the active front monitor.
   Sits over the video, under the play glyph. Click goes through it to the
   underlying video click handler. */
.mm-monitor__video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
	z-index: 1;
}

.mm-monitor.is-front .mm-monitor__video::after { opacity: 1; }
.mm-monitor.is-playing .mm-monitor__video::after { opacity: 0; }

.mm-monitor__play {
	position: absolute;
	left: 50%;
	top: 45%;
	width: 50px;
	height: 50px;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.95);
	opacity: 0;
	transition: opacity 300ms ease;
	z-index: 5;
	pointer-events: none;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
}

.mm-monitor__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mm-monitor.is-front .mm-monitor__play { opacity: 1; }
.mm-monitor.is-playing .mm-monitor__play { opacity: 0; }

/* On touch devices (phones / tablets) the play icon renders smaller so it
   doesn't dominate the smaller monitor face. */
@media (pointer: coarse) {
	.mm-monitor__play { width: 30px; height: 30px; }

	/* When the user taps the front monitor on touch, the actively playing
	   monitor pops out of the carousel layout and pins to the viewport
	   width in portrait orientation. Native HTML5 controls stay visible at
	   the bottom; the user can tap the controls' fullscreen button if they
	   want to rotate to landscape. */
	.mm-monitor.is-front.is-playing {
		position: fixed !important;
		left: 0 !important;
		top: 50% !important;
		width: 100vw !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
		margin: 0 !important;
		transform: translateY(-50%) !important;
		opacity: 1 !important;
		filter: none !important;
		z-index: 9999 !important;
	}

	/* Backdrop behind the snapped video so the rest of the page doesn't
	   show through. */
	.mm-carousel-3d:has(.mm-monitor.is-front.is-playing)::before {
		content: "";
		position: fixed;
		inset: 0;
		background: #000;
		z-index: 9998;
	}
}

.mm-carousel-3d__nav {
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.mm-carousel-3d__nav:hover {
	background: rgba(216, 27, 156, 0.25);
	border-color: rgba(216, 27, 156, 0.6);
	color: #fff;
}

.mm-carousel-3d__nav--info {
	font-size: 24px;
	line-height: 1;
}

.mm-carousel-3d__info-panel {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 99999;
	width: 420px;
	max-width: 90vw;
	padding: 18px 22px;
	background: rgba(8, 10, 14, 0.95);
	border: 1px solid rgba(120, 180, 255, 0.5);
	color: #fff;
	opacity: 0;
	transform: translate(20px, 20px);
	transition: opacity 0.15s ease;
}
.mm-carousel-3d__info-panel.show { opacity: 1; }
.mm-carousel-3d__info-panel .p-title {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 8px;
}
.mm-carousel-3d__info-panel .p-desc {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	line-height: 1.55;
}

/* Each breakpoint sets THREE things together to keep proportions:
   - monitor base size (peak scale 1.8 must still fit comfortably)
   - carousel band height (must contain the peak-scale monitor)
   - controls margin-top (pulls arrows up under the front monitor)
   The orbit radius (radiusX = rect.width * 0.875) reacts automatically. */
/* Breakpoints catch the carousel BEFORE monitors collide at the reported
   widths (1278/1053/838/636/501). Each tier shrinks the monitor enough that
   it survives down to the next breakpoint without overlap. Controls offset
   bumped lower in the 500-1100 range. */
@media (max-width: 1280px) {
	.mm-carousel-3d { height: 600px; }
	.mm-monitor { width: 400px; height: 227px; margin-left: -200px; margin-top: -113px; }
	.mm-carousel-3d__controls { margin-top: -55px; }
}
@media (max-width: 1055px) {
	.mm-carousel-3d { height: 520px; }
	.mm-monitor { width: 325px; height: 184px; margin-left: -162px; margin-top: -92px; }
	.mm-carousel-3d__controls { gap: 110px; margin-top: -30px; }
}
@media (max-width: 840px) {
	.mm-carousel-3d { height: 420px; }
	.mm-monitor { width: 260px; height: 147px; margin-left: -130px; margin-top: -73px; }
	.mm-monitor__play { width: 56px; height: 56px; font-size: 30px; }
	.mm-carousel-3d__controls { gap: 90px; margin-top: -20px; }
}
@media (max-width: 640px) {
	.mm-carousel-3d { height: 340px; }
	.mm-monitor { width: 200px; height: 113px; margin-left: -100px; margin-top: -56px; }
	.mm-carousel-3d__controls { gap: 70px; margin-top: -12px; }
	.mm-carousel-3d__nav { width: 40px; height: 40px; font-size: 22px; }
}
@media (max-width: 505px) {
	.mm-carousel-3d { height: 290px; }
	.mm-monitor { width: 162px; height: 92px; margin-left: -81px; margin-top: -46px; }
	.mm-carousel-3d__controls { gap: 56px; margin-top: -16px; }
	.mm-carousel-3d__nav { width: 36px; height: 36px; font-size: 20px; }
	.mm-monitor__play { width: 44px; height: 44px; font-size: 24px; }
}
@media (max-width: 445px) {
	.mm-carousel-3d { height: 250px; }
	.mm-monitor { width: 130px; height: 74px; margin-left: -65px; margin-top: -37px; }
	.mm-carousel-3d__controls { gap: 44px; margin-top: -12px; }
}