/**
 * Mate Motion — stili anti-FOUC, stati iniziali e utility.
 *
 * IMPORTANTE: tutti i selettori di "nascondimento" sono scopati sotto
 * html.mtm-anim, classe aggiunta SOLO da uno script inline early.
 * Senza JavaScript la classe non esiste e nessun contenuto viene nascosto.
 */

/* ------------------------------------------------------------------
 * Anti-FOUC — elementi dal pannello Elementor (attributo data-mtm-hide,
 * emesso da PHP solo per animazioni di ingresso non-hover/non-scrub).
 * ------------------------------------------------------------------ */
html.mtm-anim [data-mtm-hide]:not(.mtm-ready) {
	visibility: hidden;
}

/* ------------------------------------------------------------------
 * Anti-FOUC — classi manuali (solo animazioni di ingresso; parallax e
 * filtri progressivi restano sempre visibili). Escludiamo il trigger hover.
 * ------------------------------------------------------------------ */
html.mtm-anim :is(
	.mtm-fade-up,
	.mtm-fade-down,
	.mtm-fade-left,
	.mtm-fade-right,
	.mtm-reveal,
	.mtm-reveal-left,
	.mtm-reveal-right,
	.mtm-reveal-up,
	.mtm-reveal-down,
	.mtm-reveal-center,
	.mtm-blur-in,
	.mtm-scale-in,
	.mtm-zoom-in,
	.mtm-typewriter
):not(.mtm-ready):not([data-mtm-trigger="hover"]):not([data-mtm-scrub]) {
	visibility: hidden;
}

/* Quando il motore JS ha impostato gli stati iniziali, il wrapper torna
   visibile e sono i tween GSAP (autoAlpha) a gestire i target interni. */
html.mtm-anim .mtm-ready {
	visibility: visible;
}

/* ------------------------------------------------------------------
 * Parallax "a finestra": cornice ferma con overflow nascosto,
 * immagine interna sovradimensionata che scorre dentro.
 * La classe .mtm-frame viene applicata/creata automaticamente dal JS.
 * ------------------------------------------------------------------ */
.mtm-frame {
	position: relative;
	display: block;
	overflow: hidden !important;
	/* La finestra ritaglia con angoli vivi: senza questo, un’immagine già
	   arrotondata torna squadrata appena le si applica la parallasse.
	   Ereditando, la cornice riprende il raggio di chi la contiene. */
	border-radius: inherit;
}

.mtm-frame > img,
.mtm-frame picture img {
	display: block;
	width: 100%;
	height: auto;
	will-change: transform;
}

/* ------------------------------------------------------------------
 * Utility per gli elementi animati.
 * ------------------------------------------------------------------ */

/* Le maschere di SplitText (mask: 'lines') gestiscono già il clip;
   qui evitiamo solo che eventuali discendenti inline creino scrollbar. */
.mtm-splitting {
	overflow-wrap: anywhere;
}

/* Elementi con reveal clip-path: evita glitch di rendering su alcuni browser. */
[data-mtm-anim^="reveal-"] img,
.mtm-reveal-left img,
.mtm-reveal-right img,
.mtm-reveal-up img,
.mtm-reveal-down img,
.mtm-reveal-center img {
	backface-visibility: hidden;
}