/* Lama di gradiente tra porte e sede (vedi transizioni.js).
   Partenza: .lama--<lato> copre lo schermo. Arrivo: html.lama-arrivo--<lato> la fa uscire dal lato opposto.
   Lati: sx (entra da sinistra), dx (da destra), su (dal basso), giu (dall'alto).
   Con "riduci animazioni" non c'è: resta il cambio pagina semplice. */

@media (prefers-reduced-motion: no-preference) {

	.lama, .lama-arrivo body::after {
		position: fixed; top: 0; bottom: 0; left: -20%; width: 140%; z-index: 70; pointer-events: none;
		--entra: translateX(-110%) skewX(-14deg);
		--ferma: translateX(0) skewX(-14deg);
		--esce: translateX(110%) skewX(-14deg);
	}
	.lama--dx, .lama-arrivo--dx body::after { --entra: translateX(110%) skewX(-14deg); --esce: translateX(-110%) skewX(-14deg); }
	/* Lati verticali: geometria ruotata */
	.lama--su, .lama-arrivo--su body::after,
	.lama--giu, .lama-arrivo--giu body::after { left: 0; width: 100%; top: -20%; bottom: auto; height: 140%; --ferma: translateY(0) skewY(-8deg); }
	.lama--su, .lama-arrivo--su body::after { --entra: translateY(110%) skewY(-8deg); --esce: translateY(-110%) skewY(-8deg); }
	.lama--giu, .lama-arrivo--giu body::after { --entra: translateY(-110%) skewY(-8deg); --esce: translateY(110%) skewY(-8deg); }

	.lama { background: linear-gradient(115deg, var(--l1), var(--l2)); animation: lama-entra .38s cubic-bezier(.7, 0, .3, 1) forwards; }
	/* All'arrivo i colori della sede di partenza arrivano da transizioni.js (--a1/--a2) */
	/* In pausa (ferma a coprire) finché transizioni.js non aggiunge .lama-via, dopo il primo frame dipinto */
	.lama-arrivo body::after { content: ""; background: linear-gradient(115deg, var(--a1, var(--g1)), var(--a2, var(--g2))); animation: lama-esce .6s cubic-bezier(.7, 0, .3, 1) both paused; }
	.lama-arrivo.lama-via body::after { animation-play-state: running; }
	@keyframes lama-entra { from { transform: var(--entra); } to { transform: var(--ferma); } }
	@keyframes lama-esce { from { transform: var(--ferma); } to { transform: var(--esce); } }

	@media (max-width: 900px) {
		/* Porte impilate: su mobile l'andata sale dal basso e il ritorno scende dall'alto */
		.lama, .lama-arrivo body::after { left: 0; width: 100%; top: -20%; bottom: auto; height: 140%; --ferma: translateY(0) skewY(-8deg); }
		.lama--andata, .lama-arrivo--andata body::after { --entra: translateY(110%) skewY(-8deg); --esce: translateY(-110%) skewY(-8deg); }
		.lama--ritorno, .lama-arrivo--ritorno body::after { --entra: translateY(-110%) skewY(-8deg); --esce: translateY(110%) skewY(-8deg); }
	}
}