/* Overlay Pagine 1.6.0 */

html.mbo-carica,
html.mbo-carica * { cursor: progress !important; }

/* Il foglio: sta nella pagina (non fisso), così home e progetto scorrono insieme.
   La posizione verticale la imposta lo script nel punto in cui ci si trova. */
.mbo-livello {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2147482990;
	display: none;
	min-height: calc(100vh - var(--mbo-margine, 120px));
}
.mbo-livello.mbo-visibile { display: block; }

/* Copia della home sopra il progetto: si schiaccia mentre il progetto sale (effetto "spinta") */
.mbo-copia {
	position: relative;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}
.mbo-copia-dentro { position: absolute; }

/* Striscia fissa in alto: il progetto le scorre sotto; dentro, la home scorre su e giù */
.mbo-nastro {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2147483000;
	overflow: hidden;
	cursor: pointer;
}
.mbo-nastro .mbo-copia-dentro { will-change: transform; pointer-events: none; }

.mbo-iframe {
	display: block;
	width: 100%;
	height: calc(100vh - var(--mbo-margine, 120px)); /* poi diventa alto quanto il progetto */
	min-height: calc(100vh - var(--mbo-margine, 120px));
	border: 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
	box-shadow: var(--mbo-ombra, 0 -12px 40px rgba(0, 0, 0, 0.18));
	background: var(--mbo-sfondo, transparent);
}

/* La X resta in vista mentre si scorre */
.mbo-chiudi {
	position: fixed;
	top: calc(var(--mbo-margine, 120px) + 12px);
	right: calc(16px + env(safe-area-inset-right, 0px));
	z-index: 2147483001;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mbo-x, #fff);
	font: 900 44px/1 'Roboto', system-ui, sans-serif;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s, color 0.3s, transform 0.3s;
}
.mbo-chiudi.mbo-visibile { opacity: 1; visibility: visible; }
.mbo-chiudi:hover { color: var(--mbo-x-hover, #666); transform: rotate(90deg); }
.mbo-chiudi:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 767px) {
	.mbo-livello { min-height: calc(100vh - var(--mbo-margine-mobile, 60px)); }
	.mbo-iframe {
		height: calc(100vh - var(--mbo-margine-mobile, 60px));
		min-height: calc(100vh - var(--mbo-margine-mobile, 60px));
	}
	.mbo-chiudi { top: calc(var(--mbo-margine-mobile, 60px) + 8px); right: 8px; }
}