/* =========================================================
   Home "museo".
   ========================================================= */

.header--museum .site-header:not(.is-scrolled),
.in-museum .site-header.is-scrolled { background: linear-gradient(rgb(11 10 16 / .75), transparent); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Palcoscenico 3D ---------- */
.museum { position: relative; }
.museum--3d .museum__track { height: calc(var(--steps, 10) * 100svh); } /* il percorso dei servizi */
.museum__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; touch-action: pan-y; } /* swipe orizzontale = giostra */
.museum--3d .museum__stage { margin-bottom: -100svh; } /* resta dietro anche a loghi e modulo */
.museum__canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.museum__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(5 4 8 / .75) 100%); }
.museum__controls {
	position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 3; translate: -50% 12px;
	display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--radius-pill);
	background: rgb(18 17 22 / .82); box-shadow: var(--hairline), 0 12px 28px -14px rgb(0 0 0 / .9);
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease-out), translate .4s var(--ease-out), visibility 0s .4s;
}
.museum__controls.is-visible { opacity: 1; visibility: visible; translate: -50% 0; pointer-events: auto; transition-delay: 0s; } /* nascosti = fuori dal Tab */
.museum__arrow { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.museum__arrow::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat; mask: url("../icons/arrow-right.svg") center / contain no-repeat; }
.museum__arrow--prev::before { transform: scaleX(-1); }
.museum__arrow:hover { background: rgb(255 255 255 / .08); }
.museum__dots { display: flex; align-items: center; }
.museum__dot { width: 24px; overflow: visible; height: 40px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.museum__dot::before { content: ""; width: 18px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .35); transform: scaleX(.34); transition: transform .35s var(--ease-out), background-color .3s; }
.museum__dot:hover::before { background: rgb(255 255 255 / .7); }
.museum__dot.is-active::before { transform: none; background: var(--magenta); }
@media (max-width: 480px) { .museum__dot { width: 14px; } .museum__arrow { width: 36px; height: 36px; } }

