/**
 * GOYN — Hero (home)
 *
 * Fonte: src/components/Hero.jsx del progetto React (196 righe), più le regole
 * `.hero-*` in src/styles.css:1789-1800.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * REGOLA DI ISOLAMENTO
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Tutto è dentro `.goyn-hero`, come prescrive assets/css/base.css del child
 * theme. Nessun selettore globale.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * TOKEN RIUSATI, NON RIDEFINITI
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Dal child theme: --goyn-pad, --goyn-wrap (via .goyn-wrap), --goyn-ease,
 * --goyn-dur*, --goyn-petrol-abyss, --goyn-cream, --goyn-peach, e le classi
 * .goyn-display (Anton), .goyn-label (Oswald), .goyn-accent (Playfair),
 * .goyn-eyebrow, .goyn-outline, .goyn-line, .goyn-btn, .goyn-wrap.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * LE COSTANTI LOCALI
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Sono i valori che Hero.jsx usa e che NON hanno un token nella palette. Stanno
 * qui perché appartengono solo all'hero:
 *
 *   --goyn-hero-veil-a   9 22 25   il nero-petrolio del velo diagonale. NON è
 *                                  --goyn-petrol-abyss (12 36 41): è un valore
 *                                  a sé, verificato sull'originale.
 *   --goyn-hero-veil-b   11 30 34  gli stop intermedi dello stesso velo
 *   --goyn-hero-veil-c   6 16 18   la vignettatura radiale
 *   --goyn-hero-rule-w   34px      il filetto accanto al sovratitolo
 *   --goyn-hero-line-*              le durate della cascata d'entrata
 *
 * Come triplette RGB e non come rgba() già composti: le opacità vengono
 * moltiplicate da --goyn-hero-veil, che è un controllo dell'editor.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * UNA SOLA VARIABILE PER IL PARALLASSE
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * hero.js scrive `--goyn-hero-p` (0 in cima alla sezione, 1 quando la sezione è
 * uscita dallo schermo) e NIENTE altro. Discesa della foto, ingrandimento,
 * risalita del testo, dissolvenza e risalita della filigrana sono cinque
 * calc() qui sotto. Nell'originale erano cinque useTransform, cioè cinque
 * valori ricalcolati in JavaScript a ogni frame; qui il frame costa una
 * proprietà personalizzata.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * IL SIPARIO D'APERTURA
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Nell'originale la cascata d'entrata era subordinata alla prop `ready`, che
 * diventava vera alla fine dell'intro. Qui non serve JavaScript: finché il
 * sipario è in scena il body porta `goyn-intro-active` (lo mette chrome.js del
 * tema) e le animazioni dell'hero restano in pausa al fotogramma zero. Quando
 * la classe cade, ripartono da sole. Vedi la sezione 9.
 */

/* ============================================================
   1. Radice, costanti locali, layout
   ============================================================ */

.goyn-hero {
	/* --- costanti locali (vedi l'intestazione) --- */
	--goyn-hero-veil-a: 9 22 25;
	--goyn-hero-veil-b: 11 30 34;
	--goyn-hero-veil-c: 6 16 18;
	--goyn-hero-rule-w: 34px;

	/* --- valori sovrascritti dai controlli dell'editor ---
	   I fallback nelle var() non sono ornamentali: Elementor emette la proprietà
	   solo quando il controllo ha un valore, e nell'anteprima di un documento
	   il cui CSS non è ancora stato generato la variabile può non esistere. */
	--goyn-hero-bg: var(--goyn-petrol-abyss);
	--goyn-hero-text: var(--goyn-cream);
	--goyn-hero-text-muted: rgb(233 229 217 / 0.82);
	--goyn-hero-accent: var(--goyn-peach);
	--goyn-hero-veil: 1;
	--goyn-hero-watermark-opacity: 0.055;
	--goyn-hero-slide: 6000ms;
	--goyn-hero-fade: 1400ms;
	--goyn-hero-shift: 26%;
	--goyn-hero-zoom: 1.18;
	--goyn-hero-text-shift: -38%;
	--goyn-hero-watermark-shift: -30%;
	--goyn-hero-sub-max: 540px;
	--goyn-hero-text-max: 460px;
	--goyn-hero-pad-top: 120px;
	--goyn-hero-pad-bottom: 90px;

	/* Progresso dello scroll, 0..1. Lo scrive hero.js; senza script resta 0 e
	   tutti i calc() del parallasse valgono "nessuno spostamento". */
	--goyn-hero-p: 0;

	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--goyn-hero-min-h, 100svh);
	padding: var(--goyn-hero-pad-top) var(--goyn-pad) var(--goyn-hero-pad-bottom);
	overflow: hidden;
	background-color: var(--goyn-hero-bg);
	color: var(--goyn-hero-text);
	/* Contesto di impilamento proprio: i veli e la filigrana non devono poter
	   finire sopra l'header, che sta a --goyn-z-header. */
	isolation: isolate;
}

