/* =========================================================================
   EMME-CI — Sezione 05 · Stratigrafia esplosa
   File: ec-strat.css
   Versione: 3.2.0
   Data: 2026-08-26
   Dipende da: ec-core.css
   Collocazione: child theme /assets/css/ec-strat.css

   COSA FA E COSA NON FA
   Disegna la pila degli strati e l'elenco che li descrive. Titolo,
   sopratitolo, testo introduttivo e sfondo della sezione li componi in
   Divi, come per la mappa.

   IL MECCANISMO
   Elenco a sinistra, pila a destra. Il JS scrive due numeri: --ec-y su
   ogni piano, di quanto è salito, e --ec-show su ogni voce, quanto è
   visibile. Qui non c'è logica di sequenza, solo il modo in cui quei due
   numeri diventano movimento.

   Le voci stanno in colonna e non seguono i piani: non c'è niente da
   allineare, che era il problema delle versioni precedenti.

   CHANGELOG
   3.2.0 — 2026-10-08 — Sotto i 900px ogni strato si accosta alla sua voce
                        invece di finire in fondo: con display:contents i
                        due contenitori spariscono dalla disposizione e i
                        figli si ordinano nella stessa griglia.
   3.1.0 — 2026-08-26 — Elenco in colonna al posto dei richiami con filo.
                        Le voci già comparse restano visibili attenuate,
                        così si legge il progresso della sequenza.
   3.0.0 — 2026-08-26 — Apertura a passi alternati, pila ricentrata.
   2.1.0 — 2026-08-26 — Note in colonna esterna, salto in svh.
   2.0.0 — 2026-08-26 — Piani in prospettiva 3D con immagini reali.
   1.0.0 — 2026-08-26 — Prima release, geometria in SVG.
   ========================================================================= */

:root {
	/* --- Geometria della vista ------------------------------------- */
	--ec-strat-persp:   1600px;   /* profondità: più basso = più marcata */
	--ec-strat-incl:    60deg;    /* inclinazione: 0 di taglio, 90 dall'alto */
	--ec-strat-rot:     -34deg;   /* rotazione sul piano */
	--ec-strat-salto:   7.6svh;   /* distanza fra due strati aperti */
	--ec-strat-spess:   11px;     /* spessore apparente del pannello */

	/* --- Colore ----------------------------------------------------- */
	--ec-strat-ink:      #0E1B2B;
	--ec-strat-ink-soft: rgba(14, 27, 43, .62);
	--ec-strat-ink-dim:  rgba(14, 27, 43, .40);
	--ec-strat-line:     rgba(14, 27, 43, .16);
	--ec-strat-accent:   #2A4A72;
}

.ec-strat--scuro {
	--ec-strat-ink:      #FFFFFF;
	--ec-strat-ink-soft: rgba(255, 255, 255, .66);
	--ec-strat-ink-dim:  rgba(255, 255, 255, .42);
	--ec-strat-line:     rgba(255, 255, 255, .18);
	--ec-strat-accent:   #7FA3C9;
}

/* -------------------------------------------------------------------------
   1. STRUTTURA
   ---------------------------------------------------------------------- */

.ec-strat {
	position: relative;
	height: 400svh;   /* la riscrive il JS */
}

.ec-strat__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;

	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding-inline: clamp(1.25rem, 5vw, 5rem);
}

.ec-strat-host,
.et_pb_section:has(.ec-strat),
.et_pb_row:has(.ec-strat),
.et_pb_column:has(.ec-strat),
.et_pb_module:has(.ec-strat) {
	overflow: visible !important;
}

/* -------------------------------------------------------------------------
   2. ELENCO
   Le voci sono in posizione fissa. Compaiono in sequenza e, una volta
   comparse, restano: quella appena entrata è a pieno contrasto, le
   precedenti si attenuano. Così si legge dove si è arrivati.
   ---------------------------------------------------------------------- */

.ec-strat__lista {
	display: grid;
	gap: 0;
	align-content: center;
}

.ec-strat__voce {
	position: relative;
	padding: clamp(.625rem, 1.6vh, 1rem) 0 clamp(.625rem, 1.6vh, 1rem) 1.5rem;
	border-top: 1px solid var(--ec-strat-line);

	/* Entra dal basso e resta */
	opacity: calc(var(--ec-show, 0) * .55 + .05);
	transform: translateY(calc((1 - var(--ec-show, 0)) * 8px));
	transition: opacity 260ms var(--ec-ease, ease),
	            transform 320ms var(--ec-ease, ease);
}

