/* ==========================================================
   Movimento: il velo con il filo tra una pagina e l'altra.
   Tutto è opzionale: senza JavaScript o con la riduzione del movimento
   la pagina resta leggibile e utilizzabile.
   ========================================================== */

/* ---------- Loader ----------
   Un velo pieno color crema copre ogni passaggio tra le pagine (site.js):
   il filo si disegna al centro, per intero, e la pagina nuova compare dopo, in dissolvenza.
   html[data-gs-cover]: la pagina appena arrivata è ancora coperta (script in testa).
   Attributo e non classe: alcune estensioni del browser riscrivono le classi di <html>. */
.gs-loader {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: grid;
	place-items: center;
	background: var(--gs-paper);
	color: var(--gs-acid);
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms var(--gs-ease);
}
.gs-loader[hidden] { display: none; }
.gs-loader.is-visible,
html[data-gs-cover] .gs-loader { opacity: 1; pointer-events: auto; }
html[data-gs-cover][data-gs-cover="out"] .gs-loader { /* più specifico dello stile in testa */
	opacity: 0;
	pointer-events: none;
	transition: opacity 450ms var(--gs-ease);
}
.gs-loader__filo {
	width: 96px;
	height: 96px;
	animation: gs-filo-breathe 1.4s ease-in-out calc(1.1s + var(--gs-loader-delay, 0ms)) infinite;
}
/* Il filo si disegna una volta per intero (0,9s) e resta; se la pagina tarda, respira.
   Lunghezza vera del tracciato (202 unità) invece di pathLength: Safari non sempre lo applica ai tratteggi. */
.gs-loader__filo path {
	stroke-dasharray: 202;
	stroke-dashoffset: 202;
	animation: gs-filo-draw 0.9s cubic-bezier(0.45, 0, 0.25, 1) var(--gs-loader-delay, 0ms) forwards;
}
@keyframes gs-filo-draw {
	from { stroke-dashoffset: 202; }
	to   { stroke-dashoffset: 0; }
}
@keyframes gs-filo-breathe {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
	.gs-loader { transition: none; }
	.gs-loader__filo, .gs-loader__filo path { animation: none; stroke-dashoffset: 0; }
	html[data-gs-cover] .gs-loader { display: none; }
}