/* ==========================================================
   Animazioni d'ingresso e d'interazione in tutto il sito.
   html[data-gs-anim] lo mette uno script in testa (components.php) solo se il movimento
   non è ridotto; animate.js aggiunge .is-in quando l'elemento entra nello schermo.
   Senza JavaScript, o se animate.js non parte entro 4 secondi, l'attributo sparisce
   e la pagina resta com'è. Finita l'entrata, animate.js toglie data-gs-a: restano solo
   gli effetti al passaggio del mouse.
   ========================================================== */

:root {
	--gs-anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--gs-anim-dur: 900ms;
}

/* ---------- Titoli: parole che salgono da sotto una riga invisibile ---------- */
html[data-gs-anim] [data-gs-a="words"]:not(.is-split) { opacity: 0; }
.gs-w {
	display: inline-block;
	overflow: clip;
	overflow-clip-margin: 0.12em;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}
.gs-w__i {
	display: inline-block;
	transform-origin: 0 100%;
	transition: transform var(--gs-anim-dur) var(--gs-anim-ease);
	transition-delay: calc(var(--gs-i, 0) * 55ms + var(--gs-d, 0ms));
}
html[data-gs-anim] [data-gs-a="words"]:not(.is-in) .gs-w__i { transform: translateY(110%) rotate(4deg); }
html[data-gs-anim][dir="rtl"] [data-gs-a="words"]:not(.is-in) .gs-w__i { transform: translateY(110%) rotate(-4deg); }

/* ---------- Testi: salgono e si accendono ---------- */
html[data-gs-anim] [data-gs-a="rise"] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms var(--gs-anim-ease), transform var(--gs-anim-dur) var(--gs-anim-ease);
	transition-delay: var(--gs-d, 0ms);
}
/* Paragrafi d'apertura: anche da sfocati */
html[data-gs-anim] [data-gs-a="blur"] {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(16px);
	transition: opacity 900ms var(--gs-anim-ease), filter 900ms var(--gs-anim-ease), transform 900ms var(--gs-anim-ease);
	transition-delay: var(--gs-d, 120ms);
}
/* Etichette: scivolano dal lato da cui si legge */
html[data-gs-anim] [data-gs-a="slide"] {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity 600ms var(--gs-anim-ease), transform 700ms var(--gs-anim-ease);
	transition-delay: var(--gs-d, 0ms);
}
html[data-gs-anim][dir="rtl"] [data-gs-a="slide"] { transform: translateX(24px); }
/* Pulsanti: compaiono con un piccolo rimbalzo */
html[data-gs-anim] [data-gs-a="pop"] {
	opacity: 0;
	transform: scale(0.86) translateY(12px);
	transition: opacity 500ms var(--gs-anim-ease), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--gs-d, 150ms);
}
/* Numeri e anni: ruotano in posizione */
html[data-gs-anim] [data-gs-a="roll"] {
	opacity: 0;
	transform: translateY(70%) rotateX(-80deg);
	transform-origin: 50% 100%;
	transition: opacity 500ms var(--gs-anim-ease), transform 800ms var(--gs-anim-ease);
	transition-delay: calc(var(--gs-d, 0ms) + 200ms);
}
/* Elenchi e griglie: un elemento dopo l'altro */
html[data-gs-anim] [data-gs-a="stagger"] > * {
	opacity: 0;
	transform: translateY(36px) scale(0.98);
	transition: opacity 700ms var(--gs-anim-ease), transform var(--gs-anim-dur) var(--gs-anim-ease);
	transition-delay: calc(var(--gs-i, 0) * 90ms);
}

/* ---------- Immagini: si scoprono dal basso e si assestano ---------- */
html[data-gs-anim] [data-gs-a="mask"] {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1100ms var(--gs-anim-ease);
	transition-delay: var(--gs-d, 0ms);
}
html[data-gs-anim] [data-gs-a="mask"] img {
	transform: scale(1.18);
	transition: transform 1400ms var(--gs-anim-ease);
}

/* ---------- Fasce scure e color rame: si allargano fino ai bordi ---------- */
html[data-gs-anim] [data-gs-a="band"] {
	clip-path: inset(5% 4% round 40px);
	transition: clip-path 1100ms var(--gs-anim-ease);
}

/* ---------- Il filo: si disegna ---------- */
html[data-gs-anim] [data-gs-a="draw"] path {
	stroke-dasharray: 202;
	stroke-dashoffset: 202;
	transition: stroke-dashoffset 1300ms cubic-bezier(0.45, 0, 0.25, 1);
	transition-delay: var(--gs-d, 200ms);
}