/* ---------- Box dei servizi (HTML posizionato sulla prospettiva 3D) ---------- */
/* Misure in em: il JS cambia il font-size e il box si impagina alla grandezza reale (testo nitido). */
.museum__boards { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.board {
	--u: 1;
	position: absolute; left: 0; top: 0; width: 18em; height: 27em; display: none;
	transform-origin: 50% 50%; pointer-events: auto; cursor: pointer;
	font-family: var(--font, "Manrope", system-ui, sans-serif);
}
/* Ombra vera (offset + sfocatura) su un livello che segue il telo srotolato: il clip-path la taglierebbe. */
.board__glow { position: absolute; inset: 0 0 auto; height: calc(var(--u) * 100%); border-radius: .9em; box-shadow: 0 1.6em 3.2em -1.2em rgb(0 0 0 / .85), 0 .4em 1em -.4em rgb(0 0 0 / .6); }
.board__rod, .board__weight { display: none; }
.board__cloth {
	position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: .9em;
	background: #121116;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), inset 0 1px 0 rgb(255 255 255 / .06);
	clip-path: inset(0 0 calc((1 - var(--u)) * 100%) 0 round .9em);
	transition: box-shadow .3s;
}
.board:hover .board__cloth, .board.is-focus .board__cloth { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .1); }
.board__art { flex: none; height: 13.5em; margin: .55em .55em 0; border-radius: .5em; overflow: hidden; background: #0b0a10; }
.board__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board__body { flex: 1; padding: 1.15em 1.3em 1.3em; display: flex; flex-direction: column; min-height: 0; }
.board__title { margin: 0 0 .6em; font-size: 1.6em; line-height: 1.08; font-weight: 750; letter-spacing: -.03em; color: #f4f2f7; text-wrap: balance; }
.board__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; font-size: .86em; line-height: 1.35; color: #b9b5c2; }
.board__perks li { position: relative; padding-left: 1em; }
.board__perks li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45em; height: 1px; background: #8a8594; }
.board__cta {
	align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: .45em;
	padding: .62em 1.05em; border-radius: 999px; font-size: .8em; font-weight: 700; letter-spacing: -.005em; color: #fff; text-decoration: none;
	background: var(--magenta, #e0107f); transition: background-color .2s, gap .2s;
}
.board__cta::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat; mask: url("../icons/arrow-right.svg") center / contain no-repeat; }
.board:hover .board__cta, .board__cta:focus-visible { background: #f0258f; gap: .65em; }

/* ---------- Ingresso: striscione HTML sopra il portale 3D ---------- */
.museum__entrance {
	position: absolute; inset: 0 0 auto; height: 100svh; z-index: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	padding: calc(var(--header-h) + env(safe-area-inset-top) + 8px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
	pointer-events: none;
}
.museum__entrance a, .museum__entrance .btn { pointer-events: auto; }
/* Prima del 3D (che parte al primo gesto) c'è l'immagine statica della stessa scena; la canvas appare sopra in dissolvenza. */
.museum--3d .museum__stage { background: var(--bg) url("../img/hero-mobile.webp") center bottom / cover no-repeat; }
@media (min-aspect-ratio: 4/5) { .museum--3d .museum__stage { background-image: url("../img/hero-desktop.webp"); } }
.museum__canvas { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.museum--ready .museum__canvas { opacity: 1; }
.museum__stage::after { /* sfumatura in basso: la scena si fonde con la pagina */
	content: ""; position: absolute; inset: auto 0 0; height: 22%; pointer-events: none;
	background: linear-gradient(transparent, rgb(11 10 16 / .85));
}
/* Titolo libero sul cielo, sopra l'anello che sorge dall'orizzonte. */
.entrance-title {
	margin: clamp(8px, 3svh, 40px) auto 0; max-width: 16ch; text-align: center; text-wrap: balance;
	font-size: clamp(2.25rem, 1.1rem + 4.2vw, 4.75rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800;
	color: var(--text, #f2eff7); text-shadow: 0 2px 24px rgb(11 10 16 / .6);
}
.entrance-title .ring-o { width: .64em; height: .64em; transform: translateY(.02em); }
.entrance-plaque { display: grid; justify-items: center; gap: 20px; text-align: center; }
.entrance-plaque__text { color: var(--text, #f2eff7); opacity: .82; font-size: var(--fs-md, 1.0625rem); line-height: 1.45; max-width: 36ch; text-wrap: balance; text-shadow: 0 1px 16px rgb(11 10 16 / .8); }
.entrance-plaque__actions { justify-content: center; }
@media (max-width: 599px) {
	.entrance-plaque__actions { display: grid; width: min(100%, 320px); }
}
@media (max-height: 640px) and (orientation: portrait) {
	.entrance-plaque { gap: 12px; }
	.entrance-plaque__text { font-size: var(--fs-sm); }
	.entrance-plaque__actions .btn { min-height: 44px; }
	.entrance-title { font-size: clamp(1.875rem, 9vw, 2.5rem); }
}
@media (orientation: landscape) and (max-height: 560px) {
	.museum__entrance { padding-top: calc(var(--header-h) + 4px); padding-bottom: 16px; }
	.entrance-title { font-size: clamp(1.75rem, 6.5vh, 2.75rem); max-width: 22ch; margin-top: 0; }
	.entrance-plaque { gap: 10px; }
	.entrance-plaque__text { display: none; }
}

/* ---------- Equivalenti HTML dei poster ---------- */
/* In 3D sono nascosti alla vista ma restano per screen reader, tastiera e motori di ricerca. */
.museum--3d .museum-posters { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.museum--3d .museum-posters .poster__link:focus { position: fixed; }
.museum-posters { position: relative; z-index: 1; padding: var(--section) var(--gutter) 0; }
.museum-posters__title { font-size: var(--fs-xl); margin-bottom: 40px; }
.museum-posters__list { list-style: none; display: grid; gap: 64px 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.museum-posters__list > li { padding-top: 60px; }

/* ---------- Versione 2D (anche senza JavaScript) ---------- */
html:not(.museum--3d) .museum__stage { display: none; }
html:not(.museum--3d) .museum__entrance {
	position: relative; height: auto; min-height: 100svh; gap: 40px; justify-content: flex-start; isolation: isolate;
	background: var(--bg) url("../img/hero-mobile.webp") center bottom / cover no-repeat; /* la stessa scena, ferma */
}
@media (min-aspect-ratio: 4/5) { html:not(.museum--3d) .museum__entrance { background-image: url("../img/hero-desktop.webp"); } }
html:not(.museum--3d) .entrance-plaque { margin-top: auto; }

/* ---------- Dopo i servizi: loghi e modulo salgono sopra la scena ---------- */
.museum__after { position: relative; z-index: 1; padding-bottom: var(--section); }
.museum--3d .museum__after { padding-top: 30svh; background: linear-gradient(transparent, rgb(11 10 16 / .55) 34svh); } /* velo: l'anello resta, il testo si legge */

/* Loghi dei clienti: griglia a filo sottile, celle neutre. */
.clients { padding: 0 var(--gutter) var(--section); display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); }
.clients__title { font-size: var(--fs-xl); text-align: center; max-width: 18ch; text-shadow: 0 2px 24px rgb(11 10 16 / .7); }
.clients__grid {
	list-style: none; width: min(100%, 1120px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--hairline), var(--shadow-card);
}
@media (min-width: 640px) { .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clients__item { box-shadow: 1px 0 0 rgb(255 255 255 / .07), 0 1px 0 rgb(255 255 255 / .07); }
/* Loghi tutti bianchi e della stessa grandezza: file PNG trasparenti 800x400 (vedi CLAUDE.md), il logo riempie il riquadro 2:1.
   Il filtro rende bianco qualsiasi colore; al passaggio del mouse il bianco si accende. */
.clients__link { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 8%; text-decoration: none; transition: background-color .3s; }
.clients__logo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .35s, transform .5s var(--ease-out), filter .35s; }
.clients__name { font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: -.02em; color: var(--muted); text-align: center; transition: color .3s; }
a.clients__link:hover, a.clients__link:focus-visible { background: var(--surface-hi); }
a.clients__link:hover .clients__logo, a.clients__link:focus-visible .clients__logo { opacity: 1; transform: scale(1.04); filter: brightness(0) invert(1) drop-shadow(0 0 10px rgb(255 255 255 / .35)); }
a.clients__link:hover .clients__name { color: var(--text); }
a.clients__link:focus-visible { outline-offset: -4px; }

/* ---------- Contatti ---------- */
.ticket { position: relative; padding: 0 var(--gutter); display: grid; gap: clamp(40px, 6vw, 96px); max-width: calc(1240px + 2 * var(--gutter)); margin-inline: auto; }
.ticket__title { font-size: var(--fs-xl); max-width: 18ch; text-shadow: 0 2px 24px rgb(11 10 16 / .7); }
.ticket__title span { display: block; color: var(--muted); }
.ticket__intro { display: grid; gap: 20px; align-content: start; }
.ticket__intro .lead { color: var(--text); opacity: .82; text-shadow: 0 1px 16px rgb(11 10 16 / .8); }
.ticket__form { background: var(--surface); box-shadow: var(--hairline), var(--shadow-card); border-radius: var(--radius-card); padding: clamp(24px, 3.5vw, 44px); }
@media (min-width: 1024px) { .ticket { grid-template-columns: 1fr 1.15fr; align-items: start; } .ticket__intro { position: sticky; top: calc(var(--header-h) + 48px); } }