/**
 * Element:     Innovazione
 * Class:       .hi-cva-innovazione
 * Description: Track a scorrimento con tre sfondi che si incrociano e tre
 *              schede che si susseguono. Geometria e colori dal prototipo
 *              cva-proposta-1-B; corpo dei testi dal tema.
 *
 * I valori animati — opacità degli sfondi, opacità e scorrimento delle
 * schede — li scrive il JS in stile inline. Qui ci sono gli stati di partenza.
 */

.hi-cva-innovazione {
	--hi-cva-inn-ink: #eef3f6;
	--hi-cva-inn-accent: #45c8f5;
	--hi-cva-inn-line: #51b2dd;
	--hi-cva-inn-deep: #0a1726;
	--hi-cva-inn-mono: var(--h6-font-family, 'IBM Plex Mono', ui-monospace, monospace);

	position: relative;
	height: var(--hi-cva-inn-track, 320vh);
	background: var(--hi-cva-inn-deep);
}

.hi-cva-innovazione *,
.hi-cva-innovazione *::before,
.hi-cva-innovazione *::after {
	box-sizing: border-box;
}

/* La larghezza reale del documento la misura il JS: 100vw comprende la barra
   di scorrimento e genererebbe scroll orizzontale. */
.hi-cva-innovazione--bleed {
	width: var(--hi-cva-inn-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--hi-cva-inn-vw, 100vw) / 2);
}

.hi-cva-innovazione__viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* ==========================================================================
   Sfondi
   Impilati: il primo sempre visibile, gli altri due entrano in dissolvenza.
   ========================================================================== */

.hi-cva-innovazione__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hi-cva-innovazione__bg--2,
.hi-cva-innovazione__bg--3 {
	opacity: 0;
	will-change: opacity;
}

.hi-cva-innovazione__shade-x,
.hi-cva-innovazione__shade-y {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Scurisce verso destra, dove sta il testo. */
.hi-cva-innovazione__shade-x {
	background: linear-gradient(90deg, rgba(8, 18, 28, .35) 0%, rgba(8, 18, 28, .4) 45%, rgba(8, 18, 28, .72) 100%);
}

.hi-cva-innovazione__shade-y {
	background: linear-gradient(180deg, rgba(8, 18, 28, .3) 0%, rgba(8, 18, 28, 0) 35%, rgba(8, 18, 28, .45) 100%);
}

/* ==========================================================================
   Colonna dei contenuti
   Spinta a destra, con lo sfondo che resta leggibile a sinistra.
   ========================================================================== */

/*
 * Il pannello è alto tutta la finestra, così l'immagine passa dietro
 * l'header; i testi però devono restarne fuori, altrimenti l'etichetta in
 * cima finisce coperta. L'altezza dell'header la misura il JS e la scrive in
 * --hi-cva-inn-header: si somma al padding, e il contenuto resta centrato
 * nello spazio che avanza. Nel prototipo non serviva perché lì l'header è
 * trasparente.
 */
.hi-cva-innovazione__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(24px, 3.5vh, 40px);
	padding: calc(clamp(70px, 9vh, 110px) + var(--hi-cva-inn-header, 0px)) 6vw clamp(70px, 9vh, 110px);
}

.hi-cva-innovazione__lead,
.hi-cva-innovazione__cards {
	width: 100%;
	max-width: 560px;
	flex-shrink: 0;
	margin-left: auto;
	margin-right: clamp(40px, 11vw, 180px);
}

/*
 * Tipografia: qui NON viene dal tema, a differenza degli altri elementi.
 * Sono i valori del prototipo, riportati tali e quali su richiesta.
 *
 * La differenza si vede soprattutto restringendo la finestra: il tema tiene
 * i paragrafi a 16px fissi con peso 400, il prototipo li scala con la
 * larghezza e usa il peso 300 con interlinea più stretta — a 1200px sono
 * 14px contro 16, e la pagina cambia aria.
 *
 * Il rovescio: se un domani si ritocca la tipografia da Theme Options,
 * questa sezione non seguirà. Va cambiata qui.
 */
.hi-cva-innovazione__label {
	margin: 0 0 26px;
	font-family: var(--hi-cva-inn-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .22em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--hi-cva-inn-line);
}

.hi-cva-innovazione__title {
	margin: 0;
	padding: 0;
	font-size: clamp(34px, 3.8vw, 56px);
	font-weight: 200;
	letter-spacing: -.03em;
	line-height: 1.06;
	color: var(--hi-cva-inn-ink);
}

