.transition-fade {
	opacity: 1;
	transition: opacity 240ms ease;
}

html.is-changing .transition-fade {
	opacity: 0;
}

[data-reveal] {
	opacity: 1;
	transform: none;
}

.js [data-reveal][data-reveal-ready="false"] {
	opacity: 0;
	transform: translateY(1.5rem);
}

/*
 * Image reveal: ScrollTrigger gestisce soltanto le classi; le animazioni
 * restano estendibili in CSS tramite image-reveal--<preset>.
 */
.image-reveal.is-image-reveal-ready {
	--image-reveal-duration: 900ms;
	--image-reveal-delay: 0s;
	--image-reveal-distance: 2.5rem;
	--image-reveal-scale: 1.08;
	--image-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	backface-visibility: hidden;
	transition-duration: var(--image-reveal-duration);
	transition-property: opacity, transform, clip-path;
	transition-timing-function: var(--image-reveal-ease);
}

.image-reveal.is-image-reveal-setting {
	transition: none;
}

.image-reveal.is-image-reveal-ready.is-image-revealed {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
	transition-delay: var(--image-reveal-delay);
}

.image-reveal--fade,
.image-reveal--fade-up,
.image-reveal--fade-down,
.image-reveal--fade-left,
.image-reveal--fade-right {
	opacity: 0;
}

.image-reveal--fade-up {
	transform: translate3d(0, var(--image-reveal-distance), 0);
}

.image-reveal--fade-down {
	transform: translate3d(0, calc(var(--image-reveal-distance) * -1), 0);
}

.image-reveal--fade-left {
	transform: translate3d(var(--image-reveal-distance), 0, 0);
}

.image-reveal--fade-right {
	transform: translate3d(calc(var(--image-reveal-distance) * -1), 0, 0);
}

.image-reveal--zoom-in,
.image-reveal--zoom-out {
	opacity: 0;
	transform: scale(var(--image-reveal-scale));
}

.image-reveal--clip-up,
.image-reveal--clip-down,
.image-reveal--clip-left,
.image-reveal--clip-right {
	opacity: 1;
	transform: scale(var(--image-reveal-scale));
}

.image-reveal--clip-up {
	clip-path: inset(100% 0 0 0);
}

.image-reveal--clip-down {
	clip-path: inset(0 0 100% 0);
}

.image-reveal--clip-left {
	clip-path: inset(0 100% 0 0);
}

.image-reveal--clip-right {
	clip-path: inset(0 0 0 100%);
}

/*
 * I pannelli partono sotto il viewport. In copertura raggiungono il centro
 * dello schermo e rimangono fermi fino a quando Swup ha sostituito la pagina
 * e i media necessari sono pronti. La rivelazione li porta verso l'alto,
 * da sinistra a destra.
 */
.transition-overlay {
	--page-transition-duration: 800ms;
	--page-transition-stagger: 120ms;
	--page-transition-easing: cubic-bezier(0.87, 0, 0.13, 1);
	position: fixed;
	inset: 0;
	display: flex;
	overflow: hidden;
	pointer-events: none;
	z-index: 9999;
}

.transition-overlay .edge {
	flex: 1;
	height: 100%;
	background: var(--color-surface-inverted);
	transform: translate3d(0, 100%, 0);
	transition: transform var(--page-transition-duration) var(--page-transition-easing);
	will-change: transform;
}

.transition-overlay .edge.center {
	transition-delay: var(--page-transition-stagger);
}

.transition-overlay .edge.right {
	transition-delay: calc(var(--page-transition-stagger) * 2);
}

html.is-leaving .transition-overlay .edge {
	transform: translate3d(0, 0, 0);
}

html.is-rendering .transition-overlay .edge,
html.is-panel-revealed .transition-overlay .edge {
	transform: translate3d(0, -100%, 0);
}

/* Swup ripulisce is-rendering alla fine della visita. Questo stato appartiene
 * solo all'overlay e conserva i pannelli fuori dal viewport fino alla visita
 * successiva, senza farli attraversare di nuovo lo schermo. */
html.is-panel-resetting .transition-overlay .edge {
	transform: translate3d(0, 100%, 0);
	transition: none;
}

/* L'attesa dei media ha sempre precedenza: l'overlay resta a copertura
 * completa finche' app.core.js non rimuove is-awaiting-media. */
html.is-loading .transition-overlay .edge,
html.is-awaiting-media .transition-overlay .edge {
	transform: translate3d(0, 0, 0);
}

html.is-changing {
	cursor: wait;
}

/* Evita che un errore JavaScript lasci la pagina irraggiungibile sotto
 * l'overlay iniziale. Con il runtime attivo l'animazione viene annullata
 * non appena is-loading e' rimossa. */
html.is-loading .transition-overlay .edge {
	animation: page-transition-failsafe 0s linear 8s forwards;
}

@keyframes page-transition-failsafe {
	to {
		transform: translate3d(0, -100%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.transition-fade,
	.js [data-reveal][data-reveal-ready="false"],
	.image-reveal.is-image-reveal-ready {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	.transition-overlay .edge {
		transition-duration: 0ms;
	}
}