.mp-stage {
	--mp-bg: #0a0b0e;
	--mp-ink: #ece2d6;
	--mp-red: #f6161c;
	--mp-size: 100;
	--mp-x: 50;
	--mp-y: 55;
	position: relative;
	width: 100%;
	height: 70vh;
	overflow: hidden;
	background: var(--mp-bg);
}

.mp-stage.mp--full {
	height: 100vh;
	height: 100svh; /* mobile browsers: ignores the collapsing address bar */
}

.mp-stage.mp--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.mp-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* texts: positioned by a point (left/top) and an anchor (--mp-tx / --mp-ty) */
.mp-stage .mp-text {
	--mp-tx: -50%;
	--mp-ty: 0%;
	--mp-fx: translate(0, 0);
	position: absolute;
	left: 50%;
	top: 10%;
	margin: 0;
	z-index: 2;
	color: #ece2d6;
	line-height: 1.15;
	transform: translate(var(--mp-tx), var(--mp-ty)) var(--mp-fx);
	transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

.mp-stage .mp-text a {
	color: inherit;
	text-decoration: none;
}

.mp-stage .mp-text.mp-fx-fade,
.mp-stage .mp-text.mp-fx-fade-up,
.mp-stage .mp-text.mp-fx-zoom {
	opacity: 0;
}
.mp-stage .mp-text.mp-fx-fade-up { --mp-fx: translate(0, 24px); }
.mp-stage .mp-text.mp-fx-zoom    { --mp-fx: scale(.9); }

.mp-stage .mp-text.is-in {
	opacity: 1;
	--mp-fx: translate(0, 0);
}

/* in the Elementor editor always show texts so they can be positioned */
.elementor-editor-active .mp-stage .mp-text {
	opacity: 1 !important;
	--mp-fx: translate(0, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
	.mp-stage .mp-text {
		opacity: 1 !important;
		transition: none;
		--mp-fx: translate(0, 0) !important;
	}
}

/* ---------- video ---------- */
.mp-stage .mp-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	z-index: 0;
}
.mp-stage .mp-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(0, 0, 0, .25);
}
.mp-stage .mp-canvas { z-index: 1; }

.mp-stage .mp-sound {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .2s;
}
.mp-stage .mp-sound:hover,
.mp-stage .mp-sound:focus-visible { background: rgba(0, 0, 0, .6); }
.mp-stage .mp-sound .mp-sound-w { display: none; }
.mp-stage .mp-sound[aria-pressed="true"] .mp-sound-w { display: inline; }
.mp-stage .mp-sound[aria-pressed="true"] .mp-sound-x { display: none; }

.mp-stage .mp-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, .6);
	font: 15px/1.4 sans-serif;
	border: 2px dashed rgba(255, 255, 255, .2);
}