/**
 * Ripiego per i browser che non conoscono le unità dinamiche (iOS < 15.4).
 *
 * Serve perché il valore del controllo arriva in `svh`: una var() non valida al
 * momento del calcolo non ricade sulla dichiarazione precedente — ricade su
 * `auto`, cioè un hero alto quanto il suo contenuto. Qui si riscrive l'altezza
 * per intero, accettando di perdere il valore personalizzato su quei browser.
 */
@supports not (height: 100svh) {
	.goyn-hero {
		min-height: 100vh;
		min-height: -webkit-fill-available;
	}
}

/* ============================================================
   2. Gli scatti e il loro parallasse
   ============================================================ */

.goyn-hero__shots {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * Discesa + ingrandimento in un'unica transform.
 *
 * L'ingrandimento è interpolato a mano: `calc(1 + (zoom - 1) * p)` va da 1 a
 * --goyn-hero-zoom mentre p va da 0 a 1. Non esiste un modo dichiarativo di
 * interpolare fra due valori con una variabile, e questo lo fa in una riga.
 */
.goyn-hero--parallax .goyn-hero__shots {
	transform: translate3d(0, calc(var(--goyn-hero-p) * var(--goyn-hero-shift)), 0)
		scale(calc(1 + (var(--goyn-hero-zoom) - 1) * var(--goyn-hero-p)));
	will-change: transform;
}

.goyn-hero__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--goyn-hero-fade) var(--goyn-ease);
}

/* Lo scatto attivo. Il primo lo è già dal server: senza JavaScript si vede una
   fotografia, non un fondo vuoto. */
.goyn-hero__shot.is-active {
	opacity: 1;
}

/*
 * ⚠️ SELETTORE DISCENDENTE, E NON È PIGNOLERIA. `.goyn-hero__img` da solo ha
 *    specificità (0,1,0) e PERDE contro `.goyn-widget img { height: auto }` del
 *    child theme (0,1,1) — e contro `.elementor img`, che dichiara lo stesso.
 *
 *    Conseguenza misurata: l'immagine veniva dimensionata dalle proprie
 *    proporzioni invece che dal riquadro. Su una finestra da 1440x838 la foto era
 *    alta 826,9px (1440 × 918/1600) e restavano 11px di fondo scoperti in basso;
 *    su una finestra alta e stretta la striscia diventa enorme, perché il
 *    riquadro segue `100svh` e l'immagine segue la larghezza. Chi guardava vedeva
 *    "il riquadro che si allunga e l'immagine che resta ferma".
 *
 *    È la stessa trappola annotata per il logo dell'header. Le regole su `<img>`
 *    in questo progetto vanno SEMPRE scritte discendenti.
 */
.goyn-hero .goyn-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Posizione del soggetto, per scatto. Il valore mobile è una variabile a sé
	   e non un secondo valore dello stesso controllo: la media query in fondo
	   commuta fra le due. */
	object-position: var(--goyn-hero-focus, center);
}

/*
 * Ken Burns: la foto entra ingrandita dell'6% e si assesta.
 *
 * L'animazione è dichiarata sullo scatto ATTIVO, non su tutti: così ricomincia
 * da sola ogni volta che hero.js sposta la classe, senza dover forzare un
 * reflow per riavviarla. Dura quanto la permanenza più la dissolvenza, come
 * nell'originale.
 */
.goyn-hero--kenburns .goyn-hero__shot.is-active .goyn-hero__img {
	animation: goyn-hero-kenburns calc(var(--goyn-hero-slide) + var(--goyn-hero-fade)) linear both;
}

@keyframes goyn-hero-kenburns {
	from {
		transform: scale(1.06);
	}

	to {
		transform: scale(1);
	}
}

/* ============================================================
   3. I veli
   ------------------------------------------------------------
   Tre elementi e non tre sfondi sullo stesso nodo: il velo verticale esiste
   solo sotto gli 860px e deve poter comparire da solo.

   Tutte le opacità sono moltiplicate da --goyn-hero-veil, così un solo
   controllo le governa in blocco. ⚠️ Il primo stop del velo diagonale scurisce
   l'angolo in alto a sinistra: è LÌ che cade il logo bianco dell'header
   trasparente. Non è decorazione, è leggibilità.
   ============================================================ */

