/* nozze.ch — sito principale
   Mobile first. Lo snap a sezione intera si attiva solo su schermi grandi con
   mouse o trackpad (vedi "Desktop"); su telefono lo scorrimento resta libero.
   Niente immagini pesanti: la scatola, il telefono e il biglietto sono fatti
   in CSS, il paesaggio dell'Islanda e' un SVG (islanda.svg). */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("font/bricolage-grotesque-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("font/bricolage-grotesque-latin-ext.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--calce: #EEF0EC;
	--inchiostro: #23203F;
	--notte: #1C1934;
	--grafite: #5C5A70;
	--glicine: #6A57B5;
	--glicine-chiaro: #B3A6EA;
	--salvia: #C9D3C1;
	--champagne: #E6CB8F;
	--nebbia: #ECEBF2;
	--bianco: #FFFFFF;

	--carattere: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--testo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--titolo-1: clamp(3.25rem, 1.6rem + 6.4vw, 7.75rem);
	--titolo-2: clamp(2.25rem, 1.3rem + 4.2vw, 5.5rem);
	--titolo-3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);

	--margine: clamp(1.25rem, 4vw, 4rem);
	--testata: 4.5rem;
	--curva: cubic-bezier(0.2, 0.7, 0.2, 1);
	--molla: cubic-bezier(0.3, 1.35, 0.5, 1);

	color-scheme: light;
}

/* ---- Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--carattere);
	font-size: var(--testo);
	line-height: 1.55;
	color: var(--inchiostro);
	background: var(--notte);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	margin: 0;
	font-weight: 700;
	font-stretch: 85%;
	line-height: 0.96;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

h1 { font-size: var(--titolo-1); }
h2 { font-size: var(--titolo-2); }
h3 { font-size: var(--titolo-3); line-height: 1.15; letter-spacing: -0.01em; }

p { margin: 0; max-width: 62ch; text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

img { display: block; max-width: 100%; height: auto; }

:focus-visible {
	outline: 3px solid var(--accento, var(--glicine));
	outline-offset: 3px;
	border-radius: 2px;
}

.salta {
	position: fixed;
	z-index: 30;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.5rem 1rem;
	background: var(--inchiostro);
	color: var(--calce);
	translate: 0 -200%;
}
.salta:focus-visible { translate: 0 0; }

/* ---- Bottoni e collegamenti ----------------------------------------- */

.bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.625rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, scale 0.2s var(--curva), box-shadow 0.3s;
}
.bottone:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.bottone:active { scale: 0.96; }

.bottone-pieno {
	border-color: var(--accento);
	background: var(--accento);
	color: var(--su-accento);
	box-shadow: 0 0.75rem 2rem -0.75rem color-mix(in srgb, var(--accento) 80%, transparent);
}
.bottone-pieno:hover { background: color-mix(in srgb, var(--accento) 86%, var(--bianco)); }

.collegamento { font-weight: 600; }

/* ---- Testata e menu -------------------------------------------------- */

.testata {
	position: fixed;
	z-index: 20;
	inset: 0 0 auto;
	height: var(--testata);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 var(--margine);
	color: var(--inchiostro);
	transition: color 0.4s;
}
[data-tema="notte"] .testata,
[data-tema="glicine"] .testata { color: var(--calce); }

.marchio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.375rem;
	font-weight: 800;
	font-stretch: 85%;
	letter-spacing: -0.03em;
	text-decoration: none;
}
.marchio-pezzi { display: grid; grid-template-columns: repeat(2, 0.5rem); gap: 2px; }
.marchio-pezzi span { aspect-ratio: 1; border-radius: 2px; background: currentColor; }
.marchio-pezzi span:last-child { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

.testata-azione { display: none; }

.testata-menu {
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: transparent;
	cursor: pointer;
}

.menu {
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--testata) var(--margine) 2rem;
	border: 0;
	color: var(--calce);
	background: var(--notte);
}
.menu:popover-open { display: grid; align-content: center; }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.menu a {
	font-size: clamp(2rem, 9vw, 3.5rem);
	font-weight: 700;
	font-stretch: 85%;
	letter-spacing: -0.025em;
	text-decoration: none;
}
.menu-chiudi {
	position: absolute;
	top: calc((var(--testata) - 2.75rem) / 2);
	right: var(--margine);
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: transparent;
	cursor: pointer;
}

/* La navigazione a pezzi compare solo su desktop */
.navigazione { display: none; }

/* ---- Sezioni --------------------------------------------------------- */

.sezione {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-content: center;
	padding: calc(var(--testata) + 2rem) var(--margine) 3.5rem;
	overflow-x: clip;
	scroll-snap-align: start;
	color: var(--colore);
	background: var(--sfondo);
	--accento: var(--glicine);
	--su-accento: var(--bianco);
	--secondario: var(--grafite);
}

