/* =========================================================================
   EMME-CI — Sezione 05 · Stratigrafia esplosa
   File: ec-strat.css
   Versione: 3.1.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.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.
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {

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

	.ec-strat__sticky {
		position: static;
		height: auto;
		overflow: visible;
		display: block;
		padding-block: clamp(2rem, 6vw, 4rem);
	}

	.ec-strat__scena {
		width: 100%;
		aspect-ratio: auto;
		perspective: none;
		margin-bottom: 1.5rem;
	}

	.ec-strat__piani {
		position: static;
		inset: auto;
		display: grid;
		gap: 1px;
		background: var(--ec-strat-line);
		transform: none !important;
		transform-style: flat;
	}

	.ec-strat__piano {
		position: static;
		width: auto;
		aspect-ratio: 16 / 7;
		margin: 0 !important;
		transform: none !important;
		cursor: default;
	}
	.ec-strat__piano::before,
	.ec-strat__piano::after { display: none; }

	.ec-strat__voce {
		opacity: 1 !important;
		transform: none !important;
		padding-left: 1rem;
	}
	.ec-strat__voce::before { transform: scaleY(1); }
}

/* -------------------------------------------------------------------------
   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; }