.goyn-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.goyn-hero__veil--diagonal {
	background-image: linear-gradient(
		100deg,
		rgb(var(--goyn-hero-veil-a) / calc(0.92 * var(--goyn-hero-veil))) 0%,
		rgb(var(--goyn-hero-veil-b) / calc(0.6 * var(--goyn-hero-veil))) 40%,
		rgb(var(--goyn-hero-veil-b) / calc(0.16 * var(--goyn-hero-veil))) 70%,
		rgb(var(--goyn-hero-veil-b) / calc(0.34 * var(--goyn-hero-veil))) 100%
	);
}

.goyn-hero__veil--vignette {
	background-image: radial-gradient(
		120% 90% at 50% 40%,
		rgb(var(--goyn-hero-veil-c) / 0) 55%,
		rgb(var(--goyn-hero-veil-c) / calc(0.45 * var(--goyn-hero-veil))) 100%
	);
}

/* Solo su mobile: l'inquadratura verticale porta il soggetto sotto il testo e
   serve più contrasto in basso. */
.goyn-hero__veil--mobile {
	display: none;
	background-image: linear-gradient(
		180deg,
		rgb(var(--goyn-hero-veil-a) / calc(0.62 * var(--goyn-hero-veil))) 0%,
		rgb(var(--goyn-hero-veil-a) / calc(0.5 * var(--goyn-hero-veil))) 42%,
		rgb(var(--goyn-hero-veil-a) / calc(0.88 * var(--goyn-hero-veil))) 100%
	);
}

/* ============================================================
   4. Filigrana
   ============================================================ */

.goyn-hero__watermark {
	position: absolute;
	right: -4%;
	bottom: -14%;
	z-index: 1;
	font-size: min(30vw, 420px);
	line-height: 0.8;
	letter-spacing: -6px;
	color: var(--goyn-hero-text);
	opacity: var(--goyn-hero-watermark-opacity);
	user-select: none;
	pointer-events: none;
}

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

/* ============================================================
   5. Il blocco di testo
   ============================================================ */

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

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

/*
 * Dissolvenza in uscita: esaurita all'80% del progresso, come nell'originale.
 * clamp() e non min()/max() annidati: senza il vincolo superiore, un p negativo
 * (rimbalzo dello scroll su iOS) darebbe un'opacità maggiore di 1 — innocua ma
 * imprecisa — e senza quello inferiore il testo tornerebbe visibile.
 */
.goyn-hero--text-fade .goyn-hero__copy {
	opacity: clamp(0, calc(1 - var(--goyn-hero-p) / 0.8), 1);
}

/* --- sovratitolo --- */

.goyn-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	color: var(--goyn-hero-accent);
}

.goyn-hero__rule {
	flex: none;
	width: var(--goyn-hero-rule-w);
	height: 1.5px;
	background-color: currentColor;
}

/* --- titolo --- */

.goyn-hero__title {
	margin: 0;
	font-size: clamp(52px, 8.4vw, 140px);
	line-height: 0.86;
}

/* La parola in accento. */
.goyn-hero__accent {
	color: var(--goyn-hero-accent);
}

/*
 * La parola in contorno.
 *
 * `.goyn-outline` del tema figlio mette `color: transparent` e uno stroke a
 * `currentColor`. Qui il colore del profilo va dichiarato per forza: senza
 * questa riga lo stroke erediterebbe il colore trasparente dell'elemento
 * stesso e la parola non si vedrebbe. L'originale usa il colore d'accento.
 */
.goyn-hero__outline {
	-webkit-text-stroke-color: var(--goyn-hero-accent);
}

/* --- sottotitolo e testo --- */

.goyn-hero__sub {
	max-width: var(--goyn-hero-sub-max);
	margin: 26px 0 0;
	font-size: clamp(19px, 2.1vw, 30px);
	line-height: 1.35;
}

.goyn-hero__sub .goyn-hero__accent {
	color: var(--goyn-hero-accent);
}

.goyn-hero__text {
	max-width: var(--goyn-hero-text-max);
	margin: 18px 0 0;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--goyn-hero-text-muted);
}

/* --- bottoni --- */

.goyn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 38px;
}

/* --- statistiche --- */

.goyn-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 46px;
	margin: 54px 0 0;
	padding: 0;
	list-style: none;
}