.sezione[data-tema="chiaro"] { --sfondo: var(--calce); --colore: var(--inchiostro); }
.sezione[data-tema="notte"] {
	--colore: var(--calce);
	--accento: var(--glicine-chiaro);
	--su-accento: var(--notte);
	--secondario: color-mix(in srgb, var(--calce) 70%, var(--notte));
	--sfondo:
		radial-gradient(55% 60% at var(--luce-x, 72%) 52%, color-mix(in srgb, var(--glicine) 38%, transparent), transparent 72%),
		var(--notte);
}
.sezione[data-tema="glicine"] {
	--sfondo: var(--glicine);
	--colore: var(--bianco);
	--accento: var(--bianco);
	--su-accento: var(--glicine);
	--secondario: color-mix(in srgb, var(--bianco) 82%, var(--glicine));
}
.sezione[data-tema="salvia"] { --sfondo: var(--salvia); --colore: var(--inchiostro); --secondario: #4A4860; }

.contenuto {
	width: 100%;
	max-width: 80rem;
	display: grid;
	gap: clamp(1.25rem, 3vh, 2rem);
	align-content: center;
}

/* ---- Inizio: la scatola regalo -------------------------------------- */

.inizio { gap: 2.5rem; }
.inizio-testo { display: grid; gap: 1.5rem; }
.inizio-sotto { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); color: var(--secondario); max-width: 46ch; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.palco {
	--s: clamp(8.5rem, 34vw, 11rem);
	--px: 0;
	--py: 0;
	position: relative;
	display: grid;
	place-items: center;
	min-height: calc(var(--s) * 3);
	perspective: 1600px;
}
.palco::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--s) * 3.2);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--glicine-chiaro) 34%, transparent), transparent);
}
.palco::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(50% + var(--s) * 0.92);
	width: calc(var(--s) * 2.1);
	height: calc(var(--s) * 0.42);
	translate: -50% 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(5 3 20 / 0.6), transparent);
}

.scatola {
	position: relative;
	z-index: 1;
	width: var(--s);
	height: var(--s);
	transform-style: preserve-3d;
	transform: rotateX(calc(-30deg + var(--py) * 8deg)) rotateY(calc(-38deg + var(--px) * 16deg));
	transition: transform 0.8s var(--curva);
}

