/*
 * Home «Foglio»: apertura chiara, con la scena animata del percorso documento.
 * Caricato dopo concept-a.css e solo sulla Home, quando la variante è attiva.
 * Tutto quello che non è riscritto qui resta com'è nella Home attuale.
 *
 * La scena è disegnata in CSS: nessuna immagine, nessuna libreria.
 * Lo stato scritto senza animazione è il fotogramma finale, quello che resta
 * quando il movimento è disattivato.
 */

body.okges-home-foglio {
	/* Durata del ciclo: la usano tutte le animazioni della scena. Sei tappe da
	   1,74 s l'una, di cui 0,36 s di movimento e 1,2 s di sosta sul documento.
	   Le percentuali dei @keyframes sono calcolate su questo rapporto: cambiare
	   solo --fg-cyc riscala movimento e sosta insieme, per agire sulla sola
	   attesa vanno riscritti anche i fotogrammi (vedi la sezione «Movimento»).
	   Il ritardo è negativo e vale il 70% della durata: al caricamento la scena
	   parte già a metà percorso invece che dal foglio vuoto, quindi va
	   ricalcolato a ogni cambio di --fg-cyc. */
	--fg-cyc: 10.44s;
	--fg-fan: 1;
	--fg-delay: -7.308s;
	--fg-navy: #0b2447;
	--fg-ink: #45596f;
	--fg-amber: #ffc107;
	--fg-amber-dark: #d9a200;
	--fg-paper: #fafbfd;
	--fg-line: #e3e9f1;
}

/* Pulsanti a pillola, come nella proposta approvata.
   Solo nel contenuto: testata e piè di pagina sono uguali su tutto il sito. */
body.okges-home-foglio .fg-main .button {
	border-radius: 999px;
}

/* ── Apertura ─────────────────────────────────────────────────────── */
.fg-hero {
	background:
		radial-gradient(820px 560px at 104% -12%, rgba(255, 193, 7, 0.34), transparent 64%),
		radial-gradient(680px 480px at -8% 96%, rgba(74, 111, 165, 0.14), transparent 62%),
		var(--fg-paper);
	overflow: hidden;
	padding-block: clamp(40px, 5vw, 76px) clamp(48px, 6vw, 88px);
	position: relative;
}

