/**
 * Element:     Storia
 * Class:       .hi-cva-storia
 * Description: La storia del Gruppo per decenni. Fotografia a tutto campo,
 *              asse dei decenni a destra, e una tenda che cala sull'immagine
 *              quando si sceglie un decennio. Geometria e colori dal
 *              prototipo cva-proposta-1-B (chi-siamo).
 *
 * Lo stato lo tiene l'attributo `data-sto-year` sulla sezione: vuoto o
 * assente è l'introduzione, un numero è la tappa scelta. Tutte le
 * transizioni pendono da lì, così il JS scrive un attributo e basta.
 */

.hi-cva-storia {
	/* Palette dell'elemento, sovrascrivibile dall'esterno. */
	--hi-cva-sto-ink: #ffffff;
	--hi-cva-sto-accent: #00b5e2;
	--hi-cva-sto-hover: #7fc4e5;
	--hi-cva-sto-deep: #0a1726;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(520px, 82vh, 760px);
	overflow: hidden;
	background: var(--hi-cva-sto-deep);
}

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

/*
 * A schermo intero, su richiesta. Serve quando la riga del builder è a piena
 * altezza: lì la riga è alta 100vh e una sezione più bassa viene centrata,
 * lasciando due bande scure sopra e sotto. Pareggiando le due altezze le
 * bande non ci sono più.
 */
.hi-cva-storia--schermo {
	min-height: 100vh;
	min-height: 100dvh;
}

/*
 * A tutta larghezza anche dentro una colonna del builder. La larghezza vera
 * la misura il JS in --hi-cva-sto-vw: `100vw` comprende la barra di
 * scorrimento e darebbe una striscia di troppo sulla destra.
 */
.hi-cva-storia--bleed {
	width: var(--hi-cva-sto-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--hi-cva-sto-vw, 100vw) / 2);
}

/* ==========================================================================
   Sfondo
   ========================================================================== */

.hi-cva-storia__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.hi-cva-storia__shade-y {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 16, 28, .1) 30%, rgba(6, 16, 28, .55) 72%, rgba(6, 16, 28, .82) 100%);
}

.hi-cva-storia__shade-x {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 16, 28, .55) 0%, rgba(6, 16, 28, .15) 46%, rgba(6, 16, 28, 0) 100%);
}

/* ==========================================================================
   La tenda
   Sta sopra il bordo superiore e cala scegliendo un decennio. È l'animazione
   della sezione: copre la fotografia per far leggere il racconto senza
   spegnerla del tutto.
   ========================================================================== */

.hi-cva-storia__curtain {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--hi-cva-sto-deep);
	transform: translateY(-100%);
	pointer-events: none;
	transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__curtain {
	transform: translateY(0);
}

/* ==========================================================================
   Contenuto
   ========================================================================== */

.hi-cva-storia__stage {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	/* Più spazio sotto il racconto per sollevarlo rispetto al bordo basso. */
	padding: clamp(48px, 6vh, 72px) 6vw clamp(88px, 12vh, 120px);
	display: grid;
	grid-template-columns: 1fr minmax(150px, 210px);
	gap: clamp(32px, 5vw, 84px);
	align-items: center;
}

/*
 * Le tappe condividono una cella grid: la più lunga determina l'altezza
 * effettiva, così i paragrafi non escono dalla sezione su schermi bassi.
 */
.hi-cva-storia__top {
	position: relative;
	display: grid;
	min-height: clamp(280px, 42vh, 380px);
}

