/*
 * GOYN — Testata di pagina
 *
 * Fonte: src/components/PageHero.jsx del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-page-hero`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-texture--petrol`, `.goyn-veil`, `.goyn-line`,
 * `.goyn-outline`, `.goyn-eyebrow`, `.goyn-display`, `.goyn-accent`,
 * `.goyn-wrap`, `.goyn-label`.
 *
 * DA reveal.css: `.is-armed` / `.is-in`, `data-goyn-rise`,
 * `data-goyn-rise-line`. DA parallax.js: `--goyn-parallax-p`, con l'offset
 * `start start | end start` chiesto dal template.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Fondo: fotografia, texture, velo, filigrana
 *   3. Il blocco di testo e il suo parallasse
 *   4. Briciole di pane
 *   5. Sovratitolo e filetto
 *   6. Titolo e testo
 *   7. Entrate: le misure di questa sezione
 *   8. Responsive
 *   9. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ------------------------------------------------------------
   `min-height` fluida fra due estremi passando per il 62% dell'altezza della
   finestra: circa metà dell'hero della home, perché qui sotto il contenuto
   comincia subito.

   `align-items: flex-end` allinea il testo in basso: la testata è una fascia
   con la scritta appoggiata al bordo inferiore, non un blocco centrato.
   ============================================================ */

.goyn-page-hero {
	--goyn-pg-bg: var(--goyn-petrol-abyss, #0c2429);
	--goyn-pg-accent: var(--goyn-peach, #e8c39f);
	--goyn-pg-title: var(--goyn-cream, #e9e5d9);
	--goyn-pg-text: var(--goyn-cream-85, rgba(233, 229, 217, 0.86));
	--goyn-pg-crumb: var(--goyn-cream-50, rgba(233, 229, 217, 0.55));
	--goyn-pg-watermark: var(--goyn-cream-05, rgba(233, 229, 217, 0.05));

	--goyn-pg-veil-from: rgba(9, 22, 25, 0.94);
	--goyn-pg-veil-mid: rgba(11, 30, 34, 0.72);
	--goyn-pg-veil-to: rgba(11, 30, 34, 0.42);
	--goyn-pg-texture-opacity: 0.25;

	--goyn-pg-shot-position: center;
	--goyn-pg-shot-shift: 22%;
	--goyn-pg-shot-zoom: 1.14;
	--goyn-pg-text-shift: -28%;
	--goyn-pg-mark-shift: -26%;

	--goyn-pg-min-h: 440px;
	--goyn-pg-max-h: 640px;
	--goyn-pg-pad-top: 150px;
	--goyn-pg-pad-bottom: 64px;
	--goyn-pg-text-max: 560px;
	--goyn-pg-outline-w: 1.6px;
	--goyn-pg-line-stagger: 100ms;

	/* Il progresso lo scrive parallax.js. Qui 0 e non 0.5: con l'offset di una
	   testata, "pagina in cima" è progresso ZERO, ed è lo stato in cui la si
	   vede senza JavaScript. */
	--goyn-parallax-p: 0;

	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(var(--goyn-pg-min-h), 62vh, var(--goyn-pg-max-h));
	overflow: hidden;
	padding: var(--goyn-pg-pad-top) var(--goyn-pad, clamp(22px, 5vw, 80px)) var(--goyn-pg-pad-bottom);
	color: var(--goyn-pg-title);
	background-color: var(--goyn-pg-bg);
}

/* ============================================================
   2. Fondo: fotografia, texture, velo, filigrana
   ------------------------------------------------------------
   Quattro livelli, nell'ordine in cui si sovrappongono. La fotografia si muove
   e si ingrandisce; texture e velo stanno fermi; la filigrana si muove in
   verticale nel verso opposto al testo.
   ============================================================ */

.goyn-page-hero__shot {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * ⚠️ Regola discendente: `.goyn-widget img { height: auto }` del tema e
 *    `.elementor img` hanno specificità (0,1,1) e batterebbero una classe sola —
 *    l'immagine verrebbe dimensionata dalle sue proporzioni e lascerebbe una
 *    striscia di fondo scoperta. È l'errore già pagato sull'hero della home.
 */
.goyn-page-hero .goyn-page-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--goyn-pg-shot-position);
}

/*
 * La fotografia scende E si ingrandisce. Le due trasformazioni stanno nella
 * stessa dichiarazione: l'ingrandimento non è estetico, è ciò che dà alla foto
 * il margine per scendere senza scoprire il fondo in cima.
 */
.goyn-page-hero--parallax .goyn-page-hero__shot {
	transform:
		translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-pg-shot-shift)), 0)
		scale(calc(1 + (var(--goyn-pg-shot-zoom) - 1) * var(--goyn-parallax-p)));
	will-change: transform;
}

