/*
 * GOYN — Pagina Chi siamo
 *
 * Fonte: `AboutHero`, `AboutValues` e `AboutStory` in src/components/, con le
 * classi `.about-*` di src/styles.css (righe 986-1037 e i due blocchi
 * responsive).
 *
 * Un foglio per le tre sezioni della pagina, come per gli ingredienti, la
 * filosofia e la scheda prodotto: condividono la scala dei colori sul petrol e
 * nessuna si usa da sola. Le altre due sezioni della pagina — fascia scorrevole
 * e newsletter — sono widget già esistenti con i loro fogli.
 *
 * ⚠️ La testata di questa pagina è la QUARTA del progetto e non è nessuna delle
 *    altre tre. `goyn_page_hero` tiene la fotografia in una colonna accanto al
 *    testo su fondo crema; `goyn_ing_hero` e `goyn_filo_hero` la usano come
 *    fondo di tutta la fascia. Questa è a DUE COLONNE su fondo petrol abisso —
 *    fotografia a sinistra, racconto a destra — e il fondo scuro arriva fin
 *    sotto la header fissa, che è crema. Quattro impaginazioni, quattro widget.
 *
 * ISOLAMENTO: nessun selettore globale. Prefissi `goyn-about-hero`,
 * `goyn-about-values`, `goyn-about-story`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-line`, `.goyn-display`, `.goyn-label`,
 * `.goyn-eyebrow`, `.goyn-accent`, `.goyn-outline`, `.goyn-wrap`,
 * `.goyn-texture--petrol`, `.goyn-veil--petrol`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`, `data-goyn-rise-wipe`.
 * DA parallax.js: `--goyn-parallax-p`.
 * DA words.js: `--goyn-words-p`, `--goyn-word-i`, `--goyn-words-n`.
 * DA count.js: nulla di CSS — il numero è testo e il valore vero sta nel markup.
 *
 * INDICE
 *   1. Testata a due colonne
 *   2. I quattro valori
 *   3. Il metodo: intro, quattro passi, quattro numeri
 *   4. Entrate
 *   5. Responsive
 *   6. prefers-reduced-motion
 */

/* ============================================================
   1. Testata a due colonne
   ============================================================ */

.goyn-about-hero {
	--goyn-ah-bg: var(--goyn-petrol-abyss, #0c2429);
	--goyn-ah-title: var(--goyn-cream, #e9e5d9);
	--goyn-ah-accent: var(--goyn-peach, #e8c39f);
	--goyn-ah-text: rgba(233, 229, 217, 0.84);
	--goyn-ah-outline-w: 1.6px;

	/* Le due colonne dell'originale: `1fr` e `1.02fr`, la seconda appena più larga. */
	--goyn-ah-col-photo: 1fr;
	--goyn-ah-col-copy: 1.02fr;

	/*
	 * L'altezza minima resta un `clamp()`: il controllo del pannello è il TETTO,
	 * cioè il valore su uno schermo grande, e il termine centrale (82vh) è quello
	 * che decide la fascia su ogni finestra normale. Stessa forma delle altre tre
	 * testate.
	 */
	--goyn-ah-min: 860px;

	--goyn-ah-texture-op: 0.55;
	--goyn-ah-text-max: 460px;
	--goyn-ah-lead-max: 440px;

	/* Le tre corse del parallasse, tutte dichiarate dall'originale. */
	--goyn-ah-run: 18%;
	--goyn-ah-zoom: 1.12;
	--goyn-ah-copy-run: 16%;
	--goyn-ah-mark-run: 24%;

	/*
	 * Il progresso scritto da parallax.js. Zero è il caso senza JavaScript:
	 * fotografia, testo e filigrana in cima alla propria corsa, cioè esattamente
	 * come si vedono al caricamento.
	 */
	--goyn-parallax-p: 0;

	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns:
		minmax(0, var(--goyn-ah-col-photo))
		minmax(0, var(--goyn-ah-col-copy));
	align-items: stretch;
	min-height: clamp(560px, 82vh, var(--goyn-ah-min));
	background-color: var(--goyn-ah-bg);
}

/*
 * La texture del tema arriva con opacità 0,3; qui l'originale la vuole a 0,55.
 * Selettore discendente (0,2,0) per battere `.goyn-texture--petrol` (0,1,0).
 */
.goyn-about-hero .goyn-texture {
	opacity: var(--goyn-ah-texture-op);
}

/*
 * La filigrana. Non è un testo da leggere: è crema al 5% su fondo petrol, e
 * sborda a destra e 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 prenderebbe anche una parola invisibile, e il testo copiato
 * conterrebbe un "GOYN" che nessuno ha visto. Stessa regola della filigrana del
 * manifesto.
 */
.goyn-about-hero__watermark {
	position: absolute;
	right: -4%;
	bottom: -22%;
	font-size: min(26vw, 360px);
	line-height: 0.8;
	letter-spacing: -6px;
	color: var(--goyn-cream-05, rgba(233, 229, 217, 0.05));
	user-select: none;
	pointer-events: none;
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-ah-mark-run) * -1), 0);
	will-change: transform;
}

