/* =========================================================================
   EMME-CI — Barra titolo delle pagine interne
   File: ec-titolo.css
   Versione: 1.0.0
   Data: 2026-08-26
   Dipende da: ec-core.css (per lo split delle righe e i token)
   Collocazione: child theme /assets/css/ec-titolo.css

   L'INGRESSO DEL TITOLO
   Non serve JavaScript nuovo: il titolo porta data-ec-split e ci pensa
   ec-core, che lo spezza in righe e aggiunge .is-in. Qui c'è solo il modo
   in cui quelle righe entrano — da sotto, dietro una maschera, sfalsate.

   LO SPAZIO PER L'HEADER
   L'header è trasparente e sta sopra il contenuto: la barra gli fa da
   sfondo. Il margine superiore è la sua altezza più il respiro, così sulle
   pagine interne l'impaginazione è la stessa della home senza casi
   particolari.

   CHANGELOG
   1.0.0 — 2026-08-26 — Prima release.
   ========================================================================= */

:root {
	/* Spazio per l'header trasparente che ci sta sopra */
	--ec-tit-top:     clamp(7rem, 12vh, 10rem);
	--ec-tit-bottom:  clamp(2.5rem, 6vh, 4.5rem);

	--ec-tit-bg:      #0E1B2B;
	--ec-tit-ink:     #FFFFFF;
	--ec-tit-soft:    rgba(255, 255, 255, .66);
	--ec-tit-dim:     rgba(255, 255, 255, .44);
	--ec-tit-line:    rgba(255, 255, 255, .22);
}

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

.ec-tit {
	position: relative;
	display: flex;
	align-items: flex-end;
	background: var(--ec-tit-bg);
	color: var(--ec-tit-ink);
	padding-block: var(--ec-tit-top) var(--ec-tit-bottom);
	overflow: hidden;
	isolation: isolate;
}

.ec-tit--bassa { min-height: clamp(16rem, 32vh, 22rem); }
.ec-tit--media { min-height: clamp(20rem, 44vh, 30rem); }
.ec-tit--alta  { min-height: clamp(26rem, 62vh, 40rem); }

.ec-tit__in {
	position: relative;
	z-index: 2;
	width: var(--ec-hd-largh, 90%);
	max-width: var(--ec-hd-max, 1920px);
	margin-inline: auto;
}

/* Azzera i wrapper del Theme Builder, come per l'header: senza questo la
   riga Divi restringe a 1080px e il titolo non si allinea al resto. */
.et_pb_section:has(.ec-tit),
.et_pb_row:has(.ec-tit),
.et_pb_column:has(.ec-tit),
.et_pb_module:has(.ec-tit) {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------------
   2. FONDO
   Un velo che parte dal basso: il titolo si legge sempre, qualunque sia
   la foto, senza doverne scegliere una scura.
   ---------------------------------------------------------------------- */

.ec-tit__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Entra con un accostamento appena percettibile: dà profondità senza
	   sembrare un effetto */
	animation: ec-tit-bg 1.4s var(--ec-ease, ease) both;
}

@keyframes ec-tit-bg {
	from { transform: scale(1.06); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

.ec-tit--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(14, 27, 43, .94) 8%,
		                        rgba(14, 27, 43, .68) 42%,
		                        rgba(14, 27, 43, .42) 100%);
}

/* -------------------------------------------------------------------------
   3. BRICIOLE
   ---------------------------------------------------------------------- */

.ec-tit__bric {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin-bottom: clamp(.75rem, 2vh, 1.25rem);
	font-family: var(--ec-font-mono, monospace);
	font-size: .625rem;
	letter-spacing: .14em;
	text-transform: uppercase;

	opacity: 0;
	transform: translateY(6px);
	animation: ec-tit-entra .6s var(--ec-ease, ease) .15s both;
}

@keyframes ec-tit-entra {
	to { opacity: 1; transform: none; }
}

.ec-tit__bric a {
	color: var(--ec-tit-dim);
	text-decoration: none;
	transition: color .24s var(--ec-ease, ease);
}
.ec-tit__bric a:hover { color: var(--ec-tit-ink); }

.ec-tit__bric span { color: var(--ec-tit-soft); }

/* Separatore: un trattino, non uno slash. Sta meglio col resto */
.ec-tit__bric i {
	width: .6rem;
	height: 1px;
	background: var(--ec-tit-line);
	flex: none;
}

/* Occhiello, quando prende il posto delle briciole */
.ec-tit__occhiello {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 clamp(.75rem, 2vh, 1.25rem);
	font-family: var(--ec-font-body, inherit);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ec-tit-ink);
	opacity: 0;
	animation: ec-tit-entra .6s var(--ec-ease, ease) .15s both;
}
.ec-tit__occhiello::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentColor;
	flex: none;
}

/* -------------------------------------------------------------------------
   4. TITOLO
   Le righe le crea ec-core con data-ec-split: ognuna è una maschera con
   dentro il testo, che entra da sotto. Lo sfalsamento fra le righe è
   quello che rende leggibile il gesto.
   ---------------------------------------------------------------------- */

.ec-tit__t {
	font-family: var(--ec-font-display, inherit);
	font-size: clamp(2rem, 1.3rem + 3.4vw, 4.75rem);
	line-height: .98;
	letter-spacing: -.025em;
	font-weight: 500;
	margin: 0;
	color: var(--ec-tit-ink) !important;
	max-width: 20ch;
	text-wrap: balance;
}

/* Prima che ec-core intervenga il titolo resta nascosto: senza questo si
   vedrebbe comparire tutto intero e poi rientrare. */
.ec-tit__t:not([data-ec-split="done"]) { opacity: 0; }
.ec-tit__t[data-ec-split="done"] { opacity: 1; }

.ec-tit__t .ec-line > span {
	transition-duration: .74s;
	transition-delay: calc(var(--ec-i, 0) * .09s + .1s);
}

.ec-tit__sub {
	margin: clamp(.75rem, 2vh, 1.25rem) 0 0;
	font-family: var(--ec-font-voice, Georgia, serif);
	font-size: clamp(1rem, .9rem + .5vw, 1.375rem);
	line-height: 1.35;
	color: var(--ec-tit-soft);
	max-width: 46ch;
	opacity: 0;
	animation: ec-tit-entra .6s var(--ec-ease, ease) .55s both;
}

/* -------------------------------------------------------------------------
   5. MOVIMENTO RIDOTTO
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ec-tit__bg,
	.ec-tit__bric,
	.ec-tit__occhiello,
	.ec-tit__sub {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.ec-tit__t { opacity: 1 !important; }
	.ec-tit__t .ec-line > span { transition: none; transform: none; }
}

/* -------------------------------------------------------------------------
   6. VISUAL BUILDER
   ---------------------------------------------------------------------- */

body.et-fb .ec-tit__t { opacity: 1 !important; }
body.et-fb .ec-tit__bg,
body.et-fb .ec-tit__bric,
body.et-fb .ec-tit__sub { animation: none; opacity: 1; }