/* Meta Particle Hero — stili frontend */

/* Ogni istanza è una .mph-root: createScene() ci appende dentro il proprio
   <canvas class="mph-canvas">. La base riempie sempre il proprio contenitore;
   le regole sotto cambiano solo COSA sia quel contenitore. */
.mph-root {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	background-color: var( --mph-bg-base, #040814 );
	background-image:
		radial-gradient( 120% 90% at 12% 8%, var( --mph-bg-glow-a, #0e2f52 ) 0%, transparent 55% ),
		radial-gradient( 110% 85% at 88% 92%, var( --mph-bg-glow-b, #2a1450 ) 0%, transparent 58% );
	isolation: isolate;
}

.mph-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* Il canvas è solo sfondo: i click devono arrivare ai widget sopra.
	   Il tracking del cursore avviene su window, quindi non serve riceverli. */
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* La classe la mette createScene() sul proprio host dopo il primo frame,
   così il modulo funziona anche usato da solo, senza il runtime. */
.mph-ready .mph-canvas {
	opacity: 1;
}

/* --- Modalità "sfondo del contenitore" (Elementor) ------------------------- */
/* Il widget si stende sul contenitore Elementor padre e resta sotto agli
   altri widget, che vengono issati sopra. */

.elementor-widget.mph-bg-widget {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 0;
	pointer-events: none;
}

.elementor-widget.mph-bg-widget > .elementor-widget-container {
	height: 100%;
	margin: 0;
	padding: 0;
}

.mph-host {
	position: relative;
}

.mph-minh {
	min-height: 100vh;
	min-height: 100dvh;
}

/* Estensione oltre il contenitore: copre l'intera finestra a prescindere dai
   margini della sezione. Utile quando la sezione stessa è centrata e stretta. */
.mph-root.mph-root--viewport {
	left: 50% !important;
	right: auto !important;
	width: 100vw !important;
	margin-left: -50vw !important;
}

/* --- Modalità "sfondo fisso a tutta pagina" --------------------------- */

.mph-root--fixed {
	position: fixed;
	z-index: -1;
}

/* --- Modalità "blocco autonomo" (shortcode senza Elementor) ----------- */

.mph-stage {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.mph-stage > .mph-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	color: #fff;
	padding: 0 6vw;
	pointer-events: auto;
}

/* --- Fallback (WebGL assente o disattivato su mobile) ------------------ */
/* Il colore è già quello giusto grazie alle custom property in linea: qui
   basta mostrare il logo statico al centro, senza avviare WebGL. */

.mph-root.mph-fallback {
	background-position: center;
	background-repeat: no-repeat;
	background-size: min( 60%, 420px );
	opacity: 0.92;
}

.mph-root.mph-fallback .mph-canvas {
	display: none;
}

/* --- Nota nell'editor Elementor ----------------------------------------- */

.elementor-editor-active .mph-root.mph-editor-note::before {
	content: "Meta Particle Hero — l'animazione WebGL è visibile solo nella pagina pubblicata";
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 3;
	max-width: 260px;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.6 );
	color: #cdb8f2;
	font: 400 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.mph-canvas {
		transition: none !important;
	}
}