/* ---------- la colonna della fotografia ---------- */

.goyn-about-hero__photo {
	position: relative;
	overflow: hidden;
	/* La tendina d'entrata dell'originale: 1,1s con 0,1 di ritardo. */
	--goyn-rise-dur: 1.1s;
	--goyn-delay: 100ms;
}

/*
 * ⚠️ Due livelli, e non è una ridondanza: la tendina `clip-path` sta sul riquadro
 *    qui sopra, il parallasse e l'ingrandimento su QUESTO figlio. Un elemento con
 *    un'animazione di reveal.css non può ricevere altre trasformazioni — il
 *    perché sta in testa a reveal.css, ed è misurato in due punti del progetto.
 *
 * Il livello è più alto del riquadro (`inset: -9% 0`, il valore dell'originale)
 * così scendendo non scopre il bordo; il resto lo taglia l'`overflow`.
 *
 * ⚠️ Qui l'allargamento è VOLUTO e viene dall'originale — non è l'errore
 *    corretto sulla testata della filosofia. Là il 16% l'avevo aggiunto io «per
 *    prudenza» e falsava la corsa; qui il 9% è nel sorgente React
 *    (`inset: '-9% 0'` in AboutHero.jsx) insieme al 18% di corsa, quindi
 *    riprodurre l'uno senza l'altro darebbe una corsa diversa da quella dell'app.
 *    La colonna, a differenza di una testata a tutta fascia, ha un bordo destro
 *    interno alla pagina: scoprirlo si vedrebbe davvero.
 */
.goyn-about-hero__shift {
	position: absolute;
	inset: -9% 0;
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-ah-run)), 0)
		scale(calc(1 + (var(--goyn-ah-zoom) - 1) * var(--goyn-parallax-p)));
	will-change: transform;
}

/*
 * Il velo della colonna. Non è nessuna delle varianti di `shared.css`: quelle
 * scuriscono da un lato solo, questo scurisce i DUE bordi e libera il centro —
 * la fotografia confina col fondo petrol a sinistra e col racconto a destra, e
 * l'attacco si vedrebbe da entrambe le parti. Taratura dell'originale.
 */
.goyn-about-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		rgba(12, 36, 41, 0.34),
		rgba(12, 36, 41, 0.06) 45%,
		rgba(12, 36, 41, 0.42)
	);
}

/* ---------- la colonna del racconto ---------- */

.goyn-about-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(120px, 12vh, 170px) clamp(28px, 5vw, 96px) clamp(56px, 7vh, 96px);
	/* Sale scorrendo, al contrario della fotografia: da qui il segno meno. */
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-ah-copy-run) * -1), 0);
	will-change: transform;
}