.hi-cva-innovazione__sub {
	margin: 28px 0 0;
	max-width: 48ch;
	font-size: clamp(14px, 1.1vw, 17px);
	font-weight: 300;
	line-height: 1.6;
	/* Il tema spazia le lettere dei paragrafi di 0.07em: sulla stessa frase
	   sono duecento pixel in più di larghezza, e il testo sembra più grande
	   anche a parità di corpo. Nel prototipo la spaziatura è normale. */
	letter-spacing: normal;
	color: rgba(245, 249, 252, .92);
	text-shadow: 0 1px 14px rgba(6, 14, 22, .65);
}

/* ==========================================================================
   Schede
   ========================================================================== */

/*
 * Le schede stanno tutte nella stessa cella di griglia, sovrapposte. Così il
 * contenitore è alto quanto la più alta e nessuna può sbordare: con
 * un'altezza fissa — 30vh, come nel prototipo — su una finestra bassa il
 * pulsante finiva fuori dal riquadro, perché i testi qui vengono dal tema e
 * sono un filo più grandi di quelli su cui quel valore era tarato.
 */
.hi-cva-innovazione__cards {
	position: relative;
	display: grid;
}

.hi-cva-innovazione__card {
	grid-area: 1 / 1;
	display: flex;
	opacity: 0;
	will-change: transform, opacity;
	transform-origin: 80% 100%;
}

.hi-cva-innovazione__card-link {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: clamp(30px, 3.2vw, 44px);
	background: rgba(10, 22, 36, .72);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 36px 80px -20px rgba(0, 0, 0, .5);
	text-decoration: none;
	transition: background .35s ease, border-color .35s ease;
}

.hi-cva-innovazione__card-link:hover,
.hi-cva-innovazione__card-link:focus {
	background: rgba(11, 28, 45, .8);
	border-color: rgba(127, 196, 229, .45);
	text-decoration: none;
}

.hi-cva-innovazione__count {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hi-cva-innovazione__num,
.hi-cva-innovazione__total {
	font-family: var(--hi-cva-inn-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 1.2;
}

.hi-cva-innovazione__num {
	color: var(--hi-cva-inn-accent);
}

.hi-cva-innovazione__total {
	color: rgba(238, 243, 246, .4);
}

.hi-cva-innovazione__name {
	margin: 24px 0 0;
	padding: 0;
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.04;
	color: #fff;
}

.hi-cva-innovazione__desc {
	margin: 16px 0 0;
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: normal;
	color: rgba(238, 243, 246, .72);
}

/*
 * Distanza fissa dal testo, non `margin-top: auto`. Appoggiandolo al fondo
 * del riquadro, lo spazio sopra dipendeva da quante righe aveva la
 * descrizione: ventisette pixel con due righe, zero con tre, col pulsante
 * incollato al testo. L'altezza delle descrizioni la pareggia il JS, così
 * anche i pulsanti si trovano tutti alla stessa quota.
 */
.hi-cva-innovazione__cta {
	margin-top: 32px;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 30px;
	border: 1px solid var(--hi-cva-inn-line);
	background: rgba(81, 178, 221, .08);
	color: var(--hi-cva-inn-line);
	font-family: var(--hi-cva-inn-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background .35s ease;
}

.hi-cva-innovazione__card-link:hover .hi-cva-innovazione__cta {
	background: rgba(81, 178, 221, .18);
}

.hi-cva-innovazione__arrow {
	flex: none;
	transition: transform .4s cubic-bezier(.16, .84, .32, 1);
}

.hi-cva-innovazione__card-link:hover .hi-cva-innovazione__arrow {
	transform: translateX(6px);
}

/* ==========================================================================
   Schermi piccoli
   ========================================================================== */

@media (max-width: 760px) {

	.hi-cva-innovazione__content {
		padding-left: 6vw;
		padding-right: 6vw;
	}

	.hi-cva-innovazione__lead,
	.hi-cva-innovazione__cards {
		max-width: none;
		margin-right: 0;
	}

	.hi-cva-innovazione__card-link {
		padding: 24px 26px;
	}

	.hi-cva-innovazione__cta {
		padding: 12px 18px;
		gap: 10px;
		letter-spacing: .08em;
	}
}

/* ==========================================================================
   Movimento ridotto
   Il track collassa a una schermata e resta la prima scheda, ferma.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.hi-cva-innovazione {
		height: 100vh;
	}

	.hi-cva-innovazione__card {
		opacity: 0;
	}

	.hi-cva-innovazione__card[data-inn-card="0"] {
		opacity: 1;
	}
}