/* =========================================================
   Testata con video legato allo scroll.
   Caricata solo quando la home usa questo tipo di testata.
   ========================================================= */

.vscroll {
	position: relative;
	/* Distanza di scroll della sezione: più è alta, più lento è l'avanzamento
	   del video. 460vh su ~15 secondi significa circa 3 secondi di video
	   ogni schermata scrollata. */
	height: 460vh;   /* ripiego per i browser senza svh */
	height: 460svh;
	background: var(--ink);
}

@media (max-width: 899.98px) {
	.vscroll {
		height: 380vh;
		height: 380svh;
	}
}

/* Nelle pagine interne la scena è più corta: c'è un solo blocco di testo,
   non una sequenza di capitoli da attraversare. */
.vscroll--pagina {
	height: 240vh;
	height: 240svh;
}

@media (max-width: 899.98px) {
	.vscroll--pagina {
		height: 200vh;
		height: 200svh;
	}
}

.vscroll__stage {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
}

.vscroll__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--ink);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vscroll__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}

/* Sfumatura: il testo deve restare leggibile su qualsiasi fotogramma. */
.vscroll__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(4, 14, 28, .92) 0%, rgba(4, 14, 28, .68) 38%, rgba(4, 14, 28, .28) 70%, rgba(4, 14, 28, .5) 100%);
}

@media (min-width: 900px) {
	.vscroll__scrim {
		background:
			linear-gradient(100deg, rgba(4, 14, 28, .92) 0%, rgba(4, 14, 28, .8) 34%, rgba(4, 14, 28, .42) 56%, rgba(4, 14, 28, .12) 76%, rgba(4, 14, 28, .38) 100%),
			linear-gradient(to top, rgba(4, 14, 28, .6), transparent 46%);
	}
}

/* ---------- Capitoli ---------- */

.vscroll__panels {
	position: relative;
	height: 100%;
}

.vpanel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	/* Sotto c'è la barra fissa dei contatti, sopra l'header: il testo deve
	   stare fra i due, altrimenti viene tagliato.

	   Niente overflow-y qui: rendere il pannello scorrevole sembra innocuo,
	   ma su touch è il pannello a catturare il gesto invece della pagina, e
	   lo scorrimento si pianta finché non si ricarica. Il testo deve entrare
	   nello spazio disponibile, non scorrere dentro un riquadro. */
	padding-block: calc(var(--header-h) + 1rem) calc(72px + var(--safe-b) + 1rem);
	overflow: hidden;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 26px, 0);
	transition: opacity .5s ease, transform .5s ease, visibility .5s;
	pointer-events: none;
}

@media (min-width: 900px) {
	.vpanel { padding-block: calc(var(--header-h) + 1rem) calc(72px + 1.5rem); }
}

/* Su schermo piccolo i capitoli devono stare in una schermata: testo più
   compatto, non più piccolo al punto da non leggersi. */
@media (max-width: 640px) {
	.vpanel--hero .vpanel__title { font-size: clamp(1.7rem, 1.05rem + 3vw, 2.2rem); }
	.vpanel--service .vpanel__title,
	.vpanel--final .vpanel__title { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.1rem); }
	.vpanel__text { font-size: 1rem; margin-bottom: 1.25rem; line-height: 1.5; }
	.vpanel__icon { width: 46px; height: 46px; margin-bottom: .7rem; }
	.vpanel__contatti { margin-bottom: 1.25rem; gap: .45rem; font-size: .9375rem; }
	.vpanel__step { margin-bottom: .6rem; }
	.vpanel--pair .vcard { padding: .9rem 1rem; }
	.vpanel--pair .vcard .vpanel__text { margin-bottom: .75rem; font-size: .9375rem; }
	.vpanel--pair .vpanel__cards { gap: .7rem; }
	.vpanel--pair .vpanel__icon { width: 34px; height: 34px; margin-bottom: .4rem; }
	.vpanel--pair .vpanel__title { font-size: 1.35rem; }
	.vpanel--pair .vcard .btn { min-height: 44px; padding-block: .6rem; }
}

.vpanel.is-active {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}

.vpanel .wrap { width: min(var(--wrap), 100%); }
.vpanel__title { color: #fff; margin: 0 0 .65rem; text-shadow: 0 2px 20px rgba(0, 0, 0, .38); }

.vpanel--hero .vpanel__title {
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
	line-height: 1.02;
	max-width: 20ch;
}

.vpanel--service .vpanel__title,
.vpanel--final .vpanel__title {
	font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
	max-width: 18ch;
}

.vpanel__icon { margin-bottom: 1rem; }

.vpanel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	flex: none;
	background: var(--brand-yellow);
	color: var(--ink);
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(254, 230, 6, .3);
}

