/* ==========================================================================
   LANDING del 2° Rapporto Camst-Censis «Lo spazio e il cibo» — solo sulla home
   Grafica: Figma «Landing rapporto Censis», pagina «Versione 2_temp»: 12 tavole da 1600×1138, l'ultima è il sito.
   Montata il 29/09/2026 (passo 1: computer). Il passo 2 (telefono, sotto i 768 px) sta in fondo.

   Le misure della tavola si scrivono in «px della tavola»:
   --u  per caratteri, loghi e bottoni: in proporzione alla larghezza fino a 1920 (×1,2 della tavola), fermo sopra
        (decisione di Phil del 29/09/2026, passo 1b: a 1920 il blocco era piccolo al centro; prima era fermo sopra i 1600).
   --v  per gli spazi in verticale: segue anche l'altezza dello schermo, perché la tavola (1600×1138)
        è più alta, in proporzione, di un 1920×1080 o di un 1366×768.

   Il movimento A TAPPE (passo 1b, 29/09/2026): superata una soglia di scorrimento parte la tappa successiva,
   che si compie da sola con la sua durata e il suo easing (qui sotto). Le soglie e la coda le tiene landing.js,
   che mette sulla scena le classi camst-t1…camst-t4. Reversibile e anche al telefono (richieste del committente,
   30/09/2026): tornando su la tappa si riavvolge con i tempi a specchio (--r-*, qui sotto).
   Lo stato di partenza lo decide una riga nel <head> (functions.php): classe camst-tappe su <html> PRIMA del primo
   disegno, così non si vede mai la tavola 12 al caricamento. Senza JavaScript, o con «riduci movimento»,
   la classe non c'è e si vede subito la tavola 12 (senza il mouse: non c'è niente da scorrere).
   ========================================================================== */

/* ascent/descent/line-gap-override: i file dichiarano due misure verticali (hhea 997/268 e «typo» 809/191, con USE_TYPO_METRICS).
   Chrome e Safari usano le prime, Firefox le seconde: con l'interlinea 0,99 il titolo gli saliva di 5,5 px nel rosso.
   Qui tutti usano le prime, quelle con cui la tavola 12 torna (misurate il 29/09/2026; i file dei caratteri non si toccano) */
