/* app-transitions.css
 * Transizioni di pagina (CSS) + rivelazione iniziale + stili Lenis.
 * Caricalo SEMPRE.
 *
 * Markup richiesto: il container Swup deve avere una classe transition-*
 * gestita qui sotto, es. transition-fade o transition-main.
 *   <main id="swup" class="transition-fade"> ... </main>
 */

/* --- Transizione di pagina (gestita via classi, Swup la attende) --- */
.transition-fade {
	opacity: 1;
	transition: opacity 0.35s ease;
}

/* Nascosto durante: caricamento iniziale (is-loading) e navigazione (is-animating) */
html.is-loading .transition-fade,
html.is-animating .transition-fade {
	opacity: 0;
}

/*
============================================
PAGINA
============================================
*/

html.is-changing,
html.is-loading,
html.is-awaiting-media,
html:not(.is-page-ready) {
	cursor: wait;
	pointer-events: none;
}

.transition-main {
	opacity: 1;
	transition: opacity 1000ms var(--ease-in-out);
}



/*
============================================
OVERLAY
============================================
*/

.transition-overlay {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
	z-index: 9999;
}

/* Il filtro vive sull'overlay, non sugli elementi della pagina: `filter`
   trasformerebbe l'header nel containing block dei suoi figli fixed. */
.transition-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: hsl(from var(--surface-primary) h s l / 0.8);
	backdrop-filter: blur(var(--unit-size));
	-webkit-backdrop-filter: blur(var(--unit-size));
	opacity: 0;
	transition: opacity 1000ms var(--ease-in-out);
}

html.is-animating .transition-overlay::before,
html.is-loading .transition-overlay::before,
html.is-awaiting-media .transition-overlay::before {
	opacity: 1;
}

/* 3. Gli span interni (i lati) si dividono il binario al 50% */
.edge {
	position: relative;
	z-index: 1;
	width: 50%;
	height: 100%;
	will-change: transform;
	opacity: 0;
	background: var(--surface-tertiary);

	html.is-changing &,
	html.is-site-ready & {
		transition: transform 1s var(--ease-in-out);
	}
}

.edge.left {
	transform: translateY(-100%);
}

.edge.right {
	transform: translateY(100%);
}

html.is-site-ready .edge {
	opacity: 1;
}

html.is-leaving .edge {
	transform: translateY(0);
	opacity: 1;
}

html.is-rendering .edge.left {
	transform: translateY(100%);
	opacity: 1;
}

html.is-rendering .edge.right {
	transform: translateY(-100%);
	opacity: 1;
}

html.is-loading .edge.right,
html.is-loading .edge.left,
html.is-awaiting-media .edge.right,
html.is-awaiting-media .edge.left {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* --- Failsafe CSS puro ---
 * Se il JS non parte (404/errore/ad-blocker sulla CDN), is-loading resterebbe
 * attivo e la pagina invisibile. Dopo 6s l'animazione forza opacity:1
 * indipendentemente dal JS. */
html.is-loading .transition-fade {
	animation: app-failsafe-reveal 0s linear 6s forwards;
}
html.is-loading .transition-overlay {
	animation: app-failsafe-overlay 0s linear 6s forwards;
}
@keyframes app-failsafe-reveal {
	to {
		opacity: 1;
	}
}
@keyframes app-failsafe-overlay {
	to {
		opacity: 0;
		transform: translate3d(
			0,
			calc(-1 * 100% * var(--overlay-direction, 1)),
			0
		);
		pointer-events: none;
	}
}

/* Loader opzionale: <div class="page-loader"></div> nel footer */
.page-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	pointer-events: none;
}
html.is-loading .page-loader,
html.is-awaiting-media .page-loader,
html.is-changing .page-loader {
	display: block;
}

/* --- prefers-reduced-motion: niente transizioni di pagina --- */
@media (prefers-reduced-motion: reduce) {
	.transition-fade {
		transition: none;
		animation: none;
		opacity: 1 !important;
	}
}
html.app-reduced-motion .transition-fade {
	transition: none;
	opacity: 1;
}

/*
============================================
LENIS
============================================
*/

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* --- Marquee (per module.marquee.js) --- */
.marquee {
	overflow: hidden;
	white-space: nowrap;
}
.marquee__track {
	display: inline-flex;
	align-items: center;
	will-change: transform;
}

/* --- SplitText (per module.reveal.js) --- */
.split-line {
	display: block;
}
.split-line-mask {
	/* La maschera e' creata da SplitText (mask: "lines"). Il padding
	   compensato evita di tagliare accenti e discendenti con line-height stretto. */
	padding-block: 0.1em;
	margin-block: -0.1em;
}