.goyn-hero__stat-value {
	display: block;
	font-size: 36px;
	line-height: 1;
	color: var(--goyn-hero-accent);
	/* I numeri cambiano larghezza mentre contano: senza cifre a larghezza fissa
	   l'etichetta sotto si sposterebbe a ogni fotogramma. */
	font-variant-numeric: tabular-nums;
}

.goyn-hero__stat-label {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	letter-spacing: 2px;
	color: rgb(233 229 217 / 0.7);
}

/* ============================================================
   6. Indicatore "scorri"
   ------------------------------------------------------------
   Loop decorativo in CSS puro: una barretta che scende dentro un binario alto
   46px. Nell'originale era un motion.div con `repeat: Infinity`.
   ============================================================ */

.goyn-hero__scroll {
	position: absolute;
	bottom: 26px;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	transform: translateX(-50%);
}

.goyn-hero__scroll-label {
	font-size: 10px;
	letter-spacing: 3px;
	color: rgb(233 229 217 / 0.6);
}

.goyn-hero__scroll-track {
	position: relative;
	display: block;
	width: 1px;
	height: 46px;
	overflow: hidden;
	background-color: rgb(233 229 217 / 0.25);
}

.goyn-hero__scroll-bar {
	position: absolute;
	inset: 0 0 auto;
	display: block;
	height: 40%;
	background-color: var(--goyn-hero-accent);
	animation: goyn-hero-scroll 1.9s ease-in-out infinite;
}

@keyframes goyn-hero-scroll {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(250%);
	}
}

/* La dissolvenza in uscita vale anche per l'indicatore: sparisce insieme al
   testo, non resta appeso su una sezione già uscita di scena. */
.goyn-hero--text-fade .goyn-hero__scroll {
	opacity: clamp(0, calc(1 - var(--goyn-hero-p) / 0.8), 1);
}

/* ============================================================
   7. Cascata d'entrata
   ------------------------------------------------------------
   I ritardi sono quelli dell'originale, in millisecondi:

     sovratitolo   100      bottoni         720
     filetto       150      statistiche     850
     righe titolo    0 + 120 per riga
     sottotitolo   500      indicatore      950
     testo         620

   Tutto in @keyframes e nessuno stato iniziale nel CSS di base: se le
   animazioni non partono — JavaScript spento, errore, browser antico — l'hero
   è già al suo posto e visibile. È il requisito "funziona senza JavaScript"
   applicato alle animazioni.
   ============================================================ */

@keyframes goyn-hero-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes goyn-hero-appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

	to {
		width: var(--goyn-hero-rule-w);
	}
}

/* La riga del titolo entra da sotto la maschera di .goyn-line, con la stessa
   rotazione di 2 gradi dell'originale. `both` come fill: durante il ritardo la
   riga è già fuori dalla maschera, e alla fine ci resta dentro. */
@keyframes goyn-hero-line {
	from {
		transform: translateY(110%) rotate(2deg);
	}

	to {
		transform: none;
	}
}

.goyn-hero--entrance .goyn-hero__eyebrow {
	animation: goyn-hero-appear 0.8s var(--goyn-ease) 0.1s both;
}

.goyn-hero--entrance .goyn-hero__rule {
	animation: goyn-hero-rule 0.8s var(--goyn-ease) 0.15s both;
}

.goyn-hero--entrance .goyn-line > span {
	/* --goyn-hero-line è l'indice della riga, scritto dal template: una riga
	   in più non richiede una regola in più. */
	animation: goyn-hero-line 1s var(--goyn-ease) calc(var(--goyn-hero-line, 0) * 120ms) both;
}

.goyn-hero--entrance .goyn-hero__sub {
	animation: goyn-hero-rise 0.9s var(--goyn-ease) 0.5s both;
}

.goyn-hero--entrance .goyn-hero__text {
	animation: goyn-hero-rise 0.9s var(--goyn-ease) 0.62s both;
}

.goyn-hero--entrance .goyn-hero__actions {
	animation: goyn-hero-rise 0.9s var(--goyn-ease) 0.72s both;
}

.goyn-hero--entrance .goyn-hero__stats {
	animation: goyn-hero-appear 1s var(--goyn-ease) 0.85s both;
}

.goyn-hero--entrance .goyn-hero__scroll {
	animation: goyn-hero-appear 1s var(--goyn-ease) 0.95s both;
}