.ec-strat__voce:last-child {
	border-bottom: 1px solid var(--ec-strat-line);
}

/* La voce appena comparsa, e quella puntata, vanno a pieno contrasto */
.ec-strat__voce.is-on,
.ec-strat__voce:hover {
	opacity: 1;
}

/* Barra di stato a sinistra: si riempie con la voce */
.ec-strat__voce::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ec-strat-accent);
	transform: scaleY(var(--ec-show, 0));
	transform-origin: top center;
	transition: transform 320ms var(--ec-ease, ease);
}

.ec-strat__n {
	display: block;
	font-family: var(--ec-font-mono, monospace);
	font-size: .625rem;
	letter-spacing: .14em;
	color: var(--ec-strat-ink-dim);
}

.ec-strat__t {
	display: block;
	margin-top: .1rem;
	font-family: var(--ec-font-display, inherit);
	font-size: clamp(.9375rem, .85rem + .4vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ec-strat-ink);
	transition: color 260ms var(--ec-ease, ease);
}
.ec-strat__voce.is-on .ec-strat__t,
.ec-strat__voce:hover .ec-strat__t { color: var(--ec-strat-accent); }

.ec-strat__d {
	display: block;
	margin-top: .25rem;
	font-family: var(--ec-font-body, inherit);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--ec-strat-ink-soft);
}

.ec-strat__q {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .3rem;
	font-family: var(--ec-font-mono, monospace);
	font-size: .625rem;
	letter-spacing: .06em;
	color: var(--ec-strat-accent);
}
.ec-strat__q::before,
.ec-strat__q::after {
	content: "";
	width: .75rem;
	height: 1px;
	background: currentColor;
}

/* -------------------------------------------------------------------------
   3. SCENA
   ---------------------------------------------------------------------- */

.ec-strat__scena {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 11;
	perspective: var(--ec-strat-persp);
	perspective-origin: 50% 50%;
}

/* La pila scende della media degli scostamenti, così il baricentro
   resta al centro mentre gli strati si separano. */
.ec-strat__piani {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: translateY(calc(var(--ec-center, 0) * var(--ec-strat-salto) * .5));
	transition: transform 120ms linear;
}

/* -------------------------------------------------------------------------
   4. PIANO
   L'ordine delle trasformazioni conta: prima si ruota il piano nello
   spazio, poi lo si alza sullo schermo. Invertendole i piani si
   allontanerebbero lungo la propria normale invece che verticalmente.
   ---------------------------------------------------------------------- */

.ec-strat__piano {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 78%;
	aspect-ratio: 16 / 10;
	/* Filo di stacco a riposo: si capisce che sono più di uno anche
	   prima di scorrere */
	margin: calc(-24.4% - var(--ec-i) * 5px) 0 0 -39%;
	transform-style: preserve-3d;
	transform:
		translateY(calc(var(--ec-y, 0) * var(--ec-strat-salto) * -1))
		rotateX(var(--ec-strat-incl))
		rotateZ(var(--ec-strat-rot));
	transition: transform 120ms linear;
	cursor: pointer;
}

.ec-strat__piano img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 1px;
	backface-visibility: hidden;
	transition: filter 320ms var(--ec-ease, ease);
}

/* Spessore: una copia scura dietro il piano. Con preserve-3d se ne vede
   solo il bordo, ed è esattamente l'effetto che serve. */
.ec-strat__piano::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ec-strat-ink);
	transform: translateZ(calc(var(--ec-strat-spess) * -1));
	border-radius: 1px;
}

/* Ombra portata, proporzionale a quanto lo strato si è alzato */
.ec-strat__piano::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: 0 26px 52px rgba(14, 27, 43, .26);
	border-radius: 1px;
	pointer-events: none;
	opacity: calc(var(--ec-y, 0) * .5);
}

/* Piano puntato: gli altri si attenuano */
.ec-strat__piani:has(.ec-strat__piano:hover) .ec-strat__piano img {
	filter: saturate(.3) brightness(1.06);
}
.ec-strat__piani .ec-strat__piano:hover img,
.ec-strat__piano.is-on img {
	filter: none;
}

