/*
 * GOYN — Pagina Contatti
 *
 * Fonte: `CtHero`, `CtForm`, `CtHelp`, `CtSocial` e `CtFaq` in
 * src/components/ContactSections.jsx, con le classi `.ct-*` di src/styles.css.
 *
 * Un foglio per le cinque sezioni della pagina, come per Ingredienti e
 * Filosofia. La sesta — la chiusura fotografica — è il widget condiviso
 * `goyn_cta_band` col suo `cta-band.css`.
 *
 * ⚠️ Le tre fasce centrali (aiuto, social, domande) hanno lo STESSO fondo crema e
 *    padding verticali diversi: nell'originale sono tre `<section>` che a schermo
 *    formano un unico blocco continuo. Restano tre widget, così il cliente può
 *    spostarne uno o togliere le tessere social senza toccare le altre — ma i
 *    padding vanno letti insieme: 104/44, 46/44, 46/112. Il primo apre il blocco,
 *    l'ultimo lo chiude.
 *
 * ISOLAMENTO: nessun selettore globale. Prefissi `goyn-ct-hero`, `goyn-ct-form`,
 * `goyn-ct-help`, `goyn-ct-social`, `goyn-ct-faq`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-zoom`, `.goyn-btn`, `.goyn-line`,
 * `.goyn-display`, `.goyn-label`, `.goyn-eyebrow`, `.goyn-accent`, `.goyn-wrap`,
 * `.goyn-link-sweep` + `.goyn-arrow`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`, `data-goyn-rise-wipe`.
 * DA parallax.js: `--goyn-parallax-p`.
 *
 * INDICE
 *   1. Testatina centrata, condivisa dalle tre fasce crema
 *   2. Testata
 *   3. Modulo
 *   4. Schede "ti aiutiamo noi"
 *   5. Tessere social
 *   6. Domande frequenti
 *   7. Entrate
 *   8. Responsive
 *   9. prefers-reduced-motion
 */

/* ============================================================
   1. Testatina centrata, condivisa dalle tre fasce crema
   ------------------------------------------------------------
   `CtHeading` dell'originale: una riga sola, centrata, in Oswald. La usano tre
   sezioni, quindi sta qui una volta.
   ============================================================ */

.goyn-ct-heading {
	margin: 0 0 clamp(24px, 2.6vw, 38px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3.4px;
	color: var(--goyn-petrol-deep, #163e46);
	text-align: center;
}

/* ============================================================
   2. Testata
   ============================================================ */

.goyn-ct-hero {
	--goyn-ct-col-copy: 1fr;
	--goyn-ct-col-photo: 1.06fr;
	--goyn-ct-min: 900px;
	--goyn-ct-pad-top: 180px;
	--goyn-ct-run: 16%;
	--goyn-ct-zoom: 1.12;
	--goyn-ct-text-run: -14%;

	/* In cima alla pagina il progresso è ZERO, non 0,5: è lo stato in cui la si
	   vede senza JavaScript. */
	--goyn-parallax-p: 0;

	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, var(--goyn-ct-col-copy)) minmax(0, var(--goyn-ct-col-photo));
	align-items: stretch;
	min-height: clamp(560px, 86vh, var(--goyn-ct-min));
	/*
	 * Fondo in tinta e non una texture: tre toni di crema sfumati in diagonale.
	 * È l'unica fascia del sito che non usa né una fotografia né la texture.
	 */
	background-image: linear-gradient(
		158deg,
		var(--goyn-ct-bg-1, #f6f3ec) 0%,
		var(--goyn-ct-bg-2, #f1ede3) 46%,
		var(--goyn-ct-bg-3, #eae5d7) 100%
	);
}

.goyn-ct-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(122px, 13vh, var(--goyn-ct-pad-top)) clamp(28px, 4vw, 72px)
		clamp(56px, 7vh, 92px) var(--goyn-pad);
}

/*
 * ⚠️ Il testo sale mentre la fotografia scende: due parallassi in versi opposti
 *    sulla stessa fascia. Il livello che si muove è QUESTO, non un figlio,
 *    perché la colonna non ha entrate di reveal.css su di sé — e infatti i suoi
 *    figli sì, ognuno col proprio.
 */
.goyn-ct-hero--parallax .goyn-ct-hero__copy {
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-ct-text-run)), 0);
	will-change: transform;
}