.goyn-about-hero__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

/*
 * Il filetto che si allunga. Nell'originale è una `width` animata da 0 a 34px;
 * qui la larghezza finale è la sua misura di riposo e l'animazione vive nella
 * sezione 4 — così senza JavaScript il filetto c'è, disegnato per intero.
 */
.goyn-about-hero__dash {
	width: 34px;
	height: 1.5px;
	background-color: var(--goyn-ah-accent);
}

.goyn-about-hero__eyebrow {
	color: var(--goyn-ah-accent);
}

.goyn-about-hero__title {
	margin: 0;
	font-size: clamp(40px, 4.9vw, 84px);
	line-height: 0.9;
	color: var(--goyn-ah-title);
}

/* La riga in pesca piena e quella col solo contorno: le due varianti di riga. */
.goyn-about-hero__accent {
	color: var(--goyn-ah-accent);
}

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

.goyn-about-hero__text {
	max-width: var(--goyn-ah-text-max);
	margin: 30px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--goyn-ah-text);
}

.goyn-about-hero__lead {
	max-width: var(--goyn-ah-lead-max);
	margin: 22px 0 0;
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.4;
	color: var(--goyn-ah-accent);
}

/* ============================================================
   2. I quattro valori
   ------------------------------------------------------------
   Reticolo a filo singolo: il `gap: 1px` scopre il fondo del contenitore, che
   diventa la riga di separazione. È lo stesso disegno dei pilastri della home,
   e vale la stessa avvertenza — il fondo delle celle deve essere pieno, o il
   filo si vede attraverso.
   ============================================================ */