/* Stato finale comune */
html[data-gs-anim] .is-in:is([data-gs-a="rise"], [data-gs-a="blur"], [data-gs-a="slide"], [data-gs-a="pop"], [data-gs-a="roll"]),
html[data-gs-anim] [data-gs-a="stagger"].is-in > * {
	opacity: 1;
	filter: none;
	transform: none;
}
html[data-gs-anim] [data-gs-a="mask"].is-in { clip-path: inset(0 0 0 0); }
html[data-gs-anim] [data-gs-a="mask"].is-in img { transform: none; }
html[data-gs-anim] [data-gs-a="band"].is-in { clip-path: inset(0 0 round 0); }
html[data-gs-anim] [data-gs-a="draw"].is-in path { stroke-dashoffset: 0; }

/* ---------- Barra di lettura in cima (dove il browser sa legarla allo scorrimento) ---------- */
.gs-progress { display: none; }
@supports (animation-timeline: scroll()) {
	html[data-gs-anim] .gs-progress {
		display: block;
		position: fixed;
		inset: 0 0 auto;
		z-index: 1000;
		height: 3px;
		background: var(--gs-acid);
		transform-origin: 0 50%;
		transform: scaleX(0);
		pointer-events: none;
		animation: gs-progress linear both;
		animation-timeline: scroll(root);
	}
	html[data-gs-anim][dir="rtl"] .gs-progress { transform-origin: 100% 50%; }
	@keyframes gs-progress { to { transform: scaleX(1); } }

	/* Ritratto e immagini grandi: scorrono un poco più lente della pagina */
	html[data-gs-anim] :is(.gs-portrait, .gs-case .wp-block-image) img {
		animation: gs-parallax linear both;
		animation-timeline: view();
		animation-range: cover;
	}
	@keyframes gs-parallax {
		from { translate: 0 -6%; }
		to   { translate: 0 6%; }
	}
}

/* ---------- Interazioni con il mouse ---------- */
@media (hover: hover) and (pointer: fine) {
	/* Schede dei progetti: si inclinano verso il puntatore (animate.js imposta --rx e --ry) */
	html[data-gs-anim] .gs-work {
		transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
		transition: transform 500ms var(--gs-anim-ease);
		will-change: transform;
	}
	html[data-gs-anim] .gs-work.is-tilting { transition-duration: 120ms; }
	.gs-work__media img { transition: transform 900ms var(--gs-anim-ease), filter 600ms var(--gs-anim-ease); }
	.gs-work:hover .gs-work__media img { transform: scale(1.06); }

	/* Pulsanti magnetici: seguono di poco il puntatore (--mx, --my) */
	html[data-gs-anim] [data-gs-magnet] {
		translate: var(--mx, 0) var(--my, 0);
		transition: translate 400ms var(--gs-anim-ease), background-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease);
	}

	/* Righe e voci di servizio: una linea rame che si allunga al passaggio */
	:is(.gs-row, .gs-cv__item, .gs-service__heading) { position: relative; }
	:is(.gs-row, .gs-cv__item)::after {
		content: "";
		position: absolute;
		inset: auto 0 -1px;
		height: 2px;
		background: var(--gs-acid);
		transform: scaleX(0);
		transform-origin: 0 50%;
		transition: transform 600ms var(--gs-anim-ease);
	}
	[dir="rtl"] :is(.gs-row, .gs-cv__item)::after { transform-origin: 100% 50%; }
	:is(.gs-row, .gs-cv__item):hover::after { transform: scaleX(1); }

	/* Pilastri e passi del metodo: si sollevano */
	:is(.gs-pillar, .gs-step__box) { transition: transform 500ms var(--gs-anim-ease), box-shadow 500ms var(--gs-anim-ease); }
	:is(.gs-pillar, .gs-step__box):hover { transform: translateY(-6px); box-shadow: 0 18px 40px -24px rgba(43, 30, 22, 0.45); }
}

/* Movimento ridotto: tutto fermo e visibile (l'attributo non viene messo, qui per sicurezza) */
@media (prefers-reduced-motion: reduce) {
	html[data-gs-anim] [data-gs-a],
	html[data-gs-anim] [data-gs-a] *,
	.gs-w__i { transition: none !important; animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; }
	.gs-progress { display: none !important; }
}