/* La specificità ripete la classe della sezione per battere
   `.goyn-texture--petrol` del tema, che imposta `opacity: 0.3`. */
.goyn-page-hero .goyn-page-hero__texture {
	opacity: var(--goyn-pg-texture-opacity);
}

/* Senza fotografia la texture è l'unico fondo e va vista: 0,6 come
   nell'originale. Non è il controllo del pannello — quello vale per il caso con
   foto — ma un valore proprio di questo caso. */
.goyn-page-hero--flat .goyn-page-hero__texture {
	opacity: 0.6;
}

/*
 * Il velo: quasi opaco a sinistra, dove sta il testo, e via via trasparente
 * verso destra, dove si vede la fotografia. È ciò che rende leggibile un titolo
 * chiaro sopra uno scatto qualunque.
 */
.goyn-page-hero__veil {
	background-image: linear-gradient(
		90deg,
		var(--goyn-pg-veil-from) 0%,
		var(--goyn-pg-veil-mid) 46%,
		var(--goyn-pg-veil-to) 100%
	);
}

/*
 * La filigrana sborda a destra e in basso di proposito: si legge come una
 * texture tagliata dal bordo, non come una parola posata dentro la testata.
 *
 * `user-select: none`: trascinando il cursore sul titolo si selezionerebbe
 * anche una parola invisibile, e il testo copiato conterrebbe un "GOYN" che
 * nessuno ha visto.
 */
.goyn-page-hero__watermark {
	position: absolute;
	right: -3%;
	bottom: -20%;
	font-size: min(26vw, 360px);
	line-height: 0.8;
	letter-spacing: -6px;
	color: var(--goyn-pg-watermark);
	user-select: none;
	pointer-events: none;
}

.goyn-page-hero--parallax .goyn-page-hero__watermark {
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-pg-mark-shift)), 0);
	will-change: transform;
}

/* ============================================================
   3. Il blocco di testo e il suo parallasse
   ------------------------------------------------------------
   Il testo sale più veloce della pagina e sbiadisce. La dissolvenza finisce
   all'85% della corsa e non al 100%: così il blocco è già invisibile prima di
   toccare il bordo dello schermo, invece di sparire proprio mentre esce.
   ============================================================ */

.goyn-page-hero__copy {
	position: relative;
	z-index: 2;
	width: 100%;
}

.goyn-page-hero--parallax .goyn-page-hero__copy {
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-pg-text-shift)), 0);
	will-change: transform;
}

/*
 * `1 - p / 0.85`, limitato fra 0 e 1: è la traduzione di
 * `useTransform(p, [0, 0.85], [1, 0])`. Il `clamp` serve perché oltre 0,85 la
 * formula darebbe un valore negativo, che l'opacità non accetta.
 */
.goyn-page-hero--text-fade .goyn-page-hero__copy {
	opacity: clamp(0, calc(1 - var(--goyn-parallax-p) / 0.85), 1);
}

/* ============================================================
   4. Briciole di pane
   ------------------------------------------------------------
   Le barre di separazione sono un `::before` sulle voci tranne la prima: nel
   markup non c'è nessun carattere da leggere, quindi un lettore di schermo
   annuncia tre voci e non "Home barra Prodotti barra Catalogo".
   ============================================================ */

.goyn-page-hero__crumbs {
	margin-bottom: 18px;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--goyn-pg-crumb);
}

.goyn-page-hero__crumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-page-hero__crumb + .goyn-page-hero__crumb::before {
	content: '/';
	margin: 0 8px;
	/* `currentColor` a metà opacità: la barra non deve pesare come le voci. */
	opacity: 0.6;
}