.goyn-about-values {
	--goyn-av-count: 4;
	--goyn-av-bg: var(--goyn-cream-2, #efebe0);
	--goyn-av-rule: var(--goyn-petrol-16, rgba(31, 83, 93, 0.16));
	--goyn-av-title: var(--goyn-petrol, #1f535d);
	--goyn-av-text: var(--goyn-muted, #5e6e6e);
	/*
	 * ⚠️ Il tratteggio è RUGGINE smorzato, non pesca: nell'originale è
	 *    `rgba(184, 92, 56, 0.4)`, cioè il ruggine `#c0603c` scurito di un tono e
	 *    non il `--goyn-peach-40` del tema. Sono due colori vicini e su un cerchio
	 *    da 62px la differenza si vede appena — ma è il colore che l'hover porta a
	 *    `rgba(192, 96, 60, 0.55)`, e partire dal pesca renderebbe l'hover un
	 *    cambio di tinta invece di un semplice rafforzarsi.
	 */
	--goyn-av-ico: rgba(184, 92, 56, 0.4);
	--goyn-av-ico-hover: rgba(192, 96, 60, 0.55);

	padding: clamp(46px, 5vw, 74px) var(--goyn-pad) clamp(50px, 5vw, 80px);
	background-color: var(--goyn-av-bg);
}

/*
 * ⚠️ Il conteggio arriva dal template come `--goyn-av-count` e le colonne si
 *    ricavano QUI. Se il template scrivesse direttamente le colonne, essendo uno
 *    stile inline nessun media query potrebbe più portarle a due: errore già
 *    pagato sulle schede degli ingredienti.
 */
/*
 * ⚠️ `margin: 0; padding: 0; list-style: none` non sono decorazione: il default
 *    del browser mette 40px di `padding-inline-start` su ogni `<ul>`/`<ol>`, e
 *    con `box-sizing: border-box` quei 40px si mangiano la larghezza del
 *    reticolo. Misurato: le colonne venivano 312,75px invece di 322,75. È l'ennesimo
 *    caso della regola del progetto — reset e default usano selettori di
 *    elemento, quindi una classe sola non basta mai su `a`, `img`, `input`,
 *    `select`, `textarea`, `button`, `table`, `h1`–`h6` e, da qui, `ul` e `ol`.
 */
.goyn-about-values__grid {
	display: grid;
	grid-template-columns: repeat(var(--goyn-av-count), minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--goyn-av-rule);
	background-color: var(--goyn-av-rule);
}

.goyn-about-values__item {
	padding: clamp(26px, 2.6vw, 38px) clamp(20px, 2vw, 30px) clamp(30px, 3vw, 40px);
	text-align: center;
	background-color: var(--goyn-av-bg);
}

/*
 * Il cerchio tratteggiato. `inline-grid` e non `flex`: l'icona è un solo figlio
 * e `place-items: center` la centra sui due assi in una riga.
 *
 * L'hover è una `transition` sull'elemento e non una variante di Motion: sale di
 * 5px e il tratteggio passa al ruggine. Nessun JavaScript.
 */
.goyn-about-values__ico {
	display: inline-grid;
	place-items: center;
	width: 62px;
	height: 62px;
	color: var(--goyn-av-title);
	background-color: rgba(250, 247, 240, 0.55);
	border: 1px dashed var(--goyn-av-ico);
	border-radius: 50%;
	/* 0,4s è il valore dell'originale, non il `--goyn-dur-fast` del tema (0,35s). */
	transition: transform 0.4s var(--goyn-ease), border-color 0.4s var(--goyn-ease);
}

.goyn-about-values__item:hover .goyn-about-values__ico,
.goyn-about-values__item:focus-within .goyn-about-values__ico {
	transform: translateY(-5px);
	border-color: var(--goyn-av-ico-hover);
}

/*
 * ⚠️ `line-height: normal` esplicito, e vale per le tre etichette in Oswald di
 *    questa pagina (questa, il titolo del passo, l'etichetta del numero).
 *    L'originale non dichiara nulla e l'app non ha un'interlinea globale, quindi
 *    quelle righe prendono le metriche naturali del carattere; il tema invece dà
 *    1,5 dentro `.goyn-widget`. Misurato: 18,75px invece di 19 qui, 19,5 invece
 *    di 20 sul titolo del passo, 16,5 invece di 16 sull'etichetta — una riga sola
 *    di testo, quindi lo scarto si somma all'altezza della scheda. È lo stesso
 *    tipo di scostamento del `line-height: 1` di `.goyn-btn`.
 */
.goyn-about-values__title {
	margin: 18px 0 0;
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2px;
	color: var(--goyn-av-title);
}

.goyn-about-values__text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--goyn-av-text);
}

/* ============================================================
   3. Il metodo: intro, quattro passi, quattro numeri
   ============================================================ */

.goyn-about-story {
	--goyn-as-count: 4;
	--goyn-as-bg: var(--goyn-petrol, #1f535d);
	--goyn-as-title: var(--goyn-cream, #e9e5d9);
	--goyn-as-accent: var(--goyn-peach, #e8c39f);
	--goyn-as-lead: rgba(233, 229, 217, 0.86);
	--goyn-as-text: rgba(233, 229, 217, 0.72);
	--goyn-as-rule: rgba(232, 195, 159, 0.28);
	--goyn-as-texture-op: 0.5;
	--goyn-as-num-stroke-w: 1px;
	--goyn-as-num-stroke: rgba(233, 229, 217, 0.35);
	--goyn-as-lead-max: 560px;

	position: relative;
	overflow: hidden;
	padding: clamp(78px, 7vw, 116px) 0;
	background-color: var(--goyn-as-bg);
	color: var(--goyn-as-title);
}

.goyn-about-story .goyn-texture {
	opacity: var(--goyn-as-texture-op);
}

/*
 * Il padding orizzontale sta sul contenitore INTERNO e non sulla sezione, come
 * nell'originale: il fondo, la texture e il velo devono arrivare ai bordi della
 * finestra, il contenuto si ferma a 1360px.
 */
.goyn-about-story__inner {
	position: relative;
	padding: 0 var(--goyn-pad);
}

/* ---------- intro: titolo a sinistra, paragrafo che si accende a destra ---------- */

.goyn-about-story__intro {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 56px;
	align-items: end;
	margin-bottom: 60px;
}

/*
 * ⚠️ `margin: 0` esplicito: nell'originale il sovratitolo è uno `<span>`, qui è
 *    un `<p>` e un paragrafo si porta dietro i 14,4px di margine inferiore del
 *    reset (0,9em su 16px). Stessa riga che sta su `.goyn-ps__eyebrow` e sui
 *    sovratitoli della filosofia.
 */
/*
 * ⚠️⚠️ `display: block` e `line-height: normal`, e sono DUE correzioni della stessa
 *      misura. `.goyn-eyebrow` del tema è `inline-block`: dentro un blocco, un
 *      riquadro in linea si posa su una riga alta quanto il MAGGIORE fra sé e lo
 *      "strut" del blocco che lo contiene — e lo strut vale l'interlinea del
 *      contenitore, cioè 24px (1,5 × 16) dentro `.goyn-widget`. L'originale non ha
 *      un'interlinea globale, quindi là lo strut è `normal` e la riga è alta 20px
 *      come il sovratitolo. Misurato: la colonna dell'intro veniva 155px invece di
 *      151, e i 4px scendevano su tutta la sezione (786,36 contro 782,36).
 *
 *      A blocco il sovratitolo detta la propria altezza e lo strut del genitore
 *      non c'entra più; `line-height: normal` la riporta ai 20px del carattere.
 *      Vale qui e non nella testata, dove il sovratitolo è un elemento flex — là
 *      lo strut non partecipa.
 */
.goyn-about-story__eyebrow {
	display: block;
	margin: 0;
	line-height: normal;
	color: var(--goyn-as-accent);
}

.goyn-about-story__title {
	margin: 14px 0 0;
	font-size: clamp(34px, 4.4vw, 66px);
	line-height: 0.92;
}

.goyn-about-story__lead {
	max-width: var(--goyn-as-lead-max);
	margin: 0;
	font-size: clamp(18px, 1.8vw, 25px);
	line-height: 1.42;
	color: var(--goyn-as-lead);
}

/* ---------- i quattro passi ---------- */

/* Stessa avvertenza del reticolo dei valori: i 40px di default dell'`<ol>` vanno azzerati. */
.goyn-about-story__steps {
	display: grid;
	grid-template-columns: repeat(var(--goyn-as-count), minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 34px);
	margin: clamp(40px, 4.5vw, 66px) 0 0;
	padding: 0;
	list-style: none;
}

.goyn-about-story__step {
	padding-top: 20px;
	border-top: 1px solid var(--goyn-as-rule);
}

.goyn-about-story__num {
	font-size: 40px;
	line-height: 1;
	color: var(--goyn-as-accent);
	-webkit-text-stroke: var(--goyn-as-num-stroke-w) var(--goyn-as-num-stroke);
}

/* `line-height: normal`: vedi la nota su `.goyn-about-values__title`. */
.goyn-about-story__step-title {
	margin: 14px 0 10px;
	font-weight: 600;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 2.4px;
}

.goyn-about-story__step-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--goyn-as-text);
}

/* ---------- i quattro numeri ---------- */

.goyn-about-story__stats {
	display: grid;
	grid-template-columns: repeat(var(--goyn-as-count), minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 34px);
	margin-top: clamp(46px, 5vw, 72px);
	padding-top: clamp(30px, 3vw, 42px);
	border-top: 1px solid var(--goyn-as-rule);
}

.goyn-about-story__value {
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1;
	color: var(--goyn-as-accent);
}

/* `line-height: normal`: vedi la nota su `.goyn-about-values__title`. */
.goyn-about-story__label {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 2px;
	color: rgba(233, 229, 217, 0.7);
}

/* ============================================================
   4. Entrate
   ------------------------------------------------------------
   ⚠️ Le entrate proprie di queste sezioni stanno QUI e non in reveal.css: si
      agganciano allo stesso interruttore (`is-armed` / `is-in`), così l'effetto
      resta dove è usato e la garanzia «nessuno stato iniziale senza JavaScript»
      vale comunque. La nota è in testa a reveal.css.
   ============================================================ */

/* Le righe del titolo, con lo stagger di ciascuna sezione. */
.goyn-about-hero__title .goyn-line {
	/* 0,11 nell'originale, non il predefinito 0,09. */
	--goyn-delay: calc(var(--goyn-about-line, 0) * 110ms);
}

.goyn-about-story__title .goyn-line {
	--goyn-delay: calc(var(--goyn-about-line, 0) * 90ms);
}

/*
 * Le tre corse e le tre durate dei blocchi che salgono: sono valori dichiarati
 * dall'originale sezione per sezione (26/0,75 · 34/0,8 · 20/0,7) e non i
 * predefiniti di reveal.css, che restano quelli della maggior parte del sito.
 */
.goyn-about-values__item {
	--goyn-rise-shift: 26px;
	--goyn-rise-dur: 0.75s;
	--goyn-delay: calc(var(--goyn-av-index, 0) * 90ms);
}

.goyn-about-story__step {
	--goyn-rise-shift: 34px;
	--goyn-rise-dur: 0.8s;
	--goyn-delay: calc(var(--goyn-as-index, 0) * 90ms);
}

.goyn-about-story__stat {
	--goyn-rise-shift: 20px;
	--goyn-rise-dur: 0.7s;
	--goyn-delay: calc(var(--goyn-as-index, 0) * 80ms);
}

/* --- il filetto della testata: si allunga da zero --- */

[data-goyn-scene].is-armed .goyn-about-hero__dash {
	width: 0;
}

[data-goyn-scene].is-armed.is-in .goyn-about-hero__dash {
	animation: goyn-about-dash 0.8s var(--goyn-ease) 200ms both;
}

@keyframes goyn-about-dash {
	from {
		width: 0;
	}

	to {
		width: 34px;
	}
}

/* ============================================================
   5. Responsive
   ------------------------------------------------------------
   ⚠️ Dal più largo al più stretto: fra due media query di pari specificità
      decide l'ordine nel file, non la larghezza.
   ============================================================ */

@media (max-width: 860px) {
	/*
	 * La testata va in colonna e la fotografia sale in cima (`order: -1`): è la
	 * scelta dell'originale, e serve — con il racconto per primo, su un telefono
	 * si aprirebbe la pagina su un muro di testo.
	 *
	 * L'altezza minima sparisce: in colonna la somma delle due parti è già più
	 * alta di 82vh, e un minimo la allungherebbe con spazio vuoto.
	 */
	.goyn-about-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.goyn-about-hero__photo {
		order: -1;
		min-height: 52vh;
	}

	.goyn-about-hero__copy {
		padding: 38px var(--goyn-pad) 52px;
	}

	.goyn-about-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.goyn-about-story__intro {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 22px;
		margin-bottom: 40px;
	}

	.goyn-about-story__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.goyn-about-story__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 18px;
	}
}

@media (max-width: 560px) {
	.goyn-about-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   6. prefers-reduced-motion
   ------------------------------------------------------------
   ⚠️ Si annulla la PROPRIETÀ FINALE, non la variabile del controllo: Elementor
      stampa le variabili su un selettore con l'id del documento, che batte
      qualunque classe. Azzerare `--goyn-ah-run` qui non avrebbe effetto.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-about-hero__shift,
	.goyn-about-hero__copy,
	.goyn-about-hero__watermark {
		transform: none;
	}

	[data-goyn-scene].is-armed .goyn-about-hero__dash {
		width: 34px;
	}

	[data-goyn-scene].is-armed.is-in .goyn-about-hero__dash {
		animation: none;
	}
}