.fg-hero::before {
	background-image: radial-gradient(rgba(13, 46, 90, 0.16) 1.1px, transparent 1.1px);
	background-size: 26px 26px;
	content: "";
	inset: 0;
	-webkit-mask-image: linear-gradient(112deg, #000 0%, transparent 46%);
	mask-image: linear-gradient(112deg, #000 0%, transparent 46%);
	pointer-events: none;
	position: absolute;
}

.fg-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(32px, 4vw, 54px);
	grid-template-columns: minmax(0, 0.98fr) minmax(0, 1fr);
	position: relative;
	z-index: 2;
}

.fg-hero h1 {
	color: var(--fg-navy);
	font-size: clamp(2.5rem, 5.2vw, 4.05rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.04;
	margin: 0;
}

/* Evidenziatore giallo su una parola sola */
.fg-mark {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	z-index: 1;
}

.fg-mark::before {
	background: var(--fg-amber);
	border-radius: 7px 16px 9px 18px;
	bottom: 11%;
	content: "";
	left: -10px;
	position: absolute;
	right: -9px;
	top: 14%;
	transform: rotate(-0.9deg);
	z-index: -1;
}

.fg-hero__lead {
	color: var(--fg-ink);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 22px 0 0;
	max-width: 460px;
}

.fg-hero .button-row {
	margin-top: 32px;
}

/* ── La riga del percorso, sincronizzata con la scena ─────────────── */
.fg-flow__label {
	color: #7a889b;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	margin: 52px 0 0;
	text-transform: uppercase;
}

.fg-flow {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	list-style: none;
	margin: 20px 0 0;
	max-width: 566px;
	padding: 19px 0 0;
	position: relative;
}

/* La rotaia va dal centro del primo pallino al centro dell'ultimo */
.fg-flow::before {
	background: rgba(13, 46, 90, 0.22);
	content: "";
	height: 1px;
	left: 5.5px;
	position: absolute;
	right: calc(100% / 6 - 5.5px);
	top: 5px;
	z-index: 0;
}

.fg-flow::after {
	animation: fg-prog var(--fg-cyc) ease var(--fg-delay) infinite;
	background: var(--fg-amber);
	border-radius: 2px;
	content: "";
	height: 3px;
	left: 5.5px;
	position: absolute;
	top: 4px;
	width: 83.3333%;
	z-index: 1;
}

.fg-flow li {
	color: #26405f;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	position: relative;
	z-index: 2;
}

.fg-flow li::before {
	background: var(--fg-amber);
	border: 2px solid var(--fg-amber-dark);
	border-radius: 50%;
	content: "";
	height: 11px;
	left: 0;
	position: absolute;
	top: -19px;
	width: 11px;
}

.fg-flow li.is-end::before {
	transform: scale(1.25);
}

.fg-flow li:nth-child(1)::before { animation: fg-nd1 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-flow li:nth-child(2)::before { animation: fg-nd2 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-flow li:nth-child(3)::before { animation: fg-nd3 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-flow li:nth-child(4)::before { animation: fg-nd4 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-flow li:nth-child(5)::before { animation: fg-nd5 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-flow li:nth-child(6)::before { animation: fg-nd6 var(--fg-cyc) ease var(--fg-delay) infinite; }

/* L'anello che si apre sul pallino: rende visibile il momento del passaggio */
.fg-flow li::after {
	border: 1.5px solid var(--fg-amber-dark);
	border-radius: 50%;
	content: "";
	height: 11px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: -19px;
	width: 11px;
}

.fg-flow li:nth-child(1)::after { animation: fg-ring1 var(--fg-cyc) ease-out var(--fg-delay) infinite; }
.fg-flow li:nth-child(2)::after { animation: fg-ring2 var(--fg-cyc) ease-out var(--fg-delay) infinite; }
.fg-flow li:nth-child(3)::after { animation: fg-ring3 var(--fg-cyc) ease-out var(--fg-delay) infinite; }
.fg-flow li:nth-child(4)::after { animation: fg-ring4 var(--fg-cyc) ease-out var(--fg-delay) infinite; }
.fg-flow li:nth-child(5)::after { animation: fg-ring5 var(--fg-cyc) ease-out var(--fg-delay) infinite; }
.fg-flow li:nth-child(6)::after { animation: fg-ring6 var(--fg-cyc) ease-out var(--fg-delay) infinite; }

/* ── La scena: un foglio che attraversa i sei passaggi ────────────── */
.fg-hero__art {
	display: grid;
	justify-items: end;
	min-width: 0;
}

.fg-scene {
	align-items: center;
	display: flex;
	gap: clamp(16px, 2vw, 24px);
	justify-content: flex-end;
	padding: 54px 0 0 54px;
}

.fg-scene__doc {
	flex: 0 1 auto;
	position: relative;
	width: min(300px, 100%);
}

.fg-ghost {
	background: #fff;
	border: 1px solid var(--fg-line);
	border-radius: 10px;
	box-shadow: 0 14px 30px -18px rgba(13, 46, 90, 0.34);
	inset: 0;
	position: absolute;
}

.fg-ghost--1 { animation: fg-gh1 var(--fg-cyc) ease var(--fg-delay) infinite; transform: translate(calc(-12px * var(--fg-fan)), calc(-12px * var(--fg-fan))) rotate(-1.2deg); }
.fg-ghost--2 { animation: fg-gh2 var(--fg-cyc) ease var(--fg-delay) infinite; transform: translate(calc(-23px * var(--fg-fan)), calc(-23px * var(--fg-fan))) rotate(-2.3deg); }
.fg-ghost--3 { animation: fg-gh3 var(--fg-cyc) ease var(--fg-delay) infinite; transform: translate(calc(-33px * var(--fg-fan)), calc(-33px * var(--fg-fan))) rotate(-3.4deg); }
.fg-ghost--4 { animation: fg-gh4 var(--fg-cyc) ease var(--fg-delay) infinite; transform: translate(calc(-42px * var(--fg-fan)), calc(-42px * var(--fg-fan))) rotate(-4.5deg); }
.fg-ghost--5 { animation: fg-gh5 var(--fg-cyc) ease var(--fg-delay) infinite; transform: translate(calc(-50px * var(--fg-fan)), calc(-50px * var(--fg-fan))) rotate(-5.6deg); }

.fg-sheet {
	animation: fg-pulse var(--fg-cyc) ease var(--fg-delay) infinite;
	background: #fff;
	border: 1px solid #d9e1eb;
	border-radius: 10px;
	box-shadow: 0 34px 60px -28px rgba(13, 46, 90, 0.36);
	display: flex;
	flex-direction: column;
	min-height: 400px;
	padding: 24px 26px;
	position: relative;
	z-index: 5;
}

.fg-sheet__head {
	height: 24px;
	position: relative;
}

.fg-lab {
	color: var(--fg-navy);
	font-size: 0.75rem;
	font-weight: 600;
	left: 0;
	letter-spacing: 0.15em;
	opacity: 0;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	white-space: nowrap;
}

.fg-lab--1 { animation: fg-lab1 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-lab--2 { animation: fg-lab2 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-lab--3 { animation: fg-lab3 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-lab--4 { animation: fg-lab4 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-lab--5 { animation: fg-lab5 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-lab--6 { animation: fg-lab6 var(--fg-cyc) ease var(--fg-delay) infinite; opacity: 1; }

.fg-sheet__rule {
	background: var(--fg-amber);
	border-radius: 2px;
	display: block;
	height: 3px;
	margin: 13px 0 18px;
	width: 44px;
}

.fg-sheet__meta {
	color: #7c8b9e;
	font-size: 0.8125rem;
	margin: 0 0 22px;
}

.fg-sheet__rules {
	display: grid;
	gap: 12px;
	margin-bottom: auto;
}

.fg-r {
	background: #e9edf3;
	border-radius: 5px;
	display: block;
	height: 9px;
	transform: scaleX(1);
	transform-origin: left;
}

.fg-r:nth-child(3n + 1) { animation: fg-rule1 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-r:nth-child(3n + 2) { animation: fg-rule2 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-r:nth-child(3n + 3) { animation: fg-rule3 var(--fg-cyc) ease var(--fg-delay) infinite; }

.fg-sheet__total {
	align-items: baseline;
	border-top: 1px solid #e9edf3;
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	padding-top: 15px;
}

.fg-sheet__total small {
	color: #8a97a8;
	font-size: 0.75rem;
}

.fg-amt {
	font-variant-numeric: tabular-nums;
	min-width: 112px;
	position: relative;
	text-align: right;
}

.fg-amt > span {
	color: var(--fg-navy);
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
}

.fg-amt--a {
	animation: fg-amtA var(--fg-cyc) ease var(--fg-delay) infinite;
	bottom: 0;
	opacity: 0;
	position: absolute;
	right: 0;
}

.fg-amt--b {
	animation: fg-amtB var(--fg-cyc) ease var(--fg-delay) infinite;
	opacity: 1;
}

/* Gli effetti sugli altri moduli, generati dallo stesso documento */
.fg-scene__effects {
	display: grid;
	flex: 0 1 auto;
	gap: 10px;
	min-width: 0;
}

.fg-eff {
	align-items: center;
	background: #fff;
	border: 1px solid var(--fg-line);
	border-radius: 999px;
	box-shadow: 0 12px 24px -16px rgba(13, 46, 90, 0.45);
	color: #26405f;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 11px;
	opacity: 1;
	padding: 10px 16px;
	white-space: nowrap;
}

.fg-eff i {
	background: var(--fg-amber);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 7px;
	width: 7px;
}

.fg-eff--end i {
	background: var(--green);
}

.fg-eff--1 { animation: fg-eff1 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-eff--2 { animation: fg-eff2 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-eff--3 { animation: fg-eff3 var(--fg-cyc) ease var(--fg-delay) infinite; }
.fg-eff--4 { animation: fg-eff4 var(--fg-cyc) ease var(--fg-delay) infinite; }

.fg-scene__toggle {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(13, 46, 90, 0.3);
	color: #5b6c82;
	cursor: pointer;
	font-size: 0.8125rem;
	justify-self: end;
	margin-top: 18px;
	padding: 8px 4px;
}

.fg-scene__toggle:hover {
	color: var(--fg-navy);
}

.fg-scene__toggle[hidden] {
	display: none;
}

/* ── Fascia sotto l'apertura ──────────────────────────────────────── */
.fg-band {
	background: rgba(240, 243, 247, 0.9);
	border-block: 1px solid rgba(13, 46, 90, 0.14);
}

.fg-band__inner {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	padding-block: 22px;
}

.fg-band p {
	color: #42566f;
	font-size: 0.9375rem;
	margin: 0;
}

.fg-band strong {
	color: var(--fg-navy);
	margin-right: 6px;
}

.fg-band .text-link {
	flex-shrink: 0;
}

/* ── «Dentro OkGes»: la schermata sale al primo scorrimento ───────── */
.fg-inside__grid {
	align-items: center;
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}

.fg-inside__copy h2 {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	line-height: 1.12;
	margin-bottom: 18px;
}

.fg-inside__copy > p:not(.eyebrow) {
	color: var(--muted);
	margin-bottom: 24px;
}

/* ── Movimento ────────────────────────────────────────────────────── */
/*
 * Il ciclo è diviso in 6 tappe uguali da 16,6667%. Dentro ogni tappa ci sono
 * due parti distinte, ed è importante non confonderle quando si ritocca il ritmo:
 *
 *   - il MOVIMENTO (nodo che si accende, etichetta che scorre, barra che avanza)
 *     dura 3,45% del ciclo, cioè 0,36 s a 10,44 s;
 *   - la SOSTA, in cui la scena resta ferma sul documento corrente,
 *     dura 11,49% del ciclo, cioè 1,2 s.
 *
 * Le due dissolvenze di tappe contigue si sovrappongono per metà movimento,
 * quindi il passo di una tappa vale 1,5 × movimento + sosta = 16,6667%.
 * Ne segue la relazione da usare per cambiare i tempi:
 *
 *   ciclo = 6 × (1,5 × movimento + sosta)
 *
 * Cambiare solo --fg-cyc accorcia movimento e sosta nella stessa proporzione.
 * Per agire sulla sola attesa vanno riscritte anche queste percentuali.
 */
@keyframes fg-lab1 { 0%, 11.49% { opacity: 1; transform: translateY(0); } 14.94%, 96.55% { opacity: 0; transform: translateY(-9px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fg-lab2 { 0%, 13.22% { opacity: 0; transform: translateY(9px); } 16.67%, 28.16% { opacity: 1; transform: translateY(0); } 31.61%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes fg-lab3 { 0%, 29.89% { opacity: 0; transform: translateY(9px); } 33.33%, 44.83% { opacity: 1; transform: translateY(0); } 48.28%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes fg-lab4 { 0%, 46.55% { opacity: 0; transform: translateY(9px); } 50%, 61.49% { opacity: 1; transform: translateY(0); } 64.94%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes fg-lab5 { 0%, 63.22% { opacity: 0; transform: translateY(9px); } 66.67%, 78.16% { opacity: 1; transform: translateY(0); } 81.61%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes fg-lab6 { 0%, 79.89% { opacity: 0; transform: translateY(9px); } 83.33%, 94.83% { opacity: 1; transform: translateY(0); } 98.28%, 100% { opacity: 0; transform: translateY(9px); } }

@keyframes fg-gh1 { 0%, 15.52% { opacity: 0; transform: none; } 24.14%, 97% { opacity: 1; transform: translate(calc(-12px * var(--fg-fan)), calc(-12px * var(--fg-fan))) rotate(-1.2deg); } 100% { opacity: 0; transform: none; } }
@keyframes fg-gh2 { 0%, 32.18% { opacity: 0; transform: none; } 40.8%, 97% { opacity: 1; transform: translate(calc(-23px * var(--fg-fan)), calc(-23px * var(--fg-fan))) rotate(-2.3deg); } 100% { opacity: 0; transform: none; } }
@keyframes fg-gh3 { 0%, 48.85% { opacity: 0; transform: none; } 57.47%, 97% { opacity: 1; transform: translate(calc(-33px * var(--fg-fan)), calc(-33px * var(--fg-fan))) rotate(-3.4deg); } 100% { opacity: 0; transform: none; } }
@keyframes fg-gh4 { 0%, 65.52% { opacity: 0; transform: none; } 74.14%, 97% { opacity: 1; transform: translate(calc(-42px * var(--fg-fan)), calc(-42px * var(--fg-fan))) rotate(-4.5deg); } 100% { opacity: 0; transform: none; } }
@keyframes fg-gh5 { 0%, 82.18% { opacity: 0; transform: none; } 90.8%, 97% { opacity: 1; transform: translate(calc(-50px * var(--fg-fan)), calc(-50px * var(--fg-fan))) rotate(-5.6deg); } 100% { opacity: 0; transform: none; } }

@keyframes fg-pulse { 0%, 13.22% { transform: scale(1); } 16.67% { transform: scale(0.984); } 20.11%, 29.89% { transform: scale(1); } 33.33% { transform: scale(0.984); } 36.78%, 46.55% { transform: scale(1); } 50% { transform: scale(0.984); } 53.45%, 63.22% { transform: scale(1); } 66.67% { transform: scale(0.984); } 70.11%, 79.89% { transform: scale(1); } 83.33% { transform: scale(0.984); } 86.78%, 100% { transform: scale(1); } }

@keyframes fg-rule1 { 0% { transform: scaleX(0); } 6.9%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes fg-rule2 { 0%, 2.3% { transform: scaleX(0); } 9.2%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes fg-rule3 { 0%, 4.6% { transform: scaleX(0); } 11.49%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Il totale scende al DDT: la consegna è parziale */
@keyframes fg-amtA { 0%, 29.89% { opacity: 1; } 33.33%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fg-amtB { 0%, 29.89% { opacity: 0; } 33.33%, 97% { opacity: 1; } 100% { opacity: 0; } }

@keyframes fg-eff1 { 0%, 33.33% { opacity: 0; transform: translateX(14px); } 41.95%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes fg-eff2 { 0%, 50% { opacity: 0; transform: translateX(14px); } 58.62%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes fg-eff3 { 0%, 66.67% { opacity: 0; transform: translateX(14px); } 75.29%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes fg-eff4 { 0%, 83.33% { opacity: 0; transform: translateX(14px); } 91.95%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(14px); } }

@keyframes fg-progv { 0%, 13.22% { transform: scaleY(0); } 16.67%, 29.89% { transform: scaleY(0.2); } 33.33%, 46.55% { transform: scaleY(0.4); } 50%, 63.22% { transform: scaleY(0.6); } 66.67%, 79.89% { transform: scaleY(0.8); } 83.33%, 98% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes fg-prog { 0%, 13.22% { width: 0; } 16.67%, 29.89% { width: 16.6667%; } 33.33%, 46.55% { width: 33.3333%; } 50%, 63.22% { width: 50%; } 66.67%, 79.89% { width: 66.6667%; } 83.33%, 98% { width: 83.3333%; } 100% { width: 0; } }

/* Passaggio da fare, fatto, in corso */
@keyframes fg-nd1 { 0% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } 6.9%, 11.49% { background: #ffc107; border-color: #d9a200; transform: scale(1.28); } 14.94%, 98% { background: #ffc107; border-color: #d9a200; transform: scale(1); } 100% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } }
@keyframes fg-nd2 { 0%, 13.22% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } 16.67% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } 23.57%, 28.16% { background: #ffc107; border-color: #d9a200; transform: scale(1.28); } 31.61%, 98% { background: #ffc107; border-color: #d9a200; transform: scale(1); } 100% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } }
@keyframes fg-nd3 { 0%, 29.89% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } 33.33% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } 40.23%, 44.83% { background: #ffc107; border-color: #d9a200; transform: scale(1.28); } 48.28%, 98% { background: #ffc107; border-color: #d9a200; transform: scale(1); } 100% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } }
@keyframes fg-nd4 { 0%, 46.55% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } 50% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } 56.9%, 61.49% { background: #ffc107; border-color: #d9a200; transform: scale(1.28); } 64.94%, 98% { background: #ffc107; border-color: #d9a200; transform: scale(1); } 100% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } }
@keyframes fg-nd5 { 0%, 63.22% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } 66.67% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } 73.57%, 78.16% { background: #ffc107; border-color: #d9a200; transform: scale(1.28); } 81.61%, 98% { background: #ffc107; border-color: #d9a200; transform: scale(1); } 100% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } }
@keyframes fg-nd6 { 0%, 79.89% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } 83.33% { background: #ffc107; border-color: #d9a200; transform: scale(1.6); } 90.23%, 98% { background: #ffc107; border-color: #d9a200; transform: scale(1.28); } 100% { background: #fafbfd; border-color: rgba(13, 46, 90, 0.4); transform: scale(1); } }

/* L'anello è l'unico movimento accorciato rispetto a prima: a 1,62 s
   sarebbe più lungo della tappa stessa e sconfinerebbe nella successiva. */
@keyframes fg-ring1 { 0% { opacity: 0.8; transform: scale(1.6); } 8.62% { opacity: 0; transform: scale(3); } 97% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0.8; transform: scale(1.6); } }
@keyframes fg-ring2 { 0%, 13.22% { opacity: 0; transform: scale(1.6); } 16.67% { opacity: 0.8; transform: scale(1.6); } 25.29% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fg-ring3 { 0%, 29.89% { opacity: 0; transform: scale(1.6); } 33.33% { opacity: 0.8; transform: scale(1.6); } 41.95% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fg-ring4 { 0%, 46.55% { opacity: 0; transform: scale(1.6); } 50% { opacity: 0.8; transform: scale(1.6); } 58.62% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fg-ring5 { 0%, 63.22% { opacity: 0; transform: scale(1.6); } 66.67% { opacity: 0.8; transform: scale(1.6); } 75.29% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fg-ring6 { 0%, 79.89% { opacity: 0; transform: scale(1.6); } 83.33% { opacity: 0.8; transform: scale(1.6); } 91.95% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(1.6); } }

/* Pausa manuale: il movimento si ferma dov'è, non salta alla fine */
.fg-hero.is-paused .fg-scene *,
.fg-hero.is-paused .fg-flow::after,
.fg-hero.is-paused .fg-flow li::before,
.fg-hero.is-paused .fg-flow li::after {
	animation-play-state: paused;
}

/* Movimento ridotto: niente animazione, resta il fotogramma finale */
@media (prefers-reduced-motion: reduce) {
	.fg-scene *,
	.fg-flow::after,
	.fg-flow li::before,
	.fg-flow li::after {
		animation: none;
	}
}

/* ── Adattamenti ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.fg-hero__grid,
	.fg-inside__grid {
		grid-template-columns: 1fr;
	}

	.fg-hero__art {
		justify-items: start;
	}

	.fg-scene {
		justify-content: flex-start;
	}

	.fg-scene__toggle {
		justify-self: start;
	}
}

@media (max-width: 760px) {
	/* Percorso e scena affiancati: il foglio rimpicciolito, il percorso in verticale.
	   I contenitori escono dal flusso e le parti si dispongono da sole nella griglia. */
	.fg-hero__grid {
		align-items: start;
		column-gap: 18px;
		grid-template-areas:
			"titolo    titolo"
			"sommario  sommario"
			"azioni    azioni"
			"etichetta etichetta"
			"percorso  foglio"
			"effetti   effetti"
			"comando   comando";
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		row-gap: 0;
	}

	.fg-hero__copy,
	.fg-hero__art,
	.fg-scene {
		display: contents;
	}

	.fg-hero__lead { grid-area: sommario; }
	.fg-hero .button-row { grid-area: azioni; }
	.fg-flow__label { grid-area: etichetta; }
	.fg-flow { grid-area: percorso; }
	.fg-scene__doc { grid-area: foglio; }
	.fg-scene__effects { grid-area: effetti; }
	.fg-scene__toggle { grid-area: comando; }

	.fg-hero h1 {
		font-size: clamp(2.3rem, 8.5vw, 3.4rem);
		grid-area: titolo;
	}

	/* Il percorso in verticale: la rotaia torna visibile e scende di passo in passo */
	.fg-flow__label {
		margin-top: 34px;
	}

	.fg-flow {
		font-size: 0.8125rem;
		gap: 20px;
		grid-template-columns: minmax(0, 1fr);
		line-height: 1.3;
		max-width: none;
		padding: 0 0 0 21px;
	}

	.fg-flow::before {
		bottom: calc(1.3em - 8.5px);
		height: auto;
		left: 5.5px;
		right: auto;
		top: 8.5px;
		width: 1px;
	}

	.fg-flow::after {
		animation-name: fg-progv;
		bottom: calc(1.3em - 8.5px);
		height: auto;
		left: 4px;
		top: 8.5px;
		transform: scaleY(1);
		transform-origin: top;
		width: 3px;
	}

	.fg-flow li {
		font-size: inherit;
		padding-left: 0;
	}

	.fg-flow li::before,
	.fg-flow li::after {
		left: -21px;
		top: 3px;
	}

	/* Il foglio rimpicciolito: stessa scena, misure ridotte perché resti leggibile */
	.fg-scene__doc {
		--fg-fan: 0.2;
		margin: 14px 0 0 14px;
		width: auto;
	}

	.fg-sheet {
		border-radius: 8px;
		min-height: 208px;
		padding: 13px 14px;
	}

	.fg-ghost {
		border-radius: 8px;
	}

	.fg-sheet__head {
		height: 16px;
	}

	.fg-lab {
		font-size: 0.5625rem;
		letter-spacing: 0.08em;
	}

	.fg-sheet__rule {
		height: 2px;
		margin: 8px 0 11px;
		width: 30px;
	}

	.fg-sheet__meta {
		font-size: 0.625rem;
		margin-bottom: 13px;
	}

	.fg-sheet__rules {
		gap: 7px;
	}

	.fg-r {
		border-radius: 3px;
		height: 6px;
	}

	/* Totale su due righe: da stretto non ci sta affiancato */
	.fg-sheet__total {
		align-items: flex-start;
		flex-direction: column;
		gap: 1px;
		margin-top: 12px;
		padding-top: 9px;
	}

	.fg-sheet__total small {
		font-size: 0.5625rem;
	}

	.fg-amt {
		min-width: 0;
		text-align: left;
	}

	.fg-amt > span {
		font-size: 0.8125rem;
	}

	.fg-amt--a {
		left: 0;
		right: auto;
	}

	.fg-scene__effects {
		gap: 7px;
		margin-top: 24px;
		width: 100%;
	}

	.fg-eff {
		font-size: 0.75rem;
		line-height: 1.35;
		padding: 7px 13px;
	}

	.fg-scene__toggle {
		margin-top: 20px;
	}

	.fg-band__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.fg-band strong {
		display: block;
		margin-bottom: 4px;
	}
}

@media (max-width: 480px) {
	.fg-hero .button-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.fg-eff {
		white-space: normal;
	}
}