.hi-cva-storia__intro,
.hi-cva-storia__panel {
	position: relative;
	grid-area: 1 / 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * L'introduzione se ne va subito e torna con calma: uscendo deve liberare
 * il campo prima che la tenda finisca di scendere, rientrando deve aspettare
 * che sia risalita.
 */
.hi-cva-storia__intro {
	transition: opacity .5s ease .6s;
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__intro {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

/* Le tappe fanno l'opposto: entrano a tenda quasi calata. */
.hi-cva-storia__panel {
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease .5s;
}

.hi-cva-storia__panel[data-sto-on] {
	opacity: 1;
	pointer-events: auto;
}

/*
 * Il titolo della sezione e quello delle tappe sono due livelli diversi, e
 * qui i corpi vengono dal prototipo e non dal tema: la sezione è una
 * copertina, non un testo di contenuto.
 */
.hi-cva-storia__title {
	margin: 0;
	padding: 0;
	max-width: 20ch;
	font-size: var(--h2-font-size);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.08;
	color: var(--hi-cva-sto-ink);
	text-shadow: 0 2px 18px rgba(6, 14, 22, .5);
	text-wrap: balance;
}

.hi-cva-storia__lead {
	margin: 22px 0 0;
	max-width: 52ch;
	font-size: clamp(16px, 1.35vw, 21px);
	font-weight: 400;
	/* Il tema spazia le lettere dei paragrafi: qui il testo è già largo. */
	letter-spacing: normal;
	line-height: 1.5;
	color: rgba(245, 249, 252, .9);
	text-shadow: 0 1px 14px rgba(6, 14, 22, .55);
}

.hi-cva-storia__decade {
	display: block;
	margin-bottom: clamp(14px, 2vh, 22px);
	font-family: var(--h6-font-family, var(--font-family, sans-serif));
	font-size: 13px;
	letter-spacing: .18em;
	line-height: 1.2;
	color: var(--hi-cva-sto-accent);
}

.hi-cva-storia__panel-title {
	margin: 0;
	padding: 0;
	max-width: 22ch;
	font-size: var(--cva-timeline-title-size);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.12;
	color: var(--hi-cva-sto-ink);
	text-wrap: balance;
}

.hi-cva-storia__body {
	margin: clamp(20px, 2.6vh, 32px) 0 0;
	max-width: 74ch;
}

.hi-cva-storia__body p {
	margin: 0 0 14px;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.7;
	color: rgba(245, 249, 252, .85);
}

.hi-cva-storia__body p:last-child {
	margin-bottom: 0;
}

/* Gli anni staccati: sono il filo con cui si percorre il racconto. */
.hi-cva-storia__body strong {
	font-weight: 600;
	color: var(--hi-cva-sto-ink);
}

/* ==========================================================================
   Asse dei decenni
   ========================================================================== */

.hi-cva-storia__axis {
	position: relative;
}

/* Le frecce servono solo su schermi stretti, dove l'asse si corica. */
.hi-cva-storia__arrow {
	display: none;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
}

.hi-cva-storia__stops {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 4vh, 46px);
	padding: 6px 0;
}

.hi-cva-storia__line {
	position: absolute;
	left: 10.5px;
	top: 14px;
	bottom: 14px;
	width: 1px;
	background: rgba(255, 255, 255, .32);
	transition: background .6s ease;
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__line {
	background: rgba(255, 255, 255, .28);
}

.hi-cva-storia__stop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.hi-cva-storia__dot {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #01426a;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__dot {
	background: rgba(255, 255, 255, .4);
}

.hi-cva-storia__stop:hover .hi-cva-storia__dot,
.hi-cva-storia__stop:focus-visible .hi-cva-storia__dot {
	background: var(--hi-cva-sto-ink);
	transform: scale(1.2);
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__stop:hover .hi-cva-storia__dot,
.hi-cva-storia[data-sto-year] .hi-cva-storia__stop:focus-visible .hi-cva-storia__dot {
	background: var(--hi-cva-sto-hover);
}

.hi-cva-storia__stop[data-sto-on] .hi-cva-storia__dot {
	background: var(--hi-cva-sto-accent);
	box-shadow: 0 0 14px 3px rgba(0, 181, 226, .75);
	transform: scale(1.18);
}

.hi-cva-storia__stop-label {
	white-space: nowrap;
	font-size: clamp(20px, 2.2vw, 36px);
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.2;
	color: rgba(255, 255, 255, .42);
	transition: color .35s ease;
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__stop-label {
	color: rgba(255, 255, 255, .5);
}

.hi-cva-storia__stop:hover .hi-cva-storia__stop-label,
.hi-cva-storia__stop:focus-visible .hi-cva-storia__stop-label {
	color: rgba(255, 255, 255, .85);
}

.hi-cva-storia[data-sto-year] .hi-cva-storia__stop:hover .hi-cva-storia__stop-label,
.hi-cva-storia[data-sto-year] .hi-cva-storia__stop:focus-visible .hi-cva-storia__stop-label {
	color: var(--hi-cva-sto-hover);
}

.hi-cva-storia__stop[data-sto-on] .hi-cva-storia__stop-label {
	color: var(--hi-cva-sto-ink);
	font-weight: 400;
}

/* ==========================================================================
   Schermi piccoli
   L'asse si corica sopra il testo e perde le etichette: restano i pallini e
   le due frecce. Introduzione e tappe smettono di sovrapporsi, altrimenti
   servirebbe un'altezza minima tarata sul racconto più lungo.
   ========================================================================== */

@media (max-width: 760px) {

	.hi-cva-storia {
		min-height: auto;
	}

	.hi-cva-storia__stage {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: clamp(32px, 7vw, 52px) 6vw clamp(56px, 10vw, 80px);
	}

	.hi-cva-storia__axis {
		order: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
	}

	.hi-cva-storia__top {
		order: 2;
		display: block;
		min-height: clamp(420px, 60vh, 560px);
	}

	.hi-cva-storia__arrow {
		display: inline-flex;
	}

	.hi-cva-storia__stops {
		flex-direction: row;
		gap: 20px;
	}

	.hi-cva-storia__line,
	.hi-cva-storia__stop-label {
		display: none;
	}

	.hi-cva-storia__intro,
	.hi-cva-storia__panel {
		position: relative;
		inset: auto;
	}

	.hi-cva-storia[data-sto-year] .hi-cva-storia__intro,
	.hi-cva-storia__panel:not([data-sto-on]) {
		display: none;
	}

	.hi-cva-storia__panel-title {
		font-size: var(--cva-timeline-title-mobile-size);
	}
}

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

	.hi-cva-storia__curtain,
	.hi-cva-storia__intro,
	.hi-cva-storia__panel,
	.hi-cva-storia__dot,
	.hi-cva-storia__stop-label {
		transition: none;
	}
}

.hi-cva-storia__hint { margin: 14px 0 0; max-width: 52ch; font-size: clamp(16px, 1.35vw, 21px); font-weight: 400; letter-spacing: normal; line-height: 1.5; color: rgba(245,249,252,.9); }
.hi-cva-storia__dot svg { display: block; }
.hi-cva-storia__stop[data-sto-on] .hi-cva-storia__dot { color: #fff; }
.hi-cva-storia__stop:focus-visible, .hi-cva-storia__arrow:focus-visible { outline: 2px solid #00b5e2; outline-offset: 6px; }