/*
 * Il bordo sinistro della fotografia sfuma nel fondo: nessuna cucitura netta fra
 * la colonna chiara e lo scatto.
 *
 * ⚠️ `mask-image` senza prefisso NON basta: Safari lo vuole ancora prefissato, e
 *    senza la versione `-webkit-` la sfumatura non c'è — la foto attacca di
 *    colpo. Le due righe vanno tenute insieme.
 */
.goyn-ct-hero__photo {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 22%);
}

/*
 * Due livelli: la tendina d'entrata sul riquadro, lo spostamento e
 * l'ingrandimento su questo figlio — la regola di reveal.css sulle
 * trasformazioni. Il livello è più alto del riquadro per non scoprire i bordi.
 */
.goyn-ct-hero__shift {
	position: absolute;
	inset: -8% 0;
}

.goyn-ct-hero--parallax .goyn-ct-hero__shift {
	transform:
		translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-ct-run)), 0)
		scale(calc(1 + (var(--goyn-ct-zoom) - 1) * var(--goyn-parallax-p)));
	will-change: transform;
}

.goyn-ct-hero__eyebrow {
	margin: 0;
	color: var(--goyn-ct-eyebrow, var(--goyn-rust, #c0603c));
}

.goyn-ct-hero__title {
	margin: 18px 0 0;
	font-size: clamp(42px, 5.6vw, 96px);
	line-height: 0.88;
	color: var(--goyn-ct-title, var(--goyn-petrol-deep, #163e46));
}

.goyn-ct-hero__lead {
	max-width: 380px;
	margin: 26px 0 0;
	font-size: clamp(19px, 2vw, 28px);
	line-height: 1.35;
	color: var(--goyn-ct-lead, var(--goyn-petrol, #1f535d));
}

/*
 * Il filetto che si allunga. La larghezza finale è una variabile perché è anche
 * lo stato senza JavaScript: il filetto deve esserci, non nascere da zero e
 * restare invisibile.
 */
.goyn-ct-hero__rule {
	display: block;
	width: var(--goyn-ct-rule-w, 72px);
	height: 1.5px;
	margin: 30px 0 26px;
	background-color: rgba(31, 83, 93, 0.3);
}

.goyn-ct-hero__text {
	max-width: 400px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--goyn-ct-text, var(--goyn-muted, #5e6e6e));
}

/* --- i canali di contatto --- */

.goyn-ct-hero__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin-top: 30px;
}

.goyn-ct-hero__channel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--goyn-ct-text, var(--goyn-muted, #5e6e6e));
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-ct-hero__channel:hover,
.goyn-ct-hero__channel:focus-visible {
	color: var(--goyn-petrol-deep, #163e46);
}

/* Non tondo: un quadrato di 30px col filetto, come nell'originale. */
.goyn-ct-hero__channel-icon {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(31, 83, 93, 0.26);
	color: var(--goyn-petrol, #1f535d);
	transition:
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		border-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-ct-hero__channel:hover .goyn-ct-hero__channel-icon,
.goyn-ct-hero__channel:focus-visible .goyn-ct-hero__channel-icon {
	border-color: var(--goyn-rust, #c0603c);
	color: var(--goyn-rust, #c0603c);
}

.goyn-ct-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* ============================================================
   3. Modulo
   ============================================================ */

.goyn-ct-form {
	--goyn-ct-form-col-photo: 1fr;
	--goyn-ct-form-col-panel: 1.12fr;
	--goyn-ct-form-photo-min: 520px;
	--goyn-ct-form-run: 6%;

	/* Parallasse a due versi: a metà corsa la fotografia è a riposo. */
	--goyn-parallax-p: 0.5;

	position: relative;
	display: grid;
	grid-template-columns:
		minmax(0, var(--goyn-ct-form-col-photo))
		minmax(0, var(--goyn-ct-form-col-panel));
	align-items: stretch;
	background-color: var(--goyn-ct-form-bg, var(--goyn-cream-2, #efebe0));
}

.goyn-ct-form__photo {
	position: relative;
	overflow: hidden;
	min-height: clamp(320px, 40vw, var(--goyn-ct-form-photo-min));
}

.goyn-ct-form__shift {
	position: absolute;
	inset: -8% 0;
	transform: translate3d(0, calc((var(--goyn-parallax-p) - 0.5) * var(--goyn-ct-form-run) * 2), 0);
	will-change: transform;
}

/* Il modulo è centrato in verticale: stesso respiro sopra e sotto. */
.goyn-ct-form__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(44px, 5vw, 84px) clamp(28px, 4.4vw, 92px);
}

.goyn-ct-form__title {
	margin: 0;
	font-size: clamp(15px, 1.5vw, 19px);
	font-weight: 600;
	letter-spacing: 3.4px;
	color: var(--goyn-petrol-deep, #163e46);
}

.goyn-ct-form__text {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--goyn-muted, #5e6e6e);
}

.goyn-ct-form__slot {
	margin-top: clamp(26px, 2.6vw, 36px);
}

/*
 * ⚠️ Il modulo NON è nel widget: è un Form di Elementor Pro dentro un template,
 *    come la newsletter. Qui si veste soltanto — campi e bottone devono
 *    somigliare a quelli dell'originale.
 *
 *    Si prendono di mira le classi di Pro, ed è dichiarato: se un aggiornamento
 *    le rinominasse, il modulo torna vestito come lo veste Pro. Brutto, non
 *    rotto.
 */
.goyn-ct-form__slot .elementor-field-textual {
	width: 100%;
	display: block;
	padding: 15px 16px;
	border: 1px solid rgba(31, 83, 93, 0.2);
	border-radius: 0;
	background-color: var(--goyn-cream, #e9e5d9);
	font-family: var(--goyn-font-body);
	font-size: 14.5px;
	color: var(--goyn-ink, #1a2c30);
	outline: none;
	transition:
		border-color 0.4s var(--goyn-ease),
		background-color 0.4s var(--goyn-ease);
}

.goyn-ct-form__slot .elementor-field-textual::placeholder {
	color: rgba(94, 110, 110, 0.75);
}

.goyn-ct-form__slot .elementor-field-textual:focus {
	border-color: var(--goyn-petrol, #1f535d);
	background-color: #fff;
}

.goyn-ct-form__slot textarea.elementor-field-textual {
	min-height: 130px;
	resize: vertical;
}

/* ============================================================
   4. Schede "ti aiutiamo noi"
   ============================================================ */

.goyn-ct-help {
	--goyn-ct-help-count: 3;

	padding: clamp(64px, 6.4vw, 104px) var(--goyn-pad) clamp(30px, 3vw, 44px);
	background-color: var(--goyn-ct-cream, var(--goyn-cream, #e9e5d9));
}

/*
 * ⚠️ Il conteggio arriva dal template e le colonne si ricavano qui: scrivendo le
 *    colonne inline nessun media query potrebbe più portarle a una.
 */
.goyn-ct-help__grid {
	display: grid;
	grid-template-columns: repeat(var(--goyn-ct-help-count), minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
}

.goyn-ct-help__card {
	display: block;
	background-color: var(--goyn-cream-2, #efebe0);
	border: 1px solid rgba(31, 83, 93, 0.14);
	transition: border-color 0.5s var(--goyn-ease);
}

.goyn-ct-help__card:hover,
.goyn-ct-help__card:focus-visible {
	border-color: rgba(31, 83, 93, 0.34);
}

.goyn-ct-help__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
}

.goyn-ct-help__body {
	padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px);
}

.goyn-ct-help__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.goyn-ct-help__ico {
	display: inline-flex;
	color: var(--goyn-petrol, #1f535d);
}

.goyn-ct-help__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 2.6px;
	color: var(--goyn-petrol-deep, #163e46);
}

.goyn-ct-help__list {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.goyn-ct-help__list li {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--goyn-muted, #5e6e6e);
}

/*
 * Il richiamo in fondo alla scheda non è in Oswald maiuscolo come gli altri
 * `.goyn-link-sweep` del sito: qui l'originale usa il corpo del testo, minuscolo.
 * Si sovrascrivono le quattro proprietà tipografiche e si tiene il resto —
 * freccia compresa.
 */
.goyn-ct-help__more {
	margin-top: 18px;
	font-family: var(--goyn-font-body);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: none;
	color: var(--goyn-petrol, #1f535d);
}

/* ============================================================
   5. Tessere social
   ============================================================ */

.goyn-ct-social {
	--goyn-ct-social-count: 3;

	padding: clamp(30px, 3vw, 46px) var(--goyn-pad) clamp(30px, 3vw, 44px);
	background-color: var(--goyn-ct-cream, var(--goyn-cream, #e9e5d9));
}

.goyn-ct-social__grid {
	display: grid;
	grid-template-columns: repeat(var(--goyn-ct-social-count), minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
}

.goyn-ct-social__tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background-color: var(--goyn-petrol-deep, #163e46);
}

.goyn-ct-social__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(12, 36, 41, 0.16), rgba(12, 36, 41, 0.66));
	opacity: 1;
	transition: opacity 0.5s var(--goyn-ease);
}

/*
 * Il velo si SCHIARISCE al passaggio, non si scurisce: 1 → 0,85. È l'unico velo
 * del sito che va in quella direzione, e nell'originale è così.
 */
.goyn-ct-social__tile:hover .goyn-ct-social__veil,
.goyn-ct-social__tile:focus-visible .goyn-ct-social__veil {
	opacity: 0.85;
}

.goyn-ct-social__copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 18px;
	color: var(--goyn-cream, #e9e5d9);
	text-align: center;
}

.goyn-ct-social__ico {
	display: inline-flex;
	transition: transform 0.45s var(--goyn-ease);
}

.goyn-ct-social__tile:hover .goyn-ct-social__ico,
.goyn-ct-social__tile:focus-visible .goyn-ct-social__ico {
	transform: translateY(-4px);
}

.goyn-ct-social__name {
	margin-top: 12px;
	font-size: clamp(17px, 1.7vw, 23px);
	letter-spacing: 1.4px;
}

.goyn-ct-social__handle {
	margin-top: 4px;
	font-size: 12px;
	color: rgba(233, 229, 217, 0.82);
}

/* ============================================================
   6. Domande frequenti
   ============================================================ */

.goyn-ct-faq {
	--goyn-ct-faq-col-list: 1.04fr;
	--goyn-ct-faq-col-photo: 0.96fr;
	--goyn-ct-faq-run: 6%;
	--goyn-parallax-p: 0.5;

	padding: clamp(30px, 3vw, 46px) var(--goyn-pad) clamp(70px, 7vw, 112px);
	background-color: var(--goyn-ct-cream, var(--goyn-cream, #e9e5d9));
}

.goyn-ct-faq__grid {
	display: grid;
	grid-template-columns:
		minmax(0, var(--goyn-ct-faq-col-list))
		minmax(0, var(--goyn-ct-faq-col-photo));
	gap: clamp(24px, 3vw, 48px);
	/* La fotografia segue in altezza la colonna delle domande. */
	align-items: stretch;
}

.goyn-ct-faq__row {
	border-bottom: 1px solid rgba(31, 83, 93, 0.16);
}

.goyn-ct-faq__row:first-child {
	border-top: 1px solid rgba(31, 83, 93, 0.16);
}

/*
 * Ogni domanda è un `<details>`: si apre da sé, funziona senza JavaScript, è
 * raggiungibile da tastiera e la risposta è nel documento anche a pannello
 * chiuso — quindi la leggono anche i motori di ricerca. Stessa scelta della
 * sezione domande della scheda prodotto.
 */
.goyn-ct-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 17px 0;
	font-size: 14px;
	color: var(--goyn-petrol-deep, #163e46);
	cursor: pointer;
	list-style: none;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

/* Il triangolino nativo del `<summary>`: via su tutti i motori. */
.goyn-ct-faq__q::-webkit-details-marker {
	display: none;
}

.goyn-ct-faq__q::marker {
	content: '';
}

.goyn-ct-faq__q:hover {
	color: var(--goyn-rust, #c0603c);
}

/* Il segno si gira con `details[open]`: nessuno script. */
.goyn-ct-faq__sign {
	display: inline-block;
	font-size: 19px;
	line-height: 1;
	color: var(--goyn-petrol, #1f535d);
	transition:
		transform 0.45s var(--goyn-ease),
		color 0.45s var(--goyn-ease);
}

.goyn-ct-faq__row[open] .goyn-ct-faq__sign {
	color: var(--goyn-rust, #c0603c);
	transform: rotate(135deg);
}

.goyn-ct-faq__a {
	margin: 0 44px 18px 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--goyn-muted, #5e6e6e);
}

.goyn-ct-faq__photo {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	background-color: var(--goyn-petrol-deep, #163e46);
}

.goyn-ct-faq__shift {
	position: absolute;
	inset: -8% 0;
	transform: translate3d(0, calc((var(--goyn-parallax-p) - 0.5) * var(--goyn-ct-faq-run) * 2), 0);
	will-change: transform;
}

/* ============================================================
   7. Entrate
   ------------------------------------------------------------
   Le cascate dell'originale, con `--goyn-delay` di reveal.css. Due entrate
   PROPRIE di questa pagina stanno qui: il filetto che si allunga e la tendina
   che si apre da sinistra — quest'ultima perché reveal.css ne ha una che si apre
   dal basso, e questa fotografia si scopre di lato.
   ============================================================ */

.goyn-ct-hero,
.goyn-ct-form,
.goyn-ct-help,
.goyn-ct-social,
.goyn-ct-faq {
	/* Il `Rise` predefinito dell'originale: 34px in 0,9s. */
	--goyn-rise-shift: 34px;
	--goyn-rise-dur: 0.9s;
}

/* La testata usa 18px, non 34: il `Rise y={18}` del sovratitolo. */
.goyn-ct-hero__eyebrow {
	--goyn-rise-shift: 18px;
}

.goyn-ct-hero__channel {
	--goyn-rise-shift: 16px;
	--goyn-rise-dur: 0.7s;
	--goyn-delay: calc(380ms + var(--goyn-ct-index, 0) * 80ms);
}

.goyn-ct-help__card {
	--goyn-rise-dur: 0.85s;
	--goyn-delay: calc(var(--goyn-ct-index, 0) * 100ms);
}

.goyn-ct-social__tile {
	--goyn-rise-shift: 30px;
	--goyn-rise-dur: 0.85s;
	--goyn-delay: calc(var(--goyn-ct-index, 0) * 100ms);
}

.goyn-ct-faq__row {
	--goyn-rise-shift: 18px;
	--goyn-rise-dur: 0.7s;
	--goyn-delay: calc(var(--goyn-ct-index, 0) * 60ms);
}

.goyn-ct-hero__title .goyn-line {
	/* `stagger` 0,11 in questa sezione, non il predefinito 0,09. */
	--goyn-delay: calc(var(--goyn-ct-line, 0) * 110ms);
}

/* --- il filetto che si allunga --- */

[data-goyn-scene].is-armed .goyn-ct-hero__rule {
	width: 0;
}

[data-goyn-scene].is-armed.is-in .goyn-ct-hero__rule {
	animation: goyn-ct-rule 0.8s var(--goyn-ease) 350ms both;
}

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

	to {
		width: var(--goyn-ct-rule-w, 72px);
	}
}

/* --- la tendina che si apre da sinistra --- */

[data-goyn-scene].is-armed .goyn-ct-form__photo:not(.goyn-ct-form__photo--no-wipe) {
	clip-path: inset(0 100% 0 0);
}

[data-goyn-scene].is-armed.is-in .goyn-ct-form__photo:not(.goyn-ct-form__photo--no-wipe) {
	animation: goyn-ct-wipe-left 1.05s var(--goyn-ease) both;
}

@keyframes goyn-ct-wipe-left {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

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

@media (max-width: 860px) {
	/*
	 * I capi a mano servono a comporre le righe sul desktop; qui spezzerebbero il
	 * testo a metà. Lo spazio fra le parole nel markup c'è comunque.
	 */
	.goyn-ct-br {
		display: none;
	}

	.goyn-ct-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* La fotografia va SOPRA il testo: `order: -1` come nell'originale. */
	.goyn-ct-hero__photo {
		order: -1;
		min-height: 56vh;
	}

	.goyn-ct-hero__copy {
		padding: 38px var(--goyn-pad) 54px;
	}

	/* In colonna i tre canali stanno uno sotto l'altro, non affiancati. */
	.goyn-ct-hero__channels {
		flex-direction: column;
		gap: 12px;
	}

	.goyn-ct-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.goyn-ct-form__photo {
		min-height: 46vh;
	}

	.goyn-ct-form__panel {
		padding: 36px var(--goyn-pad) 46px;
	}

	.goyn-ct-help__grid,
	.goyn-ct-social__grid,
	.goyn-ct-faq__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.goyn-ct-faq__photo {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

/* ============================================================
   9. prefers-reduced-motion
   ------------------------------------------------------------
   ⚠️ Si annulla la proprietà finale e non la variabile del controllo: Elementor
      stampa le variabili su un selettore con l'id del documento, che batte
      qualunque classe.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-ct-hero--parallax .goyn-ct-hero__copy,
	.goyn-ct-hero--parallax .goyn-ct-hero__shift,
	.goyn-ct-form__shift,
	.goyn-ct-faq__shift {
		transform: none;
	}

	[data-goyn-scene].is-armed .goyn-ct-hero__rule {
		width: var(--goyn-ct-rule-w, 72px);
	}

	[data-goyn-scene].is-armed .goyn-ct-form__photo {
		clip-path: none;
	}

	[data-goyn-scene].is-armed.is-in .goyn-ct-hero__rule,
	[data-goyn-scene].is-armed.is-in .goyn-ct-form__photo {
		animation: none;
	}
}