@font-face { font-family: "Circular Std"; src: url("fonts/CircularStd-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: "Circular Std"; src: url("fonts/CircularStd-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: "Circular Std"; src: url("fonts/CircularStd-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 26.8%; line-gap-override: 0%; }

/* le fasi della sequenza: ognuna va da 0 a 1 con una transizione. Registrate, così il browser le sa animare;
   il valore di partenza è 1 = tavola 12, lo stato giusto quando il movimento non c'è */
@property --k-vista   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k-zoom    { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k-sale    { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k-stringe { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k-titolo  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k-sotto   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k-bottoni { syntax: "<number>"; inherits: true; initial-value: 1; }

/* nessuna barra di scorrimento (richiesta di Phil del 29/09/2026): il segnale è il mouse «scorri».
   Su Windows la barra occupa ~15 px e 100vw la comprende: senza, --u e --v misurano lo schermo vero */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

.camst-scena {
	--u: min(1.2px, 100vw / 1600);
	--v: min(100vw / 1600, 100vh / 1138);
	--rosso: #e64242;
	--arancio: #f09200;
	--ritmo: 1;                            /* landing.js lo abbassa per le tappe in coda: vanno più rapide */
	position: relative;
	font-family: "Circular Std", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

/* Il palco: uno schermo intero. Loghi in alto, titoli al centro, mouse in basso. */
.camst-palco {
	/* lo zoom del titolo: da 90 volte a 1, in progressione geometrica (così la discesa sembra costante);
	   nel Figma è 2400 px (×53) nella tavola 02 e 1200 px (×27) nella 03, centrato sul titolo stesso */
	--zoom: pow(90, calc(1 - var(--k-zoom)));
	/* al telefono, con le tappe: quanto dello schermo copre la barra dell'indirizzo quando è visibile (vedi sotto).
	   Sul computer è sempre 0 */
	--barra: 0px;

	position: relative;
	isolation: isolate;
	height: 100vh;
	overflow: hidden;
	overflow: clip;                        /* clip e non hidden: il fuoco sui bottoni non deve far scorrere il palco */
	display: grid;
	grid-template-rows: auto 1fr;
	justify-items: center;
	padding: calc(55 * var(--v)) calc(24 * var(--u)) calc(135 * var(--v) + var(--barra));
	box-sizing: border-box;
}

.camst-sfondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.camst-velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(0 0 0 / .5);
}

/* la linea sta al centro dello schermo (Phil, 30/09/2026): i due loghi sono larghi diversi (191 e 180), e centrando il
   gruppo la linea finiva 5,5 px della tavola a destra, come nella tavola 12. Due colonne uguali ai lati della linea:
   Camst accostato a destra, Censis a sinistra, 100 px da lei come prima */
.camst-marchi {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: calc(100 * var(--u));
}

/* i loghi portano ai due siti, in una scheda nuova (Phil, 30/09/2026): camstgroup.com e censis.it */
/* area di tocco più alta del logo (al telefono Censis è alto 19 px): padding compensato dal margine, niente si sposta */
.camst-marchio {
	display: block;
	padding-block: 10px;
	margin-block: -10px;
}
.camst-marchio:first-child { justify-self: end; }
.camst-marchio:last-child { justify-self: start; }

.camst-marchio:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.camst-marchi img { display: block; height: auto; }
.camst-marchio:first-child img { width: calc(191 * var(--u)); }
.camst-marchio:last-child img { width: calc(180 * var(--u)); }

.camst-marchi__linea {
	width: 2px;
	height: calc(66 * var(--u));
	background: #fff;
}

.camst-titoli {
	position: relative;
	top: calc(20 * var(--v));              /* nella tavola il blocco non è centrato: sta 20 px più in basso (misurato a 1600×1138) */
	z-index: 2;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.camst-scena .camst-occhiello {
	margin: 0 0 calc(38 * var(--v));
	font-size: calc(45 * var(--u));
	font-weight: 500;
	line-height: 1.27;
	white-space: nowrap;
}

.camst-occhiello span {
	display: inline-block;
	opacity: var(--k-vista);
	transform: scale(var(--zoom));
}

.camst-scena .camst-titolo {
	margin: 0;
	padding: 0 .175em .1em;
	overflow: hidden;
	background: var(--rosso);
	color: #fff;
	font-size: calc(100 * var(--u));
	font-weight: 700;
	line-height: .99;
	letter-spacing: 0;
	white-space: nowrap;
	text-wrap: balance;
}

.camst-titolo__testo {
	display: block;
	transform: translateY(calc((1 - var(--k-titolo)) * 110%));
}

.camst-sottotitolo-finestra {
	overflow: hidden;
	margin-top: calc(-3 * var(--u));
}

.camst-scena .camst-sottotitolo {
	margin: 0;
	font-size: calc(56 * var(--u));
	font-weight: 500;
	line-height: 1.27;
	white-space: nowrap;
	transform: translateY(calc((var(--k-sotto) - 1) * 100%));
}

.camst-bottoni {
	display: flex;
	gap: calc(44 * var(--u));
	margin-top: calc(96 * var(--v));
	transform: translateY(calc((1 - var(--k-bottoni)) * 55vh));
}

/* i bottoni non scendono mai sotto 16 px di testo e 50 px di altezza (passo 2): conta sotto i 1164 px di larghezza,
   dove in proporzione diventerebbero illeggibili e troppo piccoli per il dito (a 768 sarebbero 10,6 px e 33 px) */
.camst-scena .camst-bottone {
	display: inline-flex;
	align-items: center;
	gap: max(10px, calc(14 * var(--u)));
	padding: max(7px, calc(9 * var(--u))) max(7px, calc(9 * var(--u))) max(7px, calc(9 * var(--u))) max(20px, calc(26 * var(--u)));
	border-radius: 999px;
	background: var(--arancio);
	color: #fff;
	font-size: max(16px, calc(22 * var(--u)));
	font-weight: 900;
	line-height: 1.32;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.camst-scena .camst-bottone:is(:hover, :focus-visible) {
	background: #d98400;
	color: #fff;
}

.camst-scena .camst-bottone:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.camst-bottone__icona {
	display: grid;
	place-items: center;
	flex: none;
	width: max(36px, calc(51 * var(--u)));
	height: max(36px, calc(51 * var(--u)));
	border-radius: 50%;
	background: rgb(255 255 255 / .3);
}

.camst-bottone__icona svg {
	width: max(12px, calc(17 * var(--u)));
	height: auto;
}

/* Il mouse «scorri»: un bottone vero (clic o Invio = tappa successiva). C'è solo quando c'è il movimento,
   e sparisce con l'ultima tappa. Area di clic almeno 44 px, disegno dove sta nella tavola. */
.camst-scena .camst-mouse {
	--aria: 8px;
	display: none;
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: calc(53 * var(--v) - var(--aria) + var(--barra));
	translate: -50% 0;
	margin: 0;
	padding: var(--aria) max(var(--aria), (44px - 30 * var(--u)) / 2);
	border: 0;
	border-radius: 12px;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: opacity .4s ease, visibility 0s linear;
}

.camst-scena .camst-mouse:is(:hover, :focus, :active) { background: none; }

.camst-scena .camst-mouse:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 0;
}

.camst-mouse img {
	display: block;
	width: calc(30 * var(--u));
	height: auto;
}

/* Privacy e Cookie Policy (richiesta di Phil del 30/09/2026): nell'angolo in basso a destra, bianche, 16 px (14 al
   telefono), sempre visibili, anche durante la sequenza. Portano alle pagine di camstgroup.com, in una scheda nuova.
   Stanno sulla linea del fondo del mouse; area di clic alta 32 px (il testo resta dov'è: padding compensato). */
.camst-legali {
	position: absolute;
	z-index: 3;
	right: max(20px, calc(53 * var(--v)));
	bottom: calc(53 * var(--v) - 7px + var(--barra));
	display: flex;
	gap: 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;
}

.camst-scena .camst-legali a {
	display: block;
	padding: 7px 0;
	color: #fff;
	text-decoration: none;
}

.camst-scena .camst-legali a:is(:hover, :focus-visible) {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.camst-scena .camst-legali a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Il pannello rosso: c'è solo quando c'è il movimento. Sale dal basso, poi si stringe sul riquadro del titolo
   (le cui misure le scrive landing.js), che nel frattempo resta trasparente. */
.camst-pannello { display: none; }

/* le tappe a tutte le larghezze: dal 30/09/2026 anche al telefono (richiesta del committente; dal 29/09 sotto i 768 px
   la pagina era ferma) */
@media (prefers-reduced-motion: no-preference) {
	/* la corsa: 60vh di scorrimento sotto un palco fermo. Le soglie delle tappe (landing.js) stanno a 1%, 17%, 33%
	   e 49% di uno schermo, una ogni 16%: l'ultima dentro la corsa con un po' di margine. Prima erano 300vh (3240 px
	   a 1080), poi 170vh con le soglie a 1, 20, 40, 60% (fino all'01/10/2026, Phil: «leggermente meno scroll»). */
	html.camst-tappe .camst-scena { height: 160vh; }

	html.camst-tappe .camst-palco {
		position: sticky;
		top: 0;
		--k-vista: 0;
		--k-zoom: 0;
		--k-sale: 0;
		--k-stringe: 0;
		--k-titolo: 0;
		--k-sotto: 0;
		--k-bottoni: 0;
		/* i ritardi che cambiano col verso (30/09/2026, sequenza reversibile). Il browser usa i tempi dello stato in cui
		   si ARRIVA: qui quelli del ritorno, nelle classi camst-t1 e camst-t2 quelli dell'andata. Il ritorno è l'andata
		   a specchio, con la stessa durata: nella tappa 1 l'occhiello sfuma alla fine (1,25 s = 1,6 − 0,35); nella
		   tappa 2 prima scende il titolo (1,1 s), poi il rosso si allarga (da 1,05 s) e infine scende (da 1,75 s).
		   L'uscita del rosso è un po' più lenta dell'entrata (01/10/2026, Phil: «rallenta leggermente anche l'uscita del
		   rettangolo rosso»): 0,85 s per fase invece di 0,7, quindi la tappa 2 dura 2,3 s all'andata e 2,6 s al ritorno.
		   Anche la curva dei bottoni cambia col verso (01/10/2026, Phil: «l'uscita mi sembra più veloce dell'entrata»): al
		   ritorno una curva che parte piano e accelera; poi «velocizza leggermente la curva iniziale di uscita dei bottoni»:
		   da .64,0,.78,0 (a 0,8 s il 3% della corsa) a .4,0,.68,.06 (a 0,8 s il 10%, a 1 s il 20%) */
		--r-vista: 1.25s;
		--r-sale: 1.75s;
		--r-stringe: 1.05s;
		--r-titolo: 0s;
		--d-sale: .85s;
		--d-stringe: .85s;
		--e-bottoni: cubic-bezier(.4, 0, .68, .06);
		/* ogni fase ha la sua durata, il suo ritardo dentro la tappa e il suo easing.
		   Le durate totali delle tappe (ritardo + durata dell'ultima fase) sono ripetute in landing.js, DURATE */
		transition-property: --k-vista, --k-zoom, --k-sale, --k-stringe, --k-titolo, --k-sotto, --k-bottoni;
		transition-duration:
			calc(.35s * var(--ritmo)),     /* tappa 1: l'occhiello compare… */
			calc(1.6s * var(--ritmo)),     /*          …gigante (la «C» della tavola 02 passa) e scende a 45 px */
			calc(var(--d-sale) * var(--ritmo)),     /* tappa 2: il rosso sale dal basso (0,7 s; al ritorno 0,85)… */
			calc(var(--d-stringe) * var(--ritmo)),  /*          …si stringe sul riquadro (0,7 s; al ritorno 0,85)… */
			calc(1.1s * var(--ritmo)),     /*          …e ci sale dentro «Lo spazio e il cibo» (0,6 s, poi 0,9 s, fino all'01/10) */
			calc(1.2s * var(--ritmo)),     /* tappa 3: il sottotitolo scende da dietro (0,7 s, poi 1 s) */
			calc(1.7s * var(--ritmo));     /* tappa 4: i bottoni salgono dal basso (0,9 s, poi 1,4 s) */
		transition-delay:
			calc(var(--r-vista) * var(--ritmo)), 0s,
			calc(var(--r-sale) * var(--ritmo)), calc(var(--r-stringe) * var(--ritmo)), calc(var(--r-titolo) * var(--ritmo)),
			0s,
			0s;
		transition-timing-function:
			linear,
			cubic-bezier(.45, 0, .2, 1),   /* parte piano (si legge la «C»), poi scende e atterra morbido */
			cubic-bezier(.33, 1, .68, 1),  /* esce veloce e rallenta */
			cubic-bezier(.65, 0, .35, 1),  /* dolce ai due capi */
			cubic-bezier(.22, 1, .36, 1),
			cubic-bezier(.22, 1, .36, 1),
			var(--e-bottoni);              /* andata: salgono e si posano piano (camst-t4, qui sotto); ritorno: speculare */
	}

	html.camst-tappe .camst-t1 .camst-palco { --k-vista: 1; --k-zoom: 1; --r-vista: 0s; }
	html.camst-tappe .camst-t2 .camst-palco { --k-sale: 1; --k-stringe: 1; --k-titolo: 1; --r-sale: 0s; --r-stringe: .55s; --r-titolo: 1.2s; --d-sale: .7s; --d-stringe: .7s; }

	/* Al telefono scorrendo la barra dell'indirizzo sparisce e lo schermo si allunga: il palco è alto come lo schermo
	   SENZA barra (100lvh), così sotto non resta mai una striscia vuota, e i contenuti stanno nella parte visibile CON
	   la barra (--barra = la differenza, spinge in su titoli, mouse e link). Sul computer lvh = svh: --barra resta 0 */
	@supports (height: 100lvh) {
		html.camst-tappe .camst-palco {
			--barra: calc(100lvh - 100svh);
			height: 100lvh;
		}
	}
	html.camst-tappe .camst-t3 .camst-palco { --k-sotto: 1; }
	/* la curva dei bottoni all'andata (fino all'01/10 .16,1,.3,1: troppo svelti) */
	html.camst-tappe .camst-t4 .camst-palco { --k-bottoni: 1; --e-bottoni: cubic-bezier(.22, 1, .36, 1); }

	html.camst-tappe .camst-pannello {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		background: var(--rosso);
		clip-path: inset(
			calc(100% - (100% - var(--bt, 0px)) * var(--k-sale))
			calc(var(--br, 0px) * var(--k-stringe))
			calc(var(--bb, 0px) * var(--k-stringe))
			calc(var(--bl, 0px) * var(--k-stringe))
		);
	}

	html.camst-tappe .camst-titolo { background: transparent; }

	html.camst-tappe .camst-scena .camst-mouse { display: block; }

	/* il mouse va su e giù per invitare a scorrere (richiesta di Phil, 29/09/2026). Come i nastri: solo CSS, fermo
	   sotto il puntatore e col fuoco, spento con «riduci movimento» (è dentro questa regola); sparisce con l'ultima tappa */
	html.camst-tappe .camst-mouse img { animation: camst-scorri 1.6s ease-in-out infinite; }
	html.camst-tappe .camst-mouse:is(:hover, :focus-visible) img { animation-play-state: paused; }

	@keyframes camst-scorri {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(calc(100% / 7)); }   /* 12 px della tavola su 84 di altezza del mouse */
	}

	/* con l'ultima tappa il mouse sfuma e poi esce anche dal giro del Tab */
	html.camst-tappe .camst-scena.camst-t4 .camst-mouse {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .4s ease, visibility 0s linear .4s;
	}

	/* a fine sequenza senza animazione (Tab sui bottoni) o di nuovo all'inizio (ritorno con «indietro»):
	   in fondo e con .camst-scena, così vince anche sulla regola del mouse qui sopra */
	html.camst-tappe .camst-scena.camst-subito .camst-palco,
	html.camst-tappe .camst-scena.camst-subito .camst-mouse { transition: none; }
}

/* ==========================================================================
   IL TELEFONO (passo 2, 29/09/2026): sotto i 768 px, la tavola 12 adattata. Il Figma non ha una tavola del telefono.
   Dal 30/09/2026 anche qui le tappe (richiesta del committente): prima era ferma, come con «riduci movimento».
   L'invito a scorrere resta il mouse, largo 18 px (quello in proporzione sarebbe 12): un dito al posto del mouse
   è una proposta di Phil in sospeso («per ora non la applichiamo», criticità per il cliente).
   Il blocco dei titoli è la tavola 12 in scala (risposta A1 di Phil): il riquadro rosso prende lo schermo meno 20 px
   per lato, cioè titolo da 40 px a 390, e cresce fino a 48 px, come il computer a 768. Il testo del titolo è largo
   821 px nella tavola; il rosso ai lati è 0,175 em, che qui sarebbe 7 px: si tiene almeno 10 px (guarda.py controlla).
   Loghi a metà della tavola; bottoni uno sopra l'altro, larghi come il più lungo, alti 50 px (i minimi sono sopra).
   ========================================================================== */
@media (max-width: 767px) {
	.camst-scena {
		--u: min(.48px, (100vw - 60px) / 821);
		--v: var(--u);                         /* gli spazi seguono il blocco, non l'altezza dello schermo */
	}

	.camst-scena .camst-titolo { padding-inline: max(10px, .175em); }

	.camst-palco {
		height: 100vh;
		height: 100svh;                        /* l'altezza con la barra dell'indirizzo visibile: niente finisce sotto la barra */
		padding: 24px 20px calc(40px + var(--barra));
	}

	.camst-marchi { column-gap: 50px; }
	.camst-marchio:first-child img { width: 95px; }
	.camst-marchio:last-child img { width: 90px; }
	.camst-marchi__linea { height: 33px; }

	.camst-bottoni {
		display: grid;
		gap: 14px;
	}

	.camst-scena .camst-bottone { justify-content: space-between; }

	.camst-mouse img { width: 18px; }

	/* i due link uno sopra l'altro: affiancati, sotto i ~560 px finirebbero sopra il mouse */
	.camst-legali {
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
		font-size: 14px;
	}
}