.vpanel__text {
	font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
	color: rgba(255, 255, 255, .92);
	max-width: 50ch;
	margin: 0 0 1.75rem;
}

.vpanel__step {
	display: inline-flex;
	margin: 0 0 .85rem;
	padding: .35rem .85rem;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	max-width: none;
}

.vpanel__rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.25rem 0 0;
	font-size: .9375rem;
	color: rgba(255, 255, 255, .88);
}

.vpanel__rating strong { font-family: var(--font-display); font-size: 1.1875rem; color: #fff; }

/* Due servizi nello stesso capitolo (00:08 → 00:09) */

.vpanel__cards { display: grid; gap: clamp(1rem, 3vw, 1.75rem); }

@media (min-width: 860px) {
	.vpanel--pair .vpanel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
	.vpanel--pair .vpanel__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
	.vpanel--pair .vpanel__text { font-size: 1.0625rem; }
}

.vpanel--pair .vcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: rgba(4, 14, 28, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(8px);
}

.vcard__cta { margin: auto 0 0; }
.vcard .vpanel__text { margin-bottom: 1.25rem; }
.vcard .vpanel__icon { margin-bottom: .85rem; }

/* Contatti nell'ultimo capitolo: con la testata video sono l'unico punto
   della home in cui compaiono, oltre al footer. */

.vpanel__contatti {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.vpanel__contatti li {
	display: flex;
	align-items: center;
	gap: .6rem;
	max-width: none;
	color: rgba(255, 255, 255, .92);
}

.vpanel__contatti .icon { color: var(--brand-yellow); flex: none; }
.vpanel__contatti a { color: #fff; }

/* ---------- Indicazione e uscita ---------- */

/* Sta sopra la barra fissa dei contatti, non dietro. */
.vscroll__hint {
	position: absolute;
	inset-inline: 0;
	bottom: calc(72px + var(--safe-b) + 1rem);
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
	transition: opacity .4s ease;
	pointer-events: none;
}

@media (min-width: 768px) {
	.vscroll__hint { bottom: calc(1.75rem + var(--safe-b)); }
}

.vscroll__hint::after {
	content: "";
	display: block;
	width: 2px;
	height: 28px;
	border-radius: 2px;
	background: linear-gradient(to bottom, var(--brand-yellow), transparent);
	animation: vscroll-drop 1.8s ease-in-out infinite;
}

@keyframes vscroll-drop {
	0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
	50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}


/* Passaggio dalla testata scura alla pagina: senza questo lo stacco
   sembra l'inizio di un altro sito. */

.vscroll + * {
	position: relative;
}

.vscroll + *::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 140px;
	background: linear-gradient(to bottom, rgba(4, 14, 28, .28), transparent);
	pointer-events: none;
}

.vscroll + .section { padding-top: clamp(4rem, 9vw, 6.5rem); }

/* ---------- Modalità statica ----------
   Movimento ridotto, oppure video non disponibile: la sezione smette di
   essere un'animazione e diventa una pagina normale, con i capitoli uno
   sotto l'altro. Nessun contenuto sparisce. */

.vscroll.is-static {
	height: auto;
	background: linear-gradient(160deg, var(--brand-blue-dark), var(--brand-blue) 70%);
}

.vscroll.is-static .vscroll__stage {
	position: static;
	height: auto;
}

.vscroll.is-static .vscroll__media,
.vscroll.is-static .vscroll__hint { display: none; }

.vscroll.is-static .vscroll__scrim { display: none; }

.vscroll.is-static .vscroll__panels { height: auto; }

.vscroll.is-static .vpanel {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	padding-block: clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.vscroll.is-static .vpanel:last-child { border-bottom: 0; }

/* In ripiego cambia solo il video, che gira in loop invece di inseguire lo
   scroll: nessuna regola di layout, perché modificare l'altezza della
   sezione mentre si scorre sposta la pagina sotto le dita. */

/* Se l'autoplay viene rifiutato il video resta fermo sul suo poster.
   Nasconderlo, come faceva la versione precedente, nascondeva anche il
   poster: su iPhone, dove l'autoplay senza gesto è spesso negato, restava
   un rettangolo nero al posto della scena. */
.vscroll.is-poster .vscroll__video { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.vscroll__hint::after { animation: none; }
	.vpanel { transition: none; }
}