/* -------------------------------------------------------------------------
   5. RESPONSIVE
   Sotto i 900px la prospettiva non ci sta accanto all'elenco: diventa
   una pila verticale di miniature con la descrizione sotto, che è come
   si legge un capitolato.
   ---------------------------------------------------------------------- */

/* Sotto i 900px la prospettiva con l'elenco accanto non ci sta. La pila
   si apre e ogni strato si accosta alla sua voce.

   L'abbinamento si ottiene senza toccare il markup: con display:contents
   i due contenitori spariscono dalla disposizione e i loro figli salgono
   nella stessa griglia. Da lì basta ordinarli, usando --ec-i che il JS
   assegna già a entrambi.

   In orizzontale le due colonne mettono l'immagine accanto al testo; in
   verticale si impilano, immagine sopra. */

@media (max-width: 900px) {

	.ec-strat { height: auto !important; }

	.ec-strat__sticky {
		position: static;
		height: auto;
		overflow: visible;

		display: grid;
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		align-items: center;
		gap: 1px clamp(1rem, 3vw, 2rem);
		padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
		background: var(--ec-strat-line);
	}

	.ec-strat__lista,
	.ec-strat__scena,
	.ec-strat__piani {
		display: contents;
	}

	/* Immagine e voce della stessa riga: due celle consecutive.
	   L'ordine viene dalla posizione nel markup e non da --ec-i, che il
	   JS assegna a runtime: così l'abbinamento regge anche se lo script
	   non parte. Aggiungendo uno strato servono due righe in più. */
	.ec-strat__piano:nth-child(1) { order: 0; }
	.ec-strat__voce:nth-child(1)  { order: 1; }
	.ec-strat__piano:nth-child(2) { order: 2; }
	.ec-strat__voce:nth-child(2)  { order: 3; }
	.ec-strat__piano:nth-child(3) { order: 4; }
	.ec-strat__voce:nth-child(3)  { order: 5; }
	.ec-strat__piano:nth-child(4) { order: 6; }
	.ec-strat__voce:nth-child(4)  { order: 7; }
	.ec-strat__piano:nth-child(5) { order: 8; }
	.ec-strat__voce:nth-child(5)  { order: 9; }

	.ec-strat__piano {
		position: static;
		width: auto;
		aspect-ratio: 4 / 3;
		margin: 0 !important;
		transform: none !important;
		transform-style: flat;
		cursor: default;
		background: var(--ec-strat-bg, #EFEEEA);
		padding-block: clamp(.75rem, 2vw, 1.25rem);
	}
	.ec-strat__piano::before,
	.ec-strat__piano::after { display: none; }

	.ec-strat__piano img {
		position: static;
		border-radius: 2px;
		transform: none !important;
		transition: none;
	}

	.ec-strat__voce {
		position: static;
		border-top: 0;
		opacity: 1 !important;
		transform: none !important;
		padding: clamp(.75rem, 2vw, 1.25rem) 0 clamp(.75rem, 2vw, 1.25rem) 1rem;
		background: var(--ec-strat-bg, #EFEEEA);
	}
	.ec-strat__voce:last-child { border-bottom: 0; }
	.ec-strat__voce::before { transform: scaleY(1); }
}

/* In verticale le due colonne non ci stanno: immagine sopra, voce sotto,
   e la riga si legge come una scheda. */

@media (max-width: 600px) {

	.ec-strat__sticky {
		grid-template-columns: 1fr;
		gap: 0;
		background: none;
	}

	.ec-strat__piano {
		aspect-ratio: 16 / 9;
		padding-block: 0;
	}

	.ec-strat__voce {
		padding: 1rem 0 1.5rem 1rem;
		border-bottom: 1px solid var(--ec-strat-line);
	}
	.ec-strat__voce:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   6. MOVIMENTO RIDOTTO
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ec-strat { height: auto !important; }
	.ec-strat__sticky { position: static; height: auto; }
	.ec-strat__piani,
	.ec-strat__piano,
	.ec-strat__voce { transition: none; }
	.ec-strat__voce { opacity: 1 !important; transform: none !important; }
	.ec-strat__voce::before { transform: scaleY(1); }
}

/* -------------------------------------------------------------------------
   7. VISUAL BUILDER
   ---------------------------------------------------------------------- */

body.et-fb .ec-strat { height: auto !important; }
body.et-fb .ec-strat__sticky { position: static !important; height: auto; }