/*
 * GOYN — Manifesto
 *
 * Fonte: src/components/Manifesto.jsx e la classe .grid-manifesto di
 * src/styles.css del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-manifesto`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-texture--petrol`, `.goyn-veil`, `.goyn-line`,
 * `.goyn-display`, `.goyn-accent`.
 *
 * DA reveal.css: `.is-armed` / `.is-in`, `data-goyn-rise`,
 * `data-goyn-rise-line` e `data-goyn-rise-wipe` (la tendina della fotografia).
 *
 * DA parallax.js: `--goyn-parallax-p`.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0` o da un ritaglio.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Fondo, velo, filigrana
 *   3. La griglia a tre colonne
 *   4. La fotografia
 *   5. Titolo e paragrafo — e il `display: contents`
 *   6. Entrate: le misure di questa sezione
 *   7. Responsive
 *   8. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ------------------------------------------------------------
   È una FASCIA, non una sezione a schermo pieno: altezza fluida fra un minimo
   e un massimo passando per il 52% dell'altezza della finestra, come
   nell'originale (`clamp(380px, 52vh, 560px)`). Scorre col resto della pagina,
   senza pin e senza altezza intera.
   ============================================================ */

.goyn-manifesto {
	--goyn-mf-bg: var(--goyn-petrol, #1f535d);
	--goyn-mf-title: var(--goyn-cream, #e9e5d9);
	--goyn-mf-accent: var(--goyn-peach, #e8c39f);
	--goyn-mf-text: var(--goyn-cream-85, rgba(233, 229, 217, 0.85));
	--goyn-mf-watermark: var(--goyn-cream-05, rgba(233, 229, 217, 0.05));

	--goyn-mf-veil-from: rgba(22, 62, 70, 0.72);
	--goyn-mf-veil-to: rgba(22, 62, 70, 0.86);
	--goyn-mf-texture-opacity: 1;

	--goyn-mf-photo-position: center;
	--goyn-mf-photo-veil-from: rgba(22, 62, 70, 0.2);
	--goyn-mf-photo-veil-to: rgba(22, 62, 70, 0.55);
	--goyn-mf-photo-shift: 12%;
	--goyn-mf-photo-h-mobile: 44vh;

	--goyn-mf-mark-from: 4%;
	--goyn-mf-mark-shift: 20%;

	--goyn-mf-band-min: 380px;
	--goyn-mf-band-max: 560px;
	/* ⚠️ Le tre frazioni includono l'unità `fr` nel VALORE della variabile e non
	   nella regola. `calc(1.12 * 1fr)` è invalido — `fr` non è una lunghezza e
	   calc() non lo accetta — e una `grid-template-columns` invalida viene
	   scartata per intero: la griglia torna a una colonna e le tre celle si
	   impilano. Verificato in pagina: la fascia sembrava in versione mobile su
	   uno schermo da 1440. */
	--goyn-mf-col-photo: 1.12fr;
	--goyn-mf-col-title: 1.6fr;
	--goyn-mf-col-text: 0.7fr;
	--goyn-mf-line-stagger: 120ms;

	/* Il progresso lo scrive parallax.js. 0.5 è il comportamento senza
	   JavaScript: tutto a metà corsa, cioè fermo al centro. */
	--goyn-parallax-p: 0.5;

	position: relative;
	height: clamp(var(--goyn-mf-band-min), 52vh, var(--goyn-mf-band-max));
	overflow: hidden;
	color: var(--goyn-mf-title);
	background-color: var(--goyn-mf-bg);
}

/* ============================================================
   2. Fondo, velo, filigrana
   ------------------------------------------------------------
   ⚠️ La texture è a PIENA opacità, non a 0.3 come negli Ingredienti: qui
      l'originale la lascia intera e la smorza soltanto col velo sopra. Sono due
      tarature diverse dello stesso fondo.

   La specificità ripete `.goyn-manifesto` per battere `.goyn-texture--petrol`
   del tema, che imposta `opacity: 0.3` con la stessa specificità di una classe.
   ============================================================ */

.goyn-manifesto .goyn-manifesto__texture {
	opacity: var(--goyn-mf-texture-opacity);
}

.goyn-manifesto__veil {
	background-image: linear-gradient(180deg, var(--goyn-mf-veil-from), var(--goyn-mf-veil-to));
}

/*
 * La filigrana. `bottom: -18%` la fa sbordare in basso di proposito: si legge
 * come una texture tagliata dal bordo, non come una parola posata dentro la
 * fascia.
 *
 * `user-select: none` non è pignoleria: trascinando il cursore per selezionare
 * il titolo si selezionerebbe anche una parola invisibile, e il testo copiato
 * conterrebbe un "GOYN" che nessuno ha visto.
 */
.goyn-manifesto__watermark {
	position: absolute;
	bottom: -18%;
	left: 0;
	font-size: min(20vw, 280px);
	line-height: 0.8;
	letter-spacing: -4px;
	color: var(--goyn-mf-watermark);
	user-select: none;
	pointer-events: none;
}

/*
 * La corsa orizzontale è ASIMMETRICA nell'originale: da +4% a -16%. Si esprime
 * come partenza meno progresso per corsa, che è la formula letterale — non come
 * uno scostamento dal centro, che nasconderebbe i due valori di progetto.
 */
.goyn-manifesto--parallax .goyn-manifesto__watermark {
	transform: translate3d(
		calc(var(--goyn-mf-mark-from) - var(--goyn-parallax-p) * var(--goyn-mf-mark-shift)),
		0,
		0
	);
	will-change: transform;
}

/* ============================================================
   3. La griglia a tre colonne
   ------------------------------------------------------------
   Proporzioni dell'originale: 1.12 foto / 1.6 titolo / 0.7 paragrafo. Sono
   variabili perché tre controlli le regolano.

   `align-items: stretch` è necessario alla foto, che deve arrivare a filo dei
   bordi della fascia: con `center` lascerebbe due strisce di fondo.
   ============================================================ */

.goyn-manifesto__grid {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(0, var(--goyn-mf-col-photo))
		minmax(0, var(--goyn-mf-col-title))
		minmax(0, var(--goyn-mf-col-text));
	align-items: stretch;
	height: 100%;
}

/* ============================================================
   4. La fotografia
   ------------------------------------------------------------
   Due livelli con due compiti distinti: quello esterno porta il ritaglio che si
   scopre dal basso, quello interno scorre col parallasse. Su un solo elemento
   `clip-path` e `transform` convivrebbero, ma il ritaglio si muoverebbe con la
   foto e la tendina si vedrebbe scivolare.

   Lo sconfinamento verticale è ricavato dalla corsa e non fisso: se il cliente
   porta il parallasse da 12% a 30%, un margine del 6% lascerebbe scoperto il
   bordo a fine corsa.
   ============================================================ */

.goyn-manifesto__photo {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.goyn-manifesto__photo-inner {
	position: absolute;
	right: 0;
	left: 0;
	top: calc(var(--goyn-mf-photo-shift) / -2);
	bottom: calc(var(--goyn-mf-photo-shift) / -2);
}

.goyn-manifesto .goyn-manifesto__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--goyn-mf-photo-position);
}

/* La foto scorre verso l'ALTO mentre la pagina scende — il verso opposto a
   quello della filigrana, che è ciò che dà profondità alla fascia. */
.goyn-manifesto--parallax .goyn-manifesto__photo-inner {
	transform: translate3d(0, calc((0.5 - var(--goyn-parallax-p)) * var(--goyn-mf-photo-shift)), 0);
	will-change: transform;
}

.goyn-manifesto__photo-veil {
	background-image: linear-gradient(
		90deg,
		var(--goyn-mf-photo-veil-from),
		var(--goyn-mf-photo-veil-to)
	);
}

/* ============================================================
   5. Titolo e paragrafo — e il `display: contents`
   ------------------------------------------------------------
   `display: contents` fa sparire il contenitore dalla formattazione: i suoi
   figli diventano figli della griglia, cioè la seconda e la terza cella. Sotto
   gli 860px torna un blocco normale con il suo padding, e le due impaginazioni
   dell'originale — due componenti React distinti — si ottengono con un markup
   solo.

   ⚠️ Un contenitore `display: contents` non può avere padding, fondo né
      trasformazioni: sono proprietà che non hanno un riquadro su cui applicarsi.
      Se serviranno, andranno sui figli — non aggiungere `data-goyn-rise` qui.
   ============================================================ */

.goyn-manifesto__copy {
	display: contents;
}

.goyn-manifesto__title-cell {
	display: flex;
	align-items: center;
	padding: 0 clamp(22px, 4vw, 56px);
}

.goyn-manifesto__title {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 58px);
	line-height: 0.94;
}

.goyn-manifesto__line--accent {
	color: var(--goyn-mf-accent);
}

.goyn-manifesto__text {
	align-self: center;
	margin: 0;
	padding: 0 var(--goyn-pad, clamp(22px, 5vw, 80px)) 0 0;
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.45;
	color: var(--goyn-mf-text);
}

/* Avviso mostrato solo nell'editor quando la fascia è vuota. */
.goyn-manifesto__notice {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   6. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Valori dell'originale: la fotografia si scopre in 1s, le righe del titolo
   entrano a 120ms l'una dall'altra — un passo più lento del solito, perché sono
   tre frasi da leggere e non un titolo unico — e il paragrafo arriva dopo, col
   ritardo scritto nel template.
   ============================================================ */

.goyn-manifesto__photo {
	--goyn-rise-dur: 1s;
}

.goyn-manifesto .goyn-line > span[data-goyn-rise-line] {
	--goyn-rise-dur: 1s;
	--goyn-delay: calc(var(--goyn-mf-line, 0) * var(--goyn-mf-line-stagger));
}

.goyn-manifesto__text {
	--goyn-rise-dur: 0.9s;
	--goyn-rise-shift: 24px;
}

/* ============================================================
   7. Responsive
   ------------------------------------------------------------
   Sotto gli 860px: foto sopra, testo sotto. Cade l'altezza fissa della fascia —
   in colonna serve tutto lo spazio che il contenuto chiede — e la foto prende
   un'altezza sua.
   ============================================================ */

@media (max-width: 860px) {
	.goyn-manifesto {
		height: auto;
	}

	.goyn-manifesto__grid {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	/* Da qui il contenitore esiste di nuovo, e con lui il suo padding. */
	.goyn-manifesto__copy {
		display: block;
		position: relative;
		padding: 36px var(--goyn-pad, 20px) 52px;
	}

	.goyn-manifesto__photo {
		/* `min-height` oltre all'altezza: su un telefono in orizzontale il 44%
		   dell'altezza è una striscia di poche decine di pixel. */
		height: var(--goyn-mf-photo-h-mobile);
		min-height: 250px;
	}

	.goyn-manifesto__title-cell {
		display: block;
		padding: 0;
	}

	.goyn-manifesto__title {
		font-size: clamp(29px, 8.4vw, 46px);
		line-height: 0.98;
	}

	.goyn-manifesto__text {
		margin: 22px 0 0;
		padding: 0;
		font-size: clamp(17px, 4.4vw, 21px);
	}

	/* Più grande e più invadente: in colonna la fascia è alta e la filigrana,
	   alla misura del desktop, si perderebbe in un angolo. */
	.goyn-manifesto__watermark {
		font-size: min(46vw, 300px);
	}
}

/* ============================================================
   8. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate le annulla reveal.css. Qui i due parallassi, che con le durate
   azzerate dal tema resterebbero fermi a metà corsa — cioè giusti — ma
   continuerebbero a essere ricalcolati: parallax.js non si iscrive nemmeno allo
   scroll in quel caso, e queste regole coprono il cambio di preferenza a pagina
   già aperta.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-manifesto--parallax .goyn-manifesto__watermark,
	.goyn-manifesto--parallax .goyn-manifesto__photo-inner {
		transform: none;
	}
}