/* =========================================================
   MM SCROLL GRADIENT — sfondo condiviso blurrato per le transizioni a
   scroll (sostituisce la vecchia tecnica a immagini SVG sfocate/scale).
   Basato sulla demo fornita dal cliente (bg-colorful / reveal-ellipse):
   un solo layer con piu' radial-gradient sovrapposti (ellisse bianca +
   ellisse rossa + base blu), con filter:blur() sull'INTERO layer — e'
   questo blur applicato a tutto il layer, non a una singola immagine
   scalata, che elimina i bordi netti/Mach band viste nei tentativi
   precedenti con i cerchi SVG.
   Le percentuali/colori sono custom property CSS, aggiornate via JS
   (vedi mm-scroll-gradient.js) in base al progress (0..1) dello
   ScrollTrigger della sezione — lo scroll resta quello nativo del sito,
   qui cambia solo la TECNICA dello sfondo, non il meccanismo di pin.
   ========================================================= */

/* Variante "forward": si apre verso il bianco pieno (Hero->Risultati,
   MadSuite->Manifesto) — nessuna maschera, il gradiente stesso cresce. */
.mm-scroll-bg {
	position: absolute;
	/* leggermente piu' grande del contenitore: il blur "mangia" un po' di
	   bordo, l'inset negativo compensa cosi' non si vede mai un margine
	   nitido non sfumato ai lati dello stage. */
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient( ellipse var(--white-w, 35%) var(--white-h, 15%) at bottom center, var(--white-color, rgba(240, 238, 234, 0.12)), transparent var(--white-stop, 65%) ),
		radial-gradient( ellipse var(--red-w, 300%) var(--red-h, 200%) at bottom, #D24A5D70, transparent var(--red-stop, 30%) ),
		var(--colori-pieni-blu-default, #162640);
	filter: blur( 60px );
}

/* Variante "reveal": maschera a ellisse che si apre da un lembo piccolo e
   schiacciato in basso fino a coprire tutto lo schermo (Casi Studio->
   MadSuite, Recensioni->Footer) — stesso identico sfondo della variante
   "forward" qui sopra, ma rivelato progressivamente invece che animato
   direttamente, cosi' dove la maschera sfuma il colore sotto coincide
   sempre con quello atteso (i due layer vengono sincronizzati insieme
   dallo stesso JS). Va messo SOPRA (nel DOM, o via z-index) un
   .mm-scroll-bg "forward" gia' presente nello stesso stage, cosi' quando
   e' invisibile (opacity:0, a riposo) si vede lo sfondo pieno sottostante. */
.mm-scroll-bg--reveal {
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient( ellipse 35% 15% at bottom center, rgba(240, 238, 234, var(--reveal-white-alpha, 0.12)), transparent 65% ),
		radial-gradient( ellipse 300% 200% at bottom, #D24A5D70, transparent 30% ),
		var(--colori-pieni-blu-default, #162640);
	-webkit-mask-image: radial-gradient( ellipse var(--reveal-rx, 30%) var(--reveal-ry, 6%) at 50% 100%, black 0%, black var(--reveal-feather, 2%), transparent 100% );
	mask-image: radial-gradient( ellipse var(--reveal-rx, 30%) var(--reveal-ry, 6%) at 50% 100%, black 0%, black var(--reveal-feather, 2%), transparent 100% );
	filter: blur( 60px );
}


/* =========================================================
   MOBILE — sfondo animato/sfocato rimosso del tutto.
   Il filter:blur(60px) applicato a un layer che si aggiorna a ogni frame
   di scroll (radial-gradient con proprieta' custom aggiornate via JS) e'
   uno dei costi GPU piu' pesanti misurati su un telefono reale (dati da
   profiling Safari Web Inspector): rimuoverlo del tutto su mobile e
   sostituirlo con uno sfondo statico (vedi homepage.css) elimina questo
   costo senza toccare l'aspetto desktop. */
@media (max-width: 1080px) {
	.mm-scroll-bg,
	.mm-scroll-bg--reveal {
		display: none !important;
	}
}