.faccia {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template: repeat(4, 1fr) / repeat(4, 1fr);
	gap: calc(var(--s) * 0.02);
	padding: calc(var(--s) * 0.02);
	transform-style: preserve-3d;
}
.faccia-sopra { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); --luce: #A897F0; --ombra: #8670DA; }
.faccia-davanti { transform: translateZ(calc(var(--s) / 2)); --luce: #7C68CB; --ombra: #6250AE; }
.faccia-lato { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); --luce: #57479F; --ombra: #463885; }

/* Il nastro: una fascia su ogni faccia, due sul coperchio */
.faccia::before,
.faccia-sopra::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 43%;
	width: 14%;
	top: 0;
	bottom: 0;
	background: linear-gradient(90deg, #C7A660, #F4E2B6 45%, #D4B572);
	transform: translateZ(1px);
}
.faccia-sopra::after { left: 0; right: 0; width: auto; top: 43%; bottom: auto; height: 14%; background: linear-gradient(#C7A660, #F4E2B6 45%, #D4B572); }
.faccia-lato::before { filter: brightness(0.72); }

.tassello {
	border-radius: calc(var(--s) * 0.022);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.tassello.pieno {
	background: linear-gradient(150deg, var(--luce), var(--ombra));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}

/* Il fiocco sta in piedi sul coperchio e guarda verso chi legge */
.fiocco {
	position: absolute;
	z-index: 2;
	left: calc(50% - var(--s) * 0.3);
	top: calc(50% - var(--s) * 0.3);
	width: calc(var(--s) * 0.6);
	height: calc(var(--s) * 0.3);
	transform-origin: 50% 100%;
	transform: translateZ(2px) rotateZ(-38deg) rotateX(-90deg);
}
.fiocco span {
	position: absolute;
	bottom: 0;
	width: 50%;
	height: 100%;
	border: calc(var(--s) * 0.05) solid #E4C886;
	border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
}
.fiocco span:first-child { right: 50%; rotate: -16deg; transform-origin: 100% 100%; border-right-color: #C9A862; }
.fiocco span:last-child { left: 50%; rotate: 16deg; transform-origin: 0 100%; border-left-color: #C9A862; }

/* I biglietti dei regali che arrivano */
.biglietto {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.625rem;
	align-items: center;
	max-width: 15.5rem;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	border-radius: 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.25;
	color: var(--inchiostro);
	background: rgb(255 255 255 / 0.94);
	box-shadow: 0 1.25rem 2.5rem -1rem rgb(5 3 20 / 0.6);
}
.biglietto-iniziale {
	grid-row: span 2;
	width: 2.25rem;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 700;
	color: var(--bianco);
	background: var(--glicine);
}
.biglietto-2 .biglietto-iniziale { background: #6F8A63; }
.biglietto-3 .biglietto-iniziale { background: #B48A3C; }
.biglietto-importo { color: var(--grafite); font-variant-numeric: tabular-nums; }
.palco .biglietto { position: absolute; z-index: 2; }

.biglietto-1 { top: 0; right: 0; }
.biglietto-2 { bottom: 0; left: 0; }
.biglietto-3 { display: none; }

/* ---- Senza negozio -------------------------------------------------- */

.negozio { gap: clamp(1.5rem, 4vh, 2.75rem); }

.barrate {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3em;
	font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
	font-weight: 600;
	font-stretch: 85%;
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.barrate li { justify-self: start; color: color-mix(in srgb, var(--colore) 45%, var(--sfondo)); }
.barrate span {
	padding: 0 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: linear-gradient(var(--glicine), var(--glicine)) 0 58% / 100% 0.1em no-repeat;
}

.negozio-adesso { display: grid; gap: 1.5rem; justify-items: start; }
.negozio-adesso > p:first-child {
	position: relative;
	max-width: 34ch;
	padding-left: 1.5rem;
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	font-weight: 500;
	line-height: 1.35;
}
.negozio-adesso > p:first-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 0.3rem;
	border-radius: 1rem;
	background: var(--glicine);
}

/* ---- Come si regala: il telefono ------------------------------------ */

.tocchi { gap: 2.5rem; }
.tocchi-testo { display: grid; gap: 1.5rem; }

.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.passo {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	column-gap: 0.875rem;
	width: 100%;
	padding: 1rem 1.25rem 1.125rem;
	border: 0;
	border-radius: 1.25rem;
	font: inherit;
	text-align: left;
	color: inherit;
	background: rgb(255 255 255 / 0.08);
	cursor: pointer;
	overflow: hidden;
	transition: background-color 0.3s;
}
.passo:hover { background: rgb(255 255 255 / 0.14); }
.passo[aria-pressed="true"] { background: rgb(255 255 255 / 0.2); }
.passo-numero {
	grid-row: span 2;
	font-size: 2.5rem;
	font-weight: 800;
	font-stretch: 75%;
	line-height: 0.9;
	color: var(--glicine-chiaro);
}
.passo[aria-pressed="true"] .passo-numero { color: var(--bianco); }
.passo-titolo { font-size: var(--titolo-3); font-weight: 700; font-stretch: 85%; line-height: 1.15; letter-spacing: -0.01em; }
.passo-testo { color: var(--secondario); }
.passo-avanzamento {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--bianco);
	transform-origin: left;
	scale: 0 1;
}
.passo[data-gira] .passo-avanzamento { animation: avanza var(--durata, 3s) linear forwards; }
@keyframes avanza { to { scale: 1 1; } }

.tocchi-telefono { position: relative; display: grid; place-items: center; }
.tocchi-telefono::before {
	content: "";
	position: absolute;
	width: 140%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 255 255 / 0.22), transparent);
}

.telefono {
	--l: min(17.5rem, 72vw);
	position: relative;
	width: var(--l);
	aspect-ratio: 9 / 19;
	padding: calc(var(--l) * 0.032);
	border-radius: calc(var(--l) * 0.155);
	background: linear-gradient(160deg, #47416F, #17142C 55%);
	box-shadow:
		inset 0 0 0 1.5px rgb(255 255 255 / 0.16),
		0 3rem 5rem -2rem rgb(16 12 44 / 0.75),
		0 1.5rem 2rem -1.5rem rgb(16 12 44 / 0.5);
	container-type: inline-size;
}
.telefono::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: calc(var(--l) * 0.06);
	left: 50%;
	width: 30%;
	height: calc(var(--l) * 0.08);
	translate: -50% 0;
	border-radius: 999px;
	background: #100E20;
}
.schermo {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--l) * 0.125);
	background: #F6F6F9;
}

/* Le schermate del sito degli sposi, dentro il telefono */
.app {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	padding: 3.4em 1.1em 1.3em;
	font-size: 4.4cqi;
	line-height: 1.3;
	color: var(--inchiostro);
	background: #F6F6F9;
	transition: translate 0.6s var(--curva), opacity 0.6s;
}
.app[data-stato="dopo"] { translate: 100% 0; }
.app[data-stato="prima"] { translate: -30% 0; opacity: 0; }
.app p, .app ul { margin: 0; max-width: none; }
.app ul { list-style: none; padding: 0; }

.app .app-indirizzo {
	align-self: center;
	margin-top: -0.5em;
	padding: 0.25em 0.9em;
	border-radius: 999px;
	font-size: 0.8em;
	color: var(--grafite);
	background: var(--nebbia);
}
.app-copertina {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 8.5em;
	padding: 1em;
	border-radius: 1em;
	color: var(--bianco);
	background: url("islanda.svg") center / cover;
}
.app-nomi { font-size: 1.75em; font-weight: 700; font-stretch: 85%; line-height: 1; letter-spacing: -0.02em; }
.app-data { font-size: 0.85em; opacity: 0.85; }
.app-titolo { font-size: 1.15em; font-weight: 700; font-stretch: 85%; line-height: 1.15; }

.app-regali { display: grid; gap: 0.5em; }
.app-regalo,
.app-riepilogo {
	position: relative;
	display: grid;
	grid-template-columns: 2.6em 1fr;
	column-gap: 0.7em;
	align-items: center;
	padding: 0.55em;
	border-radius: 0.9em;
	background: var(--bianco);
	box-shadow: 0 1px 2px rgb(35 32 63 / 0.08);
}
.app-icona {
	grid-row: span 3;
	width: 2.6em;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 0.6em;
	background: var(--salvia);
}
.app-icona svg { width: 60%; fill: none; stroke: var(--inchiostro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-icona-viaggio { background: url("islanda.svg") center / cover; }
.app-icona-valigie { background: var(--glicine-chiaro); }
.app-icona-piatti { background: var(--nebbia); }
.app-icona-bici { background: var(--champagne); }
.app-regalo-nome { font-weight: 600; line-height: 1.2; }
.app-regalo-prezzo { font-size: 0.85em; color: var(--grafite); }
.app-barra {
	height: 0.3em;
	margin-top: 0.3em;
	border-radius: 1em;
	background: linear-gradient(var(--glicine), var(--glicine)) 0 0 / var(--fatto) 100% no-repeat, var(--nebbia);
}

.app-indietro { font-weight: 600; color: var(--glicine); }
.app-indietro::before { content: "‹ "; }
.app-foto { aspect-ratio: 16 / 10; border-radius: 1em; background: url("islanda.svg") center / cover; }
.app-nota { font-size: 0.9em; color: var(--grafite); }
.app-quanti {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.55em 0.8em;
	border-radius: 0.9em;
	background: var(--bianco);
}
.app-quanti > span:first-child { flex: 1; font-weight: 600; }
.app-quanti strong { min-width: 1.2em; text-align: center; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.app-tasto {
	position: relative;
	width: 2.2em;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 700;
	background: var(--nebbia);
}
.app-sottotitolo { font-weight: 600; }
.app-tagli { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.app-taglio {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: end;
	gap: 0.35em;
	min-height: 4.2em;
	padding: 0.55em 0.3em 0.45em;
	border-radius: 0.8em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: var(--bianco);
	transition: box-shadow 0.25s, color 0.25s;
}
.app-taglio.scelto { color: var(--glicine); box-shadow: inset 0 0 0 1.5px var(--glicine); }

/* La forma di un pezzo: --c colonne per --h righe di quadratini */
.forma {
	--q: 0.5em;
	width: calc(var(--c) * var(--q) + (var(--c) - 1) * 2px);
	height: calc(var(--h) * var(--q) + (var(--h) - 1) * 2px);
	border-radius: 2px;
	background: currentColor;
	opacity: 0.85;
}
.app-taglio .forma { --q: 0.55em; color: var(--glicine-chiaro); }
.app-taglio.scelto .forma { color: var(--glicine); }

.app .app-totale { display: flex; justify-content: space-between; margin-top: auto; }
.app-totale strong { font-variant-numeric: tabular-nums; }
.app-bottone {
	position: relative;
	padding: 0.85em;
	border-radius: 999px;
	text-align: center;
	font-weight: 700;
	color: var(--bianco);
	background: var(--glicine);
}

.app-riepilogo { grid-template-columns: 2.6em 1fr auto; }
.app-riepilogo .app-icona { grid-row: auto; }
.app-campo { padding: 0.5em 0.8em; border-radius: 0.8em; background: var(--bianco); }
.app-campo span { display: block; font-size: 0.75em; color: var(--grafite); }
.app-pagamenti { display: grid; gap: 0.4em; }
.app-pagamenti li {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0.8em;
	border-radius: 0.8em;
	background: var(--bianco);
}
.app-pagamenti li::before {
	content: "";
	width: 1em;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--grafite);
}
.app-pagamenti .scelto { box-shadow: inset 0 0 0 1.5px var(--glicine); }
.app-pagamenti .scelto::before { box-shadow: inset 0 0 0 0.3em var(--glicine); }
[data-schermata="2"] .app-bottone { margin-top: auto; }

.app-fatto { justify-content: center; align-items: center; text-align: center; gap: 0.8em; }
.app-spunta {
	width: 4.5em;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--glicine);
	box-shadow: 0 0 0 0.6em color-mix(in srgb, var(--glicine) 18%, transparent);
}
.app-spunta svg { width: 55%; fill: none; stroke: var(--bianco); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
.app-grazie { font-size: 1.6em; font-weight: 700; font-stretch: 85%; line-height: 1.1; }
.app-progresso {
	position: relative;
	width: 85%;
	height: 0.6em;
	margin-top: 0.6em;
	overflow: hidden;
	border-radius: 1em;
	background: var(--nebbia);
}
.app-progresso span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 66.9%;
	border-radius: 1em;
	background: linear-gradient(90deg, var(--glicine) 97%, var(--champagne) 97%);
}

/* Il dito che tocca */
.toccato::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3em;
	aspect-ratio: 1;
	margin: -1.5em 0 0 -1.5em;
	border-radius: 50%;
	background: rgb(35 32 63 / 0.3);
	animation: tocco 0.55s ease-out forwards;
	pointer-events: none;
}
@keyframes tocco {
	from { scale: 0.2; opacity: 1; }
	to { scale: 1.7; opacity: 0; }
}

/* ---- I regali a pezzi: il mosaico ----------------------------------- */

#pezzi { --luce-x: 30%; }
.pezzi-sezione { gap: 2.5rem; }
.pezzi-testo { display: grid; gap: 1.25rem; align-content: start; }
.pezzi-testo > p { color: var(--secondario); }
.regalo-stato { color: var(--colore) !important; }
.regalo-stato strong { font-size: 1.75rem; font-weight: 700; font-stretch: 85%; font-variant-numeric: tabular-nums; }

.mosaico {
	container-type: inline-size;
	margin: 0;
	display: grid;
	grid-template: repeat(10, 1fr) / repeat(16, 1fr);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 1.25rem;
	background: url("islanda.svg") center / cover;
	box-shadow: 0 2.5rem 5rem -2rem rgb(5 3 20 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.mosaico-pezzi { display: contents; }
.mosaico-pezzo { position: relative; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.mosaico-pezzo::before {
	content: attr(data-valore);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: rgb(255 255 255 / 0.5);
	background: #2A2648;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
	transition: opacity 0.6s, scale 0.6s var(--curva);
}
@container (min-width: 26rem) {
	.mosaico-pezzo::before { font-size: 1.7cqi; }
}
.mosaico-pezzo.pieno::before { opacity: 0; scale: 0.3; }
.mosaico-pezzo.nuovo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--champagne);
	animation: lampo 0.9s ease-out forwards;
}
@keyframes lampo {
	from { opacity: 0.9; }
	to { opacity: 0; }
}

/* Il cartellino del regalo occupa 4x3 celle in alto a sinistra */
.mosaico-cartellino {
	grid-area: 1 / 1 / span 3 / span 4;
	z-index: 1;
	display: grid;
	align-content: center;
	gap: 0.2em;
	margin: 6%;
	padding: 0.5em 0.7em;
	border-radius: 0.5rem;
	font-size: max(0.6875rem, 2cqi);
	line-height: 1.2;
	color: var(--inchiostro);
	background: var(--bianco);
	box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(5 3 20 / 0.7);
}
.mosaico-cartellino strong { font-stretch: 85%; letter-spacing: -0.01em; }
/* Su schermi stretti il cartellino tiene solo il prezzo */
@container (max-width: 30rem) {
	.mosaico-cartellino { margin: 8%; padding: 0.3em 0.4em; font-size: 3.4cqi; font-weight: 600; text-align: center; }
	.mosaico-cartellino strong { display: none; }
}

/* I quattro tagli: un bottone per misura, con la sua forma */
.tagli { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.tagli-titolo { flex-basis: 100%; font-weight: 600; }
.taglio {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0.5rem 1.125rem;
	border: 2px solid var(--glicine-chiaro);
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--notte);
	background: var(--glicine-chiaro);
	cursor: pointer;
	transition: background-color 0.2s, scale 0.2s var(--curva), opacity 0.2s;
}
.taglio:hover { background: color-mix(in srgb, var(--glicine-chiaro) 80%, var(--bianco)); }
.taglio:active { scale: 0.95; }
.taglio:disabled { opacity: 0.35; cursor: default; scale: 1; }
.taglio .forma { --q: 0.4375rem; color: var(--notte); }
.tagli-ricomincia {
	min-height: 3rem;
	padding: 0;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: none;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- L'indirizzo: la partecipazione --------------------------------- */

.indirizzo { gap: 3rem; }
.indirizzo-testo { display: grid; gap: 1.25rem; align-content: start; }
.indirizzo-testo > p { color: var(--secondario); }
.indirizzo-prova { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.indirizzo-prova label { font-weight: 600; }
.indirizzo-prova input {
	width: min(100%, 26rem);
	min-height: 3.25rem;
	padding: 0.625rem 1.125rem;
	border: 2px solid color-mix(in srgb, var(--inchiostro) 18%, transparent);
	border-radius: 999px;
	font: inherit;
	color: var(--inchiostro);
	background: var(--bianco);
	transition: border-color 0.2s;
}
.indirizzo-prova input:focus { border-color: var(--glicine); }
.indirizzo-prova input::placeholder { color: var(--grafite); }

.partecipazione {
	container-type: inline-size;
	position: relative;
	justify-self: center;
	width: min(calc(100% - 3rem), 23rem);
	translate: 0.75rem 0;
	aspect-ratio: 5 / 7;
	padding: 2.75rem 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	background: var(--bianco);
	border-radius: 0.375rem;
	rotate: 3deg;
	box-shadow:
		-1.5rem 1.25rem 0 -0.25rem var(--glicine-chiaro),
		0 2.5rem 4rem -2rem rgb(35 32 63 / 0.4);
}
.partecipazione::before {
	content: "";
	position: absolute;
	inset: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--glicine) 35%, transparent);
	border-radius: 0.25rem;
	pointer-events: none;
}
.partecipazione p { max-width: none; }
.partecipazione-segno { display: grid; grid-template-columns: repeat(2, 0.625rem); gap: 3px; }
.partecipazione-centro,
.partecipazione-piede { display: grid; gap: 0.75rem; justify-items: center; }
.partecipazione-segno span { aspect-ratio: 1; border-radius: 2px; background: var(--glicine); }
.partecipazione-segno span:last-child { background: var(--champagne); }
.partecipazione-nomi {
	font-size: 15cqi;
	font-weight: 300;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.partecipazione-annuncio { font-size: 4.4cqi; line-height: 1.45; color: var(--grafite); }
.partecipazione-lista { font-size: 3.8cqi; color: var(--grafite); }
.partecipazione-piede { gap: 0.25rem; }
.partecipazione-indirizzo {
	font-size: 6.6cqi;
	font-weight: 700;
	line-height: 1.15;
	color: var(--glicine);
	overflow-wrap: anywhere;
}

/* ---- Per gli sposi: il pannello ------------------------------------- */

.sposi { gap: 3rem; }
.sposi-testo { display: grid; gap: 1.25rem; align-content: start; }
.sposi-testo > p { color: var(--secondario); }

.pannello {
	width: min(100%, 30rem);
	justify-self: center;
	padding: 1.25rem 1.375rem 0.5rem;
	border-radius: 1.5rem;
	background: var(--bianco);
	box-shadow: 0 2.5rem 4rem -2rem rgb(35 32 63 / 0.4);
}
.pannello p { max-width: none; }
.pannello-testata {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--nebbia);
	font-weight: 600;
}
.pannello-testata strong { font-size: 1.625rem; font-stretch: 85%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pannello-regali { list-style: none; margin: 0; padding: 0; }
.pannello-regali li {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	column-gap: 0.75rem;
	align-items: center;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--nebbia);
}
.pannello-regali li:last-child { border-bottom: 0; }
.pannello-iniziale {
	grid-row: span 2;
	align-self: start;
	width: 2.5rem;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 700;
	background: var(--glicine-chiaro);
}
.pannello-regali li:nth-child(2) .pannello-iniziale { background: var(--salvia); }
.pannello-regali li:nth-child(3) .pannello-iniziale { background: var(--champagne); }
.pannello-chi { font-weight: 600; }
.pannello-chi em { margin-left: 0.375rem; font-style: normal; font-weight: 400; font-size: 0.8125rem; color: var(--grafite); }
.pannello-importo { grid-column: 3; grid-row: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pannello-cosa { grid-column: 2 / -1; font-size: 0.9375rem; color: var(--grafite); }
.pannello-messaggio {
	grid-column: 2 / -1;
	justify-self: start;
	margin-top: 0.5rem;
	padding: 0.375rem 0.75rem;
	border-radius: 0.25rem 0.875rem 0.875rem 0.875rem;
	font-size: 0.875rem;
	background: var(--nebbia);
}

/* ---- Esempi ---------------------------------------------------------- */

.esempi { display: grid; gap: 2.5rem; margin-top: clamp(0.5rem, 3vh, 2rem); }
.esempio { display: grid; gap: 1rem; align-content: start; }
.esempio-principale { gap: 1.5rem; }
.esempio-figura {
	position: relative;
	margin: 0;
	max-width: 17rem;
	padding: 1.25rem 1.25rem 0;
	border-radius: 1.5rem;
	background: var(--bianco);
	box-shadow: 0 2rem 3rem -2rem rgb(35 32 63 / 0.35);
	rotate: -2deg;
}
.esempio-firma { width: 70%; margin: -1.5rem 0 1rem auto; }
.esempio-testo { display: grid; gap: 0.75rem; align-content: start; }
.esempio-data { color: var(--secondario); }
.esempio-testo .bottone { margin-top: 0.5rem; }
.esempio-secondario {
	padding: 1.5rem;
	border: 2px solid color-mix(in srgb, var(--inchiostro) 18%, transparent);
	border-radius: 1.5rem;
}
.esempio-nota { color: var(--secondario); font-size: 0.9375rem; }

/* ---- Contatti -------------------------------------------------------- */

.contatti { gap: 2.5rem; }
.contatti-testo { display: grid; gap: 1.25rem; align-content: start; }
.contatti-testo p { color: var(--secondario); }

.modulo { display: grid; gap: 0.375rem; max-width: 34rem; }
.modulo label { margin-top: 0.75rem; font-weight: 600; }
.modulo label:first-of-type { margin-top: 0; }
.modulo input,
.modulo textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem 1.125rem;
	border: 2px solid rgb(255 255 255 / 0.4);
	border-radius: 1rem;
	font: inherit;
	color: var(--bianco);
	background: rgb(255 255 255 / 0.1);
	transition: border-color 0.2s, background-color 0.2s;
}
.modulo textarea { resize: vertical; min-height: 6rem; }
.modulo input:focus,
.modulo textarea:focus { border-color: var(--bianco); background: rgb(255 255 255 / 0.16); }
.modulo :focus-visible { outline-color: var(--bianco); }
.modulo ::placeholder { color: rgb(255 255 255 / 0.62); }
.modulo .bottone { margin-top: 1.25rem; justify-self: start; }

.esito {
	margin-bottom: 1rem;
	padding: 0.875rem 1rem;
	border-radius: 1rem;
	color: var(--inchiostro);
	background: var(--bianco);
}
.esito-errore { background: #F6D2CE; }

.piede {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.25);
	font-size: 0.875rem;
	color: var(--secondario);
}

/* ---- Movimento -------------------------------------------------------
   Il JavaScript segna con data-attiva la sezione al centro dello schermo:
   i suoi elementi entrano in sequenza (--i). Senza JavaScript la classe .js
   manca e tutto resta visibile. */

@media (prefers-reduced-motion: no-preference) {
	.js .entra {
		transition: opacity 0.7s var(--curva), translate 0.7s var(--curva), clip-path 0.9s var(--curva);
		transition-delay: calc(var(--i, 0) * 90ms + 100ms);
	}
	.js .sezione:not([data-attiva]) .entra {
		opacity: 0;
		translate: 0 1.5rem;
		transition-duration: 0s;
		transition-delay: 0s;
	}
	.js .entra-titolo { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
	.js .sezione:not([data-attiva]) .entra-titolo {
		clip-path: inset(0 0 100% 0);
		translate: 0 0.35em;
	}

	/* La scatola si compone all'apertura: i primi 17 pezzi in fila, poi
	   arrivano i regali dei tre biglietti (pezzi 17, 18 e 19). */
	.tassello.pieno {
		--dopo: clamp(0, var(--r) - 16, 1);
		animation: vola 1.1s var(--molla) both;
		animation-delay: calc(((1 - var(--dopo)) * (500 + 60 * var(--r)) + var(--dopo) * 3000 + clamp(0, var(--r) - 17, 1) * 2400 + clamp(0, var(--r) - 18, 1) * 2400) * 1ms);
	}
	@keyframes vola {
		from {
			opacity: 0;
			transform: translate3d(calc(sin(var(--r) * 1.7rad) * var(--s) * 0.8), calc(cos(var(--r) * 2.3rad) * var(--s) * 0.8), calc(var(--s) * 1.6)) rotate(calc(sin(var(--r) * 3rad) * 120deg));
		}
	}
	.palco .biglietto {
		animation: arriva 0.7s var(--molla) both;
		animation-delay: 2.7s;
	}
	.biglietto-2 { animation-delay: 5.1s; }
	.biglietto-3 { animation-delay: 7.5s; }
	@keyframes arriva {
		from { opacity: 0; translate: 0 1.25rem; scale: 0.9; }
	}

	/* Le cose che non servono piu' si barrano una dopo l'altra */
	.js .barrate li { transition: color 0.4s; transition-delay: calc(var(--i) * 380ms + 500ms); }
	.js .barrate span { transition: background-size 0.6s var(--curva); transition-delay: calc(var(--i) * 380ms + 350ms); }
	.js .sezione:not([data-attiva]) .barrate li { color: var(--colore); transition-duration: 0s; transition-delay: 0s; }
	.js .sezione:not([data-attiva]) .barrate span { background-size: 0% 0.1em; transition-duration: 0s; transition-delay: 0s; }

	/* La spunta del pagamento si disegna */
	.app-fatto[data-stato="attuale"] .app-spunta { animation: posa 0.5s var(--molla) both 0.2s; }
	.app-fatto[data-stato="attuale"] .app-spunta path { animation: disegna 0.45s var(--curva) both 0.5s; }
	.app-fatto[data-stato="attuale"] .app-progresso span { animation: cresce 0.8s var(--curva) both 0.9s; }
	@keyframes cresce { from { width: 64.9%; } }
	@keyframes disegna { from { stroke-dashoffset: 24; } }

	/* Il mosaico si compone quando la sezione arriva */
	.js .mosaico-pezzo.pieno::before { transition-delay: calc(var(--r) * 28ms + 400ms); }
	.js .sezione:not([data-attiva]) .mosaico-pezzo.pieno::before { opacity: 1; scale: 1; transition-duration: 0s; transition-delay: 0s; }
	.js .mosaico-pezzo.nuovo::before { transition-delay: 0s; }

	/* I regali arrivano nel pannello */
	.js .pannello-regali li { transition: opacity 0.5s, translate 0.6s var(--molla); transition-delay: calc(var(--j) * 160ms + 450ms); }
	.js .sezione:not([data-attiva]) .pannello-regali li { opacity: 0; translate: 0 -0.75rem; transition-duration: 0s; transition-delay: 0s; }

	@keyframes posa {
		from { scale: 0.3; opacity: 0; }
	}
}

/* Scorrimenti legati allo scroll, dove il browser li supporta */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.contenuto {
			animation: risale linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
		@keyframes risale {
			from { translate: 0 14vh; }
		}
		.partecipazione {
			animation: gira linear both;
			animation-timeline: view();
		}
		@keyframes gira {
			from { rotate: 9deg; }
			to { rotate: -2deg; }
		}
	}
}

/* ---- Tablet ---------------------------------------------------------- */

@media (min-width: 40em) {
	.palco { --s: 12rem; }
	.biglietto-1 { right: 6%; }
	.biglietto-2 { left: 6%; }
	.biglietto-3 { display: grid; top: 46%; right: -1%; }
}

@media (min-width: 48em) {
	.esempio-principale { grid-template-columns: minmax(12rem, 17rem) 1fr; align-items: center; gap: 2.5rem; }
}

/* ---- Desktop --------------------------------------------------------- */

@media (min-width: 64em) {
	.testata-azione {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.5rem 1.25rem;
		border: 2px solid currentColor;
		border-radius: 999px;
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.2s;
	}
	.testata-azione:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
	.testata-menu { display: none; }

	.sezione { padding-right: calc(var(--margine) + 10rem); }

	.inizio { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 2rem; }
	.palco { --s: min(16.5rem, calc((100dvh - 12rem) / 2.3)); min-height: calc(var(--s) * 2.6); }
	.biglietto-1 { top: 2%; right: 4%; }
	.biglietto-2 { bottom: 4%; left: 0; }
	.biglietto-3 { top: 50%; right: -9%; }

	.negozio { grid-template-columns: 1.25fr 0.75fr; align-items: end; column-gap: 4rem; }
	.negozio h2 { grid-column: 1 / -1; }

	.tocchi { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
	.telefono { --l: min(18.5rem, calc((100dvh - 8rem) / 2.11)); }

	.pezzi-sezione { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 3.5rem; }
	.mosaico { width: min(100%, calc((100dvh - 12rem) * 1.6)); justify-self: end; }

	.indirizzo { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
	.partecipazione { width: min(23rem, calc((100dvh - 12rem) * 5 / 7)); translate: none; }

	.sposi { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }

	.esempi { grid-template-columns: 1.6fr 1fr; align-items: start; gap: 4rem; }
	.esempio-secondario { margin-top: 6rem; }
	.contatti { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 4rem; }
	.piede { grid-column: 1 / -1; }

	/* La navigazione laterale: un pezzo per sezione */
	.navigazione {
		display: block;
		position: fixed;
		z-index: 20;
		top: 50%;
		right: var(--margine);
		translate: 0 -50%;
		color: var(--inchiostro);
		transition: color 0.4s;
	}
	[data-tema="notte"] .navigazione,
	[data-tema="glicine"] .navigazione { color: var(--calce); }
	.navigazione ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; justify-items: end; }
	.navigazione a {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 2rem;
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
	}
	.navigazione-pezzo {
		width: 0.875rem;
		aspect-ratio: 1;
		border-radius: 0.1875rem;
		box-shadow: inset 0 0 0 2px currentColor;
		transition: background-color 0.3s, scale 0.3s var(--curva);
	}
	.navigazione a[aria-current="true"] .navigazione-pezzo { background: currentColor; scale: 1.2; }
	.navigazione-etichetta {
		opacity: 0;
		translate: 0.5rem 0;
		transition: opacity 0.25s, translate 0.25s var(--curva);
	}
	.navigazione a:hover .navigazione-etichetta,
	.navigazione a:focus-visible .navigazione-etichetta,
	.navigazione a[aria-current="true"] .navigazione-etichetta { opacity: 1; translate: 0 0; }
}

/* Lo snap a sezione intera: ogni movimento della rotella porta alla sezione
   successiva (scroll-snap-stop: always impedisce di saltarne una). Solo con
   puntatore preciso e schermo abbastanza alto da contenere ogni sezione. */
@media (min-width: 64em) and (min-height: 40em) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	html { scroll-snap-type: y mandatory; }
	.sezione {
		height: 100dvh;
		min-height: 0;
		padding-top: calc(var(--testata) + 1rem);
		padding-bottom: 2rem;
		overflow: hidden;
		scroll-snap-stop: always;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}