/* ============================================================
   8. Editor di Elementor
   ------------------------------------------------------------
   Nell'editor la cascata d'entrata è solo fastidiosa: si ripete a ogni
   modifica del widget, e chi sta scrivendo un titolo lo vede sfilare via.
   `animation-name: none` spegne le animazioni dichiarate sopra senza toccarne
   i ritardi e senza !important — la specificità di questo selettore (tre
   classi) basta.

   Il parallasse e la rotazione degli scatti non partono affatto: hero.js esce
   subito quando GOYN.isEditor() è vero.
   ============================================================ */

body.elementor-editor-active .goyn-hero--entrance .goyn-hero__copy > *,
body.elementor-editor-preview .goyn-hero--entrance .goyn-hero__copy > *,
body.elementor-editor-active .goyn-hero--entrance .goyn-line > span,
body.elementor-editor-preview .goyn-hero--entrance .goyn-line > span,
body.elementor-editor-active .goyn-hero--entrance .goyn-hero__rule,
body.elementor-editor-preview .goyn-hero--entrance .goyn-hero__rule,
body.elementor-editor-active .goyn-hero--entrance .goyn-hero__scroll,
body.elementor-editor-preview .goyn-hero--entrance .goyn-hero__scroll {
	animation-name: none;
}

/* ============================================================
   9. Sipario d'apertura
   ------------------------------------------------------------
   Finché il sipario è in scena il body porta `goyn-intro-active` (chrome.js del
   tema). Le animazioni dell'hero restano in pausa al fotogramma zero e
   ripartono quando la classe cade: è l'equivalente esatto della prop `ready`
   dell'originale, senza una riga di JavaScript.

   L'elenco è esplicito e non un `*`: mettere in pausa "tutto" dentro l'hero
   colpirebbe anche animazioni che un domani potrebbero non doversi fermare.
   ============================================================ */

body.goyn-intro-active .goyn-hero--entrance .goyn-hero__eyebrow,
body.goyn-intro-active .goyn-hero--entrance .goyn-hero__rule,
body.goyn-intro-active .goyn-hero--entrance .goyn-line > span,
body.goyn-intro-active .goyn-hero--entrance .goyn-hero__sub,
body.goyn-intro-active .goyn-hero--entrance .goyn-hero__text,
body.goyn-intro-active .goyn-hero--entrance .goyn-hero__actions,
body.goyn-intro-active .goyn-hero--entrance .goyn-hero__stats,
body.goyn-intro-active .goyn-hero--entrance .goyn-hero__scroll,
body.goyn-intro-active .goyn-hero--kenburns .goyn-hero__shot.is-active .goyn-hero__img {
	animation-play-state: paused;
}

/* ============================================================
   10. Responsive
   ------------------------------------------------------------
   Le tre soglie del progetto (1080 / 860 / 560) sono documentate in
   tokens.css del tema figlio. Le spaziature verticali NON sono qui: arrivano
   dai controlli responsive di Elementor, che usa gli stessi breakpoint.
   ============================================================ */

@media (max-width: 860px) {
	/* Terzo velo e inquadratura mobile: la foto verticale porta il soggetto
	   dove sta il testo. */
	.goyn-hero__veil--mobile {
		display: block;
	}

	.goyn-hero__img {
		object-position: var(--goyn-hero-focus-mobile, var(--goyn-hero-focus, center));
	}

	/* L'indicatore "scorri" non serve su un telefono: si scorre per istinto, e
	   quello spazio è meglio darlo al testo. Come nell'originale. */
	.goyn-hero__scroll {
		display: none;
	}

	.goyn-hero__sub {
		margin-top: 18px;
	}

	.goyn-hero__text {
		font-size: 15.5px;
	}

	.goyn-hero__stats {
		gap: 14px 26px;
		margin-top: 34px;
	}

	.goyn-hero__stat-value {
		font-size: 28px;
	}
}

@media (max-width: 560px) {
	.goyn-hero__eyebrow {
		margin-bottom: 16px;
	}

	.goyn-hero__actions {
		margin-top: 28px;
	}
}

/* ============================================================
   11. Riduzione del movimento
   ------------------------------------------------------------
   Il grosso lo fa già base.css del tema figlio, che porta a 0,01ms le durate
   dentro `.goyn-widget` — le animazioni con fill `both` finiscono quindi
   immediatamente al loro stato finale, che è quello visibile.

   Qui si aggiungono le due cose che quella regola non copre: il loop
   dell'indicatore, che non deve semplicemente accelerare ma sparire, e il
   parallasse, che hero.js non attiva affatto in questo caso.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-hero__scroll-bar {
		animation: none;
		transform: translateY(60%);
	}

	.goyn-hero--kenburns .goyn-hero__shot.is-active .goyn-hero__img {
		animation: none;
		transform: none;
	}
}