.goyn-page-hero__crumb a {
	color: inherit;
	text-decoration: none;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-page-hero__crumb a:hover,
.goyn-page-hero__crumb a:focus-visible {
	color: var(--goyn-pg-accent);
}

.goyn-page-hero__crumb.is-current {
	color: var(--goyn-pg-accent);
}

/* ============================================================
   5. Sovratitolo e filetto
   ------------------------------------------------------------
   Il filetto si allunga da zero all'apertura della pagina. È un'animazione di
   `width` e non di `transform: scaleX`: su un elemento alto 1,5px lo scaleX
   sfoca il bordo, e qui la larghezza finale è nota (34px), quindi non c'è il
   costo di un reflow imprevedibile.
   ============================================================ */

.goyn-page-hero__eyebrow-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}

.goyn-page-hero__rule {
	width: 34px;
	height: 1.5px;
	background-color: var(--goyn-pg-accent);
}

.goyn-page-hero__eyebrow {
	color: var(--goyn-pg-accent);
}

/* ============================================================
   6. Titolo e testo
   ============================================================ */

.goyn-page-hero__title {
	margin: 0;
	font-size: clamp(44px, 7vw, 116px);
	line-height: 0.88;
	color: var(--goyn-pg-title);
}

.goyn-page-hero__accent {
	color: var(--goyn-pg-accent);
}

/* `.goyn-outline` del tema porta il contorno; qui colore e spessore. */
.goyn-page-hero__outline {
	-webkit-text-stroke: var(--goyn-pg-outline-w) var(--goyn-pg-accent);
}

.goyn-page-hero__text {
	max-width: var(--goyn-pg-text-max);
	margin: 22px 0 0;
	font-size: clamp(18px, 1.9vw, 26px);
	line-height: 1.38;
	color: var(--goyn-pg-text);
}

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

/* ============================================================
   7. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Valori dell'originale: briciole 16px di salita, righe del titolo a 100ms
   l'una dall'altra, testo 250ms di ritardo. Il filetto ha un'animazione sua.
   ============================================================ */

.goyn-page-hero [data-goyn-rise] {
	--goyn-rise-shift: 16px;
	--goyn-rise-dur: 0.9s;
}

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

@keyframes goyn-pg-rule {
	from {
		width: 0;
	}

	to {
		width: 34px;
	}
}

/*
 * Il filetto si aggancia allo stesso interruttore delle entrate, come previsto
 * dalla nota in testa a reveal.css per gli effetti propri di una sezione.
 * `both` come fill: durante il ritardo la larghezza è già zero.
 */
[data-goyn-scene].is-armed .goyn-page-hero__rule {
	width: 0;
}

[data-goyn-scene].is-armed.is-in .goyn-page-hero__rule {
	animation: goyn-pg-rule 0.8s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.15s both;
}

/* ============================================================
   8. Responsive
   ============================================================ */

@media (max-width: 860px) {
	.goyn-page-hero {
		/* L'header fisso è più basso su mobile: 120px bastano. */
		--goyn-pg-pad-top: 120px;
		--goyn-pg-pad-bottom: 48px;
	}

	/* Più grande e più invadente: su una colonna stretta la filigrana alla misura
	   del desktop si perderebbe nell'angolo. */
	.goyn-page-hero__watermark {
		font-size: min(52vw, 320px);
	}
}

/* ============================================================
   9. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate generali le annulla reveal.css; qui il filetto, che è proprio di
   questa sezione, e i tre parallassi. parallax.js non si aggancia nemmeno con
   la preferenza attiva: queste regole coprono il cambio a pagina già aperta,
   con la variabile dell'ultimo frame ancora scritta.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	[data-goyn-scene].is-armed .goyn-page-hero__rule {
		width: 34px;
	}

	.goyn-page-hero--parallax .goyn-page-hero__shot,
	.goyn-page-hero--parallax .goyn-page-hero__watermark,
	.goyn-page-hero--parallax .goyn-page-hero__copy {
		transform: none;
	}

	.goyn-page-hero--text-fade .goyn-page-hero__copy {
		opacity: 1;
	}
}