/* ==========================================================================
   See Different 3.17 — animazioni legate allo scroll in tutta la home.
   File separato: theme.css non è toccato. Le animazioni usano le proprietà
   translate / scale / rotate, che si sommano a quelle del tema invece di
   sostituirle, così le rivelazioni e gli hover di prima continuano a funzionare.
   Valori passati da scroll.js su ogni elemento seguito:
     --e  entrata   0 = sta arrivando dal basso, 1 = è entrato del tutto
     --v  passaggio 0 = sotto lo schermo, .5 = al centro, 1 = uscito in alto
     --l  uscita    0 = in cima alla pagina, 1 = sparito (solo il banner)
   Senza la classe .sd-scrolly (JS spento, animazioni ridotte) non succede nulla.
   ========================================================================== */

.sd-scrolly [data-sx] { --e: 1; --v: .5; --l: 0; }

/* 1. Banner: le due parole si separano, il fondo si avvicina e scurisce */
.sd-scrolly .sd-hero__line:first-child { translate: calc(var(--l) * -22vw) 0; }
.sd-scrolly .sd-hero__line--out { translate: calc(var(--l) * 22vw) 0; }
.sd-scrolly .sd-hero__media { scale: calc(1 + var(--l) * .25); opacity: calc(1 - var(--l) * .7); }
.sd-scrolly .sd-hero__foot { translate: 0 calc(var(--l) * -80px); }
.sd-scrolly .sd-hero__claim,
.sd-scrolly .sd-hero__foot .sd-btn { opacity: calc(1 - var(--l) * 1.8); }
.sd-scrolly .sd-hero__scroll { opacity: calc(1 - var(--l) * 4); }

/* 2. La striscia gialla scorre seguendo la pagina */
.sd-scrolly .sd-band__track { translate: calc((var(--v) - .5) * -40vw) 0; }

/* 3. Titoli delle sezioni: entrano di lato mentre scendi */
.sd-scrolly .sd-head__title,
.sd-scrolly .sd-about__title,
.sd-scrolly .sd-ai__title,
.sd-scrolly .sd-contact__title {
	translate: calc((1 - var(--e)) * 14vw) 0;
	opacity: calc(.25 + var(--e) * .75);
}

/* 4. Chi sono: la foto si apre dal centro e scorre più lenta del resto */
.sd-scrolly .sd-about__media {
	clip-path: inset(calc((1 - var(--e)) * 22%) calc((1 - var(--e)) * 12%) round 2px);
}
.sd-scrolly .sd-about__media img { scale: 1.14; translate: 0 calc((var(--v) - .5) * -10%); }

/* 5. Lavori: il carosello arriva da destra e le schede salgono a onda */
.sd-scrolly .sd-works .sd-carousel__track { translate: calc((1 - var(--e)) * 30vw) 0; }
.sd-scrolly .sd-works .sd-card {
	translate: 0 calc((1 - var(--e)) * (80px + var(--n, 0) * 50px));
}
.sd-scrolly .sd-works .sd-card__media img { scale: calc(1.18 - var(--e) * .18); }

/* 6. Siti: le finestre si alzano da sdraiate a dritte */
.sd-scrolly .sd-site { perspective: 1400px; }
.sd-scrolly .sd-site__frame {
	transform-origin: 50% 100%;
	rotate: x calc((1 - var(--e)) * 32deg);
	translate: 0 calc((1 - var(--e)) * 60px);
	opacity: calc(.2 + var(--e) * .8);
}

/* 7. IA: il riquadro si apre con un taglio e le immagini passano dal bianco e nero al colore */
.sd-scrolly .sd-aibox,
.sd-scrolly .sd-ai__media {
	clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0);
}
.sd-scrolly .sd-aibox .sd-file__media img,
.sd-scrolly .sd-ai__media img { filter: grayscale(calc(1 - var(--v) * 1.6)); }

/* 8. Grafica: le schede arrivano a ventaglio e si raddrizzano */
.sd-scrolly .sd-gfx .sd-card {
	transform-origin: 50% 120%;
	rotate: calc((1 - var(--e)) * (var(--n, 0) - 1.5) * 9deg);
	translate: 0 calc((1 - var(--e)) * 120px);
}

/* 9. Brand: il nastro dei loghi accelera con lo scroll */
.sd-scrolly .sd-brandwall__track { translate: calc(var(--v) * -14vw) 0; }

/* 10. Contatti: il titolo cresce, il pulsante tondo rotola dentro */
.sd-scrolly .sd-contact__title { scale: calc(.86 + var(--e) * .14); transform-origin: 0 50%; }
.sd-scrolly .sd-blob {
	rotate: calc((1 - var(--e)) * -120deg);
	scale: calc(.5 + var(--e) * .5);
}

/* ── Capitoli: numero e nome della sezione in cui sei ── */
.sd-rail {
	position: fixed; left: var(--sd-gutter); bottom: 22px; z-index: 80;
	display: flex; align-items: center; gap: 12px;
	font-family: var(--sd-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	pointer-events: none;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
	opacity: 0; transition: opacity .3s ease;
}
.sd-rail.is-on { opacity: 1; }
.sd-rail__num { color: var(--sd-accent); font-weight: 700; }
.sd-rail__bar { width: 56px; height: 1px; background: var(--sd-line); }
.sd-rail__bar i { display: block; height: 100%; background: var(--sd-accent); transform-origin: 0 50%; transform: scaleX(var(--cp, 0)); }

@media (max-width: 800px) {
	.sd-rail__bar, .sd-rail__name { display: none; }
	.sd-scrolly .sd-hero__line:first-child { translate: calc(var(--l) * -30vw) 0; }
	.sd-scrolly .sd-hero__line--out { translate: calc(var(--l) * 30vw) 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sd-rail { display: none; }
}