/* ==========================================================================
   STARSEED Travel — stile del sito (mobile first)
   Logo ufficiale: "Midnight House" → STARSEED con orbita e stelle
   Font: Anton (titoli) · Mrs Saint Delafield ·
         Playfair Display · Space Grotesk (testo) · Space Mono (etichette)
   ========================================================================== */
@font-face { font-family: "Anton"; src: url(../fonts/anton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url(../fonts/mrs-saint-delafield.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(../fonts/playfair.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(../fonts/playfair-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(../fonts/space-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(../fonts/space-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(../fonts/space-mono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* fallback con metriche simili: niente salti di layout mentre i font arrivano */
@font-face { font-family: "Anton Fallback"; src: local("Impact"), local("Arial Narrow Bold"), local("Arial"); size-adjust: 92%; ascent-override: 118%; }
@font-face { font-family: "Grotesk Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 104%; }

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }

:root {
  --bg: #050505;
  --bg-2: #0b0b0b;
  --ink: #f3f0ea;
  --ink-2: rgb(243 240 234 / .68);
  --ink-3: rgb(243 240 234 / .58);
  --line: rgb(243 240 234 / .12);
  --line-2: rgb(243 240 234 / .26);
  --rose: oklch(80% .075 45);
  --ember: oklch(68% .21 36);
  --rose-grad: linear-gradient(100deg, #f7d8c9 0%, #e2a48f 32%, #b86e5c 58%, #f3c7b4 82%, #c98571 100%);
  --f-acid: "Anton", "Anton Fallback", Impact, sans-serif;
  --f-logo: "Anton", Impact, sans-serif; /* New Rocker è scartato dal brand (tema monocromo) */
  --f-disco: "Anton", Impact, sans-serif; /* Kavoon è scartato dal brand (tema monocromo) */
  --f-stella: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  --f-asc: "Playfair Display", "Didot", Georgia, serif;
  --f-body: "Space Grotesk", "Grotesk Fallback", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  /* margine laterale: mai sotto la tacca o gli angoli arrotondati (telefono in orizzontale) */
  --gutter: max(clamp(16px, 4.5vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --nav-h: 60px;
  --studio-w: min(560px, 42vw);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 7 17 11.3 24 12 17 12.7 12.7 17 12 24 11.3 17 7 12.7 0 12 7 11.3 11.3 7 12 0Z'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); scrollbar-color: #3a3a3a var(--bg); scrollbar-width: thin; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html:has(dialog[open]:modal), html:has(.menu:popover-open) { overflow: hidden; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: margin-right .6s var(--ease-out); }
img, video, canvas, svg { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; }
/* ciò che il sito nasconde resta nascosto anche se la sua classe ha un display proprio */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1640px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; font: 700 .8rem var(--f-mono); }
.skip:focus { top: 12px; }
.ph { background-size: cover; background-position: center; background-color: #111; }

/* ---------- tipografia & componenti ---------- */
.eyebrow { display: flex; align-items: center; gap: .7em; margin: 0 0 1.1rem; font: 400 .7rem/1.3 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; flex: none; width: .95em; height: .95em; background: currentColor; mask: var(--spark) center / contain no-repeat; }
.h2 { font: 400 clamp(2.6rem, 11vw, 7.6rem)/.9 var(--f-acid); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.h2 em, .big em { font-family: var(--f-asc); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; }
.fine { font: 400 .68rem/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }
.script { font-family: var(--f-stella); background: var(--rose-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .2em; }
.section { position: relative; padding-block: clamp(72px, 12vw, 170px); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(26px, 4vw, 52px); }
.sec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
@media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .sec-tools { justify-content: flex-end; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; padding: .9em 1.35em; border-radius: 999px; border: 1px solid var(--line-2); font: 700 .72rem/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; transition: background .35s, color .35s, border-color .35s, translate .5s var(--ease-out), opacity .3s, scale .2s var(--ease-out); }
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (hover: hover) { .btn--solid:hover { background: transparent; color: var(--ink); } }
.btn--wa { border-color: rgb(37 211 102 / .5); }
@media (hover: hover) { .btn--wa:hover { background: #25d366; color: #04140a; border-color: #25d366; } }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn svg, .ico { width: 1.15em; height: 1.15em; flex: none; }
svg.fill { fill: currentColor; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn--block { width: 100%; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(5 5 5 / .6); backdrop-filter: blur(8px); font-size: 1rem; transition: background .3s, color .3s, rotate .5s var(--ease-out); }
@media (hover: hover) { .icon-btn:hover { background: var(--ink); color: var(--bg); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: .7em 1.1em; border: 1px solid var(--line-2); border-radius: 999px; font: 400 .66rem var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); transition: background .3s, color .3s, border-color .3s; }
@media (hover: hover) { .chip:hover { color: var(--ink); border-color: var(--ink); } }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip small { opacity: .6; margin-left: .4em; }
.pill { display: inline-flex; align-items: center; gap: .55em; padding: .45em .8em; border: 1px solid var(--line-2); border-radius: 999px; font: 400 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pill--hot { color: var(--ember); border-color: oklch(68% .21 36 / .5); box-shadow: 0 0 18px oklch(68% .21 36 / .25); }
.stars { display: inline-flex; gap: 2px; color: var(--ink); }
.stars i { width: 12px; height: 12px; background: currentColor; mask: var(--spark) center / contain no-repeat; }
.stars i.off { opacity: .2; }

/* segmented control con indicatore che scorre */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 255 255 / .03); backdrop-filter: blur(10px); isolation: isolate; }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: .55em 1.1em; border-radius: 999px; font: 700 .64rem/1.25 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); transition: color .4s; text-align: center; }
.seg button small { display: block; font-weight: 400; letter-spacing: .06em; opacity: .7; text-transform: none; }
.seg button[aria-pressed="true"] { color: var(--bg); }
.seg__ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--count, 2)); border-radius: 999px; background: var(--ink); box-shadow: 0 0 24px rgb(255 255 255 / .25); translate: calc(var(--i, 0) * 100%) 0; transition: translate .55s var(--ease-out); }

/* ---------- livelli globali ---------- */
.sky { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.sky.on { opacity: 1; }
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 70; background: var(--ink); box-shadow: 0 0 12px #fff; transform-origin: 0 50%; scale: 0 1; }
@supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } }
@keyframes grow { to { scale: 1 1; } }
/* grana: strato 1,5× lo schermo (prima 3×, cioè 9 volte l'area: tanta memoria video su un livello sopra tutto).
   Gli spostamenti (max 12% di 150% = 18%) restano dentro il margine del 25%. Ferma sui touch: lì non si nota e costa batteria */
.grain { position: fixed; inset: -25%; width: 150%; height: 150%; z-index: 80; pointer-events: none; opacity: .065; background-image: var(--noise); animation: grain 1s steps(6) infinite; }
@media (hover: none) { .grain { animation: none; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, -8%); } 40% { transform: translate(-12%, 4%); } 60% { transform: translate(6%, -10%); } 80% { transform: translate(-4%, 12%); } 100% { transform: translate(8%, 4%); } }
/* ---------- caricamento iniziale ----------
   Solo il marchio dell'orbita con le due stelline, al centro: entra sfumando e gira con un alone che respira.
   Niente percentuali né fasi: dura al massimo 2-3 secondi
   (js/app.js → loaderRun). Alla fine l'orbita si allarga e svanisce e il sipario sale con un bordo morbido scoprendo la
   testata. Solo trasformazioni e opacità: lo anima la scheda video, fluido anche mentre il telefono lavora.
   Senza JavaScript non esiste; se il codice non arriva (errore, file mancante, 10 s senza codice) lo script in linea
   dell'<head> toglie html.js e il sipario sparisce con lui */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); }
/* sotto il sipario la pagina non si disegna finché non è costruita e assestata (js/app.js → html.built): niente salti
   d'impaginazione dallo scheletro dell'HTML alla pagina vera (il CLS li conta anche sotto un livello opaco) */
.js:not(.built) body > :not(.loader) { visibility: hidden; }
/* il bordo morbido del sipario: una sfumatura attaccata sotto, fuori dallo schermo finché il sipario non sale */
.js .loader::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26svh; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
/* durante la prova generale (js/app.js → rehearse) il sipario non è perfettamente opaco: così il browser disegna davvero
   le sezioni che ci passano sotto (a occhio non cambia nulla) */
.loader.is-warm { opacity: .996; }
.loader__orbit { position: relative; width: min(72vw, 340px); aspect-ratio: 480 / 474; animation: ldIn 1s var(--ease-out) both; }
.loader__orbit::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .16), transparent); animation: ldBreathe 2.4s var(--ease-io) infinite alternate; }
.loader__spin { position: absolute; inset: 0; animation: ldSpin 6s linear infinite; }
.loader__spin img { display: block; width: 100%; height: 100%; transform: scale(1.3); }
.loader.is-out { animation: ldLift .9s cubic-bezier(.76, 0, .24, 1) .14s both; pointer-events: none; }
.loader.is-out .loader__orbit { animation: ldAway .55s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes ldIn { from { opacity: 0; transform: scale(.88); } }
@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldBreathe { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }
@keyframes ldAway { to { opacity: 0; transform: scale(1.18); } }
@keyframes ldLift { to { transform: translateY(calc(-100% - 26svh)); } }
@keyframes ldFade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .loader__spin, .loader__orbit::before { animation: none; }
  .loader.is-out { animation: ldFade .35s forwards; }
  .loader.is-out .loader__orbit { animation: none; }
}
/* pulviscolo davanti ai contenuti (sotto barra, menu e finestre): i granelli li crea e li anima js/app.js → startDust.
   Alto quanto il viewport grande (la barra del browser che entra ed esce non lo sposta); tre strati di profondità che
   il mouse sposta piano (transizione: la anima la scheda video) */
.dust { position: fixed; inset: 0 0 auto; width: 100%; height: 100lvh; z-index: 40; pointer-events: none; overflow: hidden; contain: strict; opacity: 0; animation: dustIn 2.4s .3s var(--ease-out) forwards; }
.dust > div { position: absolute; inset: 0; transition: translate 1.2s var(--ease-out); }
.dust i { position: absolute; left: 0; top: 0; display: block; background: center / 100% 100% no-repeat; }
html.still .dust { display: none; }
@keyframes dustIn { to { opacity: 1; } }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; overflow: visible; z-index: 85; pointer-events: none; }
/* la tela delle scintille è un popover: di solito un elemento come gli altri (sotto il cursore), ma un'esplosione
   partita da una finestra aperta («Invia su WhatsApp») la porta sopra la finestra, nello strato superiore (app.js → fx) */
.fx:not(:popover-open) { display: block; }
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; }
.cursor span { display: block; translate: -50% -50%; padding: .8em 1.15em; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; scale: 0; transition: scale .4s var(--ease-out); box-shadow: 0 0 30px rgb(255 255 255 / .35); }
.cursor.on span { scale: 1; }

/* ==========================================================================
   LOGO UFFICIALE — STARSEED Travel
   ========================================================================== */
.logo { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: .3em .25em; font-family: var(--f-logo); line-height: .9; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.logo__main { display: block; letter-spacing: .01em; }
.logo__main > span { display: block; transform: skewX(-12deg); }
.logo__sub { margin-top: .42em; padding-left: .7em; font: 700 .15em/1 var(--f-body); letter-spacing: .7em; }
.logo__orbit { position: absolute; inset: -6% -15%; width: 130%; max-width: none; height: 112%; overflow: visible; pointer-events: none; fill: currentColor; }
.logo__orbit ellipse { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* il logo in testata (tema monocromo). L'ombra scura che lo stacca dalle stelle sta su testo e orbita, ferme: su tutto
   il logo coprirebbe anche cometa e stelline, che si muovono, e andrebbe rifatta a ogni fotogramma */
.logo--hero { font-size: clamp(2.4rem, 14.6vw, 11rem); max-width: 100%; }
.logo--hero :is(.logo__main, .logo__sub) { text-shadow: 0 0 40px rgb(0 0 0 / .8); }
.logo--hero .logo__orbit { filter: drop-shadow(0 0 40px rgb(0 0 0 / .8)); }
.logo--hero .logo__orbit ellipse { stroke-width: 1.8; }
.js .logo--hero .logo__main { clip-path: inset(0 100% 0 0); }
.js .logo--hero :is(.logo__orbit, .logo__fx, .logo__sub) { opacity: 0; }
.ready .logo--hero .logo__main { animation: reveal 1.4s var(--ease-io) .15s both; }
.ready .logo--hero :is(.logo__orbit, .logo__fx) { animation: orbitIn 1.6s var(--ease-out) .55s both; }
.ready .logo--hero .logo__sub { animation: fadeUp 1s var(--ease-out) .6s both; }
/* "Riduci animazioni": l'ingresso della testata è già fatto, come col movimento ridotto */
html.still :is(.logo--hero .logo__main, .logo--hero .logo__orbit, .logo--hero .logo__fx, .logo--hero .logo__sub, [data-intro]) { animation: none !important; clip-path: none !important; opacity: 1 !important; }
/* cometa e stelline sopra l'orbita, nella sua stessa misura: --u è un'unità del disegno 384×120 dell'SVG (che si adatta
   alla scatola come l'SVG). La cometa gira sull'ellisse con tre trasformazioni: l'ellisse inclinata e schiacciata
   (.logo__orb), il giro (cometRun, da js/app.js: velocità costante come la vecchia animazione SVG), la cometa
   raddrizzata. Tutto lo anima la scheda video */
.logo__fx { position: absolute; inset: -6% -15%; width: 130%; height: 112%; container-type: size; pointer-events: none; --u: min(100cqw / 384, 100cqh / 120); }
.logo__fx i { position: absolute; display: block; }
.logo__fx svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; fill: currentColor; }
.logo__orb { left: 50%; top: 50%; transform: rotate(-8deg) scale(1, .2151); }
.logo__run { animation: cometRun 11s linear infinite; }
.logo__fx .logo__comet { position: absolute; left: calc(-7 * var(--u)); top: calc(-7 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); transform: scale(1, 4.65); filter: drop-shadow(0 0 calc(4 * var(--u)) #fff); }
.logo__s1 { left: calc(50% - 148 * var(--u)); top: calc(50% - 24 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.logo__s2 { left: calc(50% + 126 * var(--u)); top: calc(50% + 2 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.logo__s1, .logo__s2 { animation: twinkle 3.2s ease-in-out infinite; }
.logo__s2 { animation-delay: -1.6s; }
/* la scritta si svela da sinistra; alla fine la finestra resta larga, così l'ombra delle lettere non viene tagliata */
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-60% -20% -60% -20%); } }
@keyframes orbitIn { from { opacity: 0; scale: .6; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .55; opacity: .55; } }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav-h); padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: translate .6s var(--ease-out), background .4s, border-color .4s, backdrop-filter .4s, right .6s var(--ease-out); }
.nav[data-hidden="true"] { translate: 0 -110%; }
/* il fondo arriva appena si lascia la cima (classe is-scrolled da js/app.js → onScroll). Prima era un'animazione legata
   allo scorrimento su fondo, bordo e sfocatura: il browser la ricalcolava e ridipingeva la barra a ogni fotogramma, anche
   a pagina ferma, e con lei lo sfondo a tutto schermo che le sta sotto */
.nav.is-scrolled { background: rgb(5 5 5 / .78); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); }
.nav__brand .logo { font-size: 1.32rem; padding: .25em .2em; }
.nav__brand .logo__sub { display: none; }
.nav__brand .logo__orbit { inset: -14% -12%; width: 124%; height: 128%; }
.nav__links { display: none; gap: clamp(14px, 1.8vw, 30px); margin: 0; padding: 0; list-style: none; font: 400 .7rem var(--f-mono); letter-spacing: .15em; text-transform: uppercase; }
.nav__links a { position: relative; padding-block: 6px; color: var(--ink-2); transition: color .3s; }
.nav__links a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale .5s var(--ease-out); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { scale: 1 1; transform-origin: left; } }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__actions .btn { min-height: 44px; padding: .75em 1.1em; }
.nav__book { display: none; }
.lang-btn { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 .8em; border-radius: 999px; font: 700 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: color .3s, background .3s; anchor-name: --lang; }
@media (hover: hover) { .lang-btn:hover { color: var(--ink); background: rgb(255 255 255 / .06); } }
.lang-btn svg { width: 15px; height: 15px; }
.snd { display: none; align-items: center; gap: .7em; min-height: 44px; padding: 0 .9em; border-radius: 999px; font: 400 .68rem var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); }
.snd:hover, .snd[aria-pressed="true"] { color: var(--ink); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
/* le barre crescono dal basso con una scala (la anima la scheda video), non cambiando l'altezza (ridisegno a ogni fotogramma) */
.eq i { width: 2px; height: 12px; background: currentColor; transform-origin: bottom; scale: 1 .25; }
.snd[aria-pressed="true"] .eq i { animation: eq .8s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s !important; }
.eq i:nth-child(3) { animation-delay: -.55s !important; }
.eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { from { scale: 1 .17; } to { scale: 1 1; } }
@media (min-width: 700px) { .nav__book, .snd { display: inline-flex; } }
@media (min-width: 1180px) { .nav__links { display: flex; } .menu-btn { position: fixed; right: 0; top: 0; width: 44px; height: 44px; opacity: 0; pointer-events: auto; z-index: 65; } :root { --nav-h: 68px; } }

/* popover lingua (ancorato al pulsante dove supportato) */
.lang-pop { position: fixed; inset: auto; top: calc(var(--nav-h) - 4px); right: var(--gutter); margin: 0; padding: 6px; min-width: 190px; border: 1px solid var(--line-2); border-radius: 16px; background: rgb(12 12 12 / .96); backdrop-filter: blur(16px); color: var(--ink); opacity: 0; translate: 0 -8px; transition: opacity .3s, translate .4s var(--ease-out), display .4s allow-discrete, overlay .4s allow-discrete; }
@supports (position-anchor: --lang) { .lang-pop { position-anchor: --lang; top: anchor(bottom); right: anchor(right); margin-top: 8px; } }
.lang-pop:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .lang-pop:popover-open { opacity: 0; translate: 0 -8px; } }
.lang-pop button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: .95rem; transition: background .2s; }
@media (hover: hover) { .lang-pop button:hover { background: rgb(255 255 255 / .07); } }
.lang-pop button small { margin-left: auto; font: 700 .68rem var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.lang-pop button[aria-current="true"] small { color: var(--ink); }
.lang-pop button[aria-current="true"]::after { content: ""; width: 10px; height: 10px; background: var(--ink); mask: var(--spark) center / contain no-repeat; }

/* colonna e spazi stanno nella regola base: mentre il menu si chiude (display ancora flex per la transizione)
   le voci non tornano in riga. Se non entra nello schermo il menu scorre al suo interno, senza trascinare la pagina */
.menu { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 12px var(--gutter) calc(28px + var(--safe-b)); border: 0; background: var(--bg); color: var(--ink); flex-direction: column; gap: 22px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; translate: 0 -2%; transition: opacity .4s, translate .6s var(--ease-out), display .6s allow-discrete, overlay .6s allow-discrete; }
.menu:popover-open { display: flex; opacity: 1; translate: 0 0; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 -2%; } }
.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.menu__nav { display: grid; gap: 16px; margin-block: auto; }
.menu__label { margin-bottom: 2px; font: 400 .75rem/1.3 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
/* un gruppo senza voci visibili (sezioni spente dallo Studio) non lascia l'etichetta da sola */
.menu__group:not(:has(li:not([hidden]))) { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu ul a { display: flex; align-items: center; gap: .28em; width: 100%; min-height: 48px; font: 400 clamp(2.1rem, 10vw, 5rem)/1.02 var(--f-acid); text-transform: uppercase; }
@media (hover: hover) { .menu ul a:hover { font-family: var(--f-asc); font-style: italic; text-transform: none; } }
/* la sezione in cui ti trovi: una stellina accanto alla voce */
.menu ul a[aria-current="location"]::after { content: ""; flex: none; width: .3em; height: .3em; background: currentColor; mask: var(--spark) center / contain no-repeat; }
.menu .menu__more { display: flex; flex-wrap: wrap; gap: 0 24px; }
.menu .menu__more a { width: auto; min-height: 44px; font: 700 .8rem/1 var(--f-mono); letter-spacing: .16em; color: var(--ink-2); }
.menu__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.menu__cta { display: grid; gap: 10px; }
@media (min-width: 700px) { .menu__cta { display: flex; } }
.menu [data-studio-open] { align-self: flex-start; width: max-content; }

/* ==========================================================================
   FORMAT — logotipi delle feste
   ========================================================================== */
.lg { --k: 1; position: relative; display: inline-flex; font-size: calc(var(--k) * 1em); line-height: .9; white-space: nowrap; font-weight: 400; }
/* feste nuove: nome in tipografia pulita, oppure il logo caricato (immagine con sfondo trasparente) */
.lg--plain { --k: 1.05; font-family: var(--f-acid); text-transform: uppercase; letter-spacing: .01em; }
.lg--img { --k: 1; align-items: center; }
.lg--img img { display: block; height: 1.15em; width: auto; max-width: 5.5em; object-fit: contain; pointer-events: none; }
/* grana "stampata": una texture già pronta (assets/img/grunge.png, la stessa ricetta del filtro #grunge) usata come
   maschera. Il filtro SVG ricalcolava il rumore a ogni disegno: era uno degli scatti al primo arrivo sui pacchetti */
.lg--acid { --k: 1.18; font-family: var(--f-acid); text-transform: uppercase; letter-spacing: -.01em; mask: url(../assets/img/grunge.png) 0 0 / 240px 240px; }
.lg--midnight { --k: .8; flex-direction: column; align-items: center; font-family: var(--f-logo); text-transform: uppercase; }
.lg--midnight .lg__main { display: block; transform: skewX(-12deg); }
.lg--midnight .lg__sub { margin-top: .4em; padding-left: .7em; font: 700 .16em/1 var(--f-body); letter-spacing: .7em; }
.lg--disco { font-family: var(--f-disco); text-transform: uppercase; letter-spacing: .02em; }
.lg__o { position: relative; }
/* la stellina della O luccica su un elemento html che la contiene: un'animazione su un elemento svg il browser non la
   può dare alla scheda video, e per lei ridisegnava la pagina a ogni fotogramma (sempre: i loghi sono in più sezioni) */
.lg__o i { position: absolute; left: 50%; top: 50%; width: .25em; height: .25em; translate: -50% -44%; animation: twinkle 2.6s ease-in-out infinite; }
.lg__o svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.lg--stella { --k: 1.3; padding: .14em .3em .06em .12em; font-family: var(--f-stella); line-height: 1.1; background: var(--rose-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg--asc { --k: .6; flex-direction: column; font-family: var(--f-asc); font-weight: 700; text-transform: uppercase; color: #fff7ef; }
.lg--asc .lg__main { letter-spacing: -.01em; text-shadow: -.028em 0 .012em rgb(255 60 30 / .85), .028em 0 .012em rgb(60 220 255 / .55), 0 0 .28em rgb(255 110 60 / .55), 0 0 .04em #fff; }
.lg--asc .lg__main i { font-style: italic; font-weight: 800; font-size: 1.16em; line-height: .8; }
.lg__top, .lg__foot { display: flex; align-items: center; justify-content: space-between; gap: .9em; font: 700 .11em/1 var(--f-body); letter-spacing: .06em; }
.lg__top { margin-bottom: .45em; color: var(--ember); text-shadow: 0 0 .7em var(--ember); }
.lg__foot { margin-top: .45em; text-shadow: 0 0 .8em rgb(255 255 255 / .6); }
.lg__barcode { flex: 1; height: 1.5em; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px, currentColor 3px 4px, transparent 4px 7px, currentColor 7px 10px, transparent 10px 11px); }
.lg--pir { --k: .95; font-family: var(--f-asc); font-style: italic; letter-spacing: .005em; text-transform: lowercase; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; display: grid; min-height: 92svh; overflow: clip; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* i video e le locandine hanno già i colori del tema nel file (sorgenti/video: tinta, locandina, codifica con GRADO):
   un filtro css sul video era un passaggio in più della scheda video a ogni fotogramma */
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: screen; mask-image: radial-gradient(140% 90% at 50% 38%, #000 38%, transparent 88%); }
.hero__media video { opacity: 0; transition: opacity 1.4s ease; }
.hero__media video.on { opacity: .55; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(5 5 5 / .7), transparent 22%, transparent 70%, rgb(5 5 5 / .5)); }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: clamp(14px, 3vw, 28px); padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; text-align: center; }
.hero__kicker { position: relative; display: inline-flex; align-items: center; gap: .6em; padding: .55em 1em; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(5 5 5 / .4); backdrop-filter: blur(8px); font: 700 .64rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; }
.hero__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
/* l'onda del puntino: un disco uguale che si allarga e svanisce (scala e opacità, le anima la scheda video). Prima era
   un'ombra che cresceva: un ridisegno della testata a ogni fotogramma */
.hero__kicker::after { content: ""; position: absolute; left: 1em; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ember); opacity: 0; pointer-events: none; animation: ping 1.8s infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.hero__title { max-width: 16ch; font: 400 clamp(2rem, 8.6vw, 4.6rem)/.95 var(--f-acid); text-transform: uppercase; text-wrap: balance; }
.hero__sub { max-width: 46ch; color: var(--ink-2); font-size: clamp(.98rem, 1.3vw, 1.15rem); text-wrap: pretty; }
.hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero__chips button { padding: .7em 1em; border: 1px solid var(--line-2); border-radius: 12px; background: rgb(255 255 255 / .04); backdrop-filter: blur(10px); font: 700 .68rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transition: border-color .3s, background .3s; }
@media (hover: hover) { .hero__chips button:hover { border-color: var(--ink); background: rgb(255 255 255 / .09); } }
.hero__chips b { display: block; font: 400 1.15rem var(--f-acid); letter-spacing: .02em; }
.hero__ctas { display: grid; gap: 10px; width: min(100%, 420px); }
.hero__rating { display: inline-flex; align-items: center; gap: .7em; font: 400 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.js [data-intro] { opacity: 0; }
.ready [data-intro] { animation: fadeUp .7s var(--ease-out) both; animation-delay: var(--d, .3s); }
/* la linea scende dall'alto e poi si ritira verso il basso: solo trasformazioni con l'origine ferma in alto (prima
   l'origine cambiava a metà, e un'animazione così la fa il processore a ogni fotogramma) */
.hero__cue { position: absolute; left: 50%; bottom: 14px; z-index: 1; translate: -50% 0; width: 1px; height: 38px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(0) scaleY(0); } 45%, 55% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(100%) scaleY(0); } }
@media (min-width: 700px) { .hero__ctas { display: flex; justify-content: center; width: auto; } }

/* ==========================================================================
   PACCHETTI
   ========================================================================== */
.packs { padding-top: clamp(28px, 6vw, 80px); padding-bottom: clamp(56px, 9vw, 120px); }
.packs__head { display: grid; gap: 16px; justify-items: start; }
.packs__switches { display: grid; gap: 10px; width: 100%; }
.packs__switches .seg { width: 100%; }
.dest-tabs .chip { min-height: 44px; }
/* telefono: città e album in una fila che si scorre col dito (con tante città non vanno a capo su tre righe) */
@media (max-width: 699px) {
  .dest-tabs, [data-albums] { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  :is(.dest-tabs, [data-albums])::-webkit-scrollbar { display: none; }
  :is(.dest-tabs, [data-albums]) > * { flex: none; scroll-snap-align: start; }
}
/* tocco: il pulsante risponde sotto il dito (solo dispositivi touch) */
@media (hover: none) {
  :is(.btn, .chip, .seg button, .icon-btn, .night__btn, .fmt__when, .hero__chips button, .buybar__wa, .lang-btn, .snd, .opt, .stepper button):active { scale: .96; }
  :is(.chip, .seg button, .icon-btn, .night__btn, .fmt__when, .hero__chips button, .lang-btn, .snd, .opt, .stepper button) { transition-property: background, color, border-color, scale; transition-duration: .3s, .3s, .3s, .2s; }
}
@media (min-width: 900px) { .packs__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .packs__switches { width: auto; justify-items: end; } .packs__switches .seg { width: auto; min-width: 460px; } }
.rail { display: flex; gap: 14px; margin-top: 24px; padding: 6px var(--gutter) 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* un segmento per fermata della fila (app.js → railStops): acceso quello su cui la fila si ferma */
.rail__bar { display: flex; gap: 5px; width: min(220px, 50%); height: 2px; margin: 0 auto; }
.rail__bar span { flex: 1; height: 100%; border-radius: 2px; background: var(--line-2); transition: background .35s; }
.rail__bar span.on { background: var(--ink); }
/* schermo largo: colonne decise dal numero di pacchetti (--cols da app.js), righe incomplete centrate */
@media (min-width: 1100px) {
  .rail { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; max-width: 1640px; margin-inline: auto; }
  .rail__bar { display: none; }
}
.pack { --mx: 50%; --my: 0%; position: relative; flex: none; display: flex; flex-direction: column; gap: 16px; width: min(84vw, 360px); min-height: 520px; padding: 20px 20px 18px; border: 1px solid var(--line-2); border-radius: 22px; background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015) 55%); backdrop-filter: blur(14px) saturate(130%); scroll-snap-align: start; overflow: clip; isolation: isolate; transition: border-color .5s, translate .6s var(--ease-out), box-shadow .6s; view-transition-class: pack; }
@media (min-width: 1100px) { .pack { width: auto; flex: 0 0 calc((100% - (var(--cols, 4) - 1) * 14px) / var(--cols, 4)); max-width: 440px; } }
@media (min-width: 1100px) and (hover: hover) { .pack:hover { translate: 0 -6px; border-color: rgb(243 240 234 / .5); box-shadow: 0 30px 80px rgb(0 0 0 / .6); } }
.pack__bg { position: absolute; inset: 0; z-index: -2; }
.pack__bg img { width: 100%; height: 55%; object-fit: cover; opacity: .32; mask-image: linear-gradient(#000 20%, transparent); filter: grayscale(1); transition: scale 1.4s var(--ease-out), opacity .6s; }
@media (hover: hover) { .pack:hover .pack__bg img { scale: 1.06; opacity: .5; } }
.pack::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at var(--mx) var(--my), rgb(255 255 255 / .1), transparent 70%); }
/* bordo luminoso del pacchetto in evidenza: una luce conica gira DIETRO la carta (.pack__ring) e una copertura piena
   (::before, a 1,5px dal bordo) lascia vedere solo il filo esterno. La luce è un livello che ruota e basta: la anima la
   scheda video senza maschere da ricalcolare a ogni fotogramma (prima un passaggio in più su tutta la carta). Sul
   telefono la luce resta ferma. Immagine e luce della carta stanno dentro la copertura, il filo resta libero */
.pack--best { border-color: transparent; background: none; }
.pack--best::before { content: ""; position: absolute; inset: 1.5px; z-index: -3; border-radius: 20.5px; background: linear-gradient(160deg, rgb(255 255 255 / .11), rgb(255 255 255 / .02) 55%), rgb(10 10 10); pointer-events: none; }
.pack--best .pack__bg, .pack--best::after { inset: 1.5px; border-radius: 20.5px; overflow: clip; }
.pack__ring { position: absolute; inset: 0; z-index: -4; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pack__ring i { position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(rgb(243 240 234 / .3) 0 55%, #fff 70%, var(--ember) 78%, rgb(243 240 234 / .3) 92%); }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@media (hover: hover) { .pack:is(:hover, :focus-within) .pack__ring i { animation: ringSpin 6s linear infinite; } }
.pack__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.pack__tag { font: 700 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pack--best .pack__tag { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 999px; background: var(--ink); color: var(--bg); }
.pack--best .pack__tag::before { content: ""; width: 9px; height: 9px; background: currentColor; mask: var(--spark) center / contain no-repeat; }
.pack__dur { font: 400 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.pack__name { margin-top: 18px; font: 400 clamp(3rem, 15vw, 4.2rem)/.85 var(--f-acid); text-transform: uppercase; letter-spacing: -.005em; mask: url(../assets/img/grunge.png) 0 0 / 240px 240px; }
.pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pack__price b { font: 400 2.6rem/1 var(--f-acid); }
.pack__price s { font: 400 1.2rem var(--f-acid); color: var(--ink-3); text-decoration-thickness: 2px; }
/* «a persona · a scelta dal 30/12 al 2/1»: se non entra va a capo fra le due parti, mai dentro la data e mai con i puntini */
.pack__price small span { white-space: nowrap; }
.pack__price small { flex-basis: 100%; font: 400 .68rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pack__price em { font-style: normal; color: var(--rose); }
.inc { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.inc li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; font-size: .93rem; line-height: 1.35; }
.inc li .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); }
.inc li b { font-weight: 600; }
.inc .vip { margin-left: .35em; padding: .1em .45em; border-radius: 4px; background: rgb(255 255 255 / .1); font: 700 .64rem var(--f-mono); letter-spacing: .08em; }
.pack__cta { margin-top: auto; }
/* «Dove si balla»: i locali inclusi, il punto forte del pacchetto, nel carattere dei titoli */
.pack__venues { display: grid; gap: 7px; padding: 11px 14px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(255 255 255 / .05); }
.pack__venues-l { font: 700 .62rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pack__venues p { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 0; font: 400 1.32rem/1.02 var(--f-acid); text-transform: uppercase; letter-spacing: .01em; }
.pack__venues b { font-weight: 400; }
/* città «Coming soon»: la carta al posto dei pacchetti, con la descrizione della città */
.pack__soon { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; text-wrap: pretty; }
.pack .edit-chip { top: 14px; right: auto; left: 50%; translate: -50% 0; }
.packs__foot { display: grid; gap: 14px; justify-items: center; margin-top: 18px; text-align: center; }
.packs__foot .fine { max-width: 48ch; }
/* extra come testo semplice (non sembrano pulsanti da toccare): etichetta smorzata, poi voce e prezzo */
.extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.extras span { font: 400 .68rem/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.extras span:first-child { color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; }
.extras b { color: var(--ink); }
/* telefono: etichette dei pacchetti a 12px come il resto del sito; spaziatura un filo più stretta per restare su una riga a 360px */
@media (max-width: 699px) {
  :is(.pack__tag, .pack__dur, .pack__price small, .extras span) { font-size: .75rem; }
  .pack__tag { letter-spacing: .12em; text-wrap: balance; }
  .pack__dur { letter-spacing: .08em; text-wrap: balance; }
}

/* barra d'acquisto fissa (telefono) */
.buybar { position: fixed; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: calc(10px + var(--safe-b)); z-index: 58; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(12 12 12 / .9); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 20px 60px rgb(0 0 0 / .6); translate: 0 calc(100% + 30px); transition: translate .6s var(--ease-out); }
.buybar.show { translate: 0 0; }
html:has(.menu:popover-open) .buybar { translate: 0 calc(100% + 30px); }
/* prezzo e tipo di pacchetto si restringono (con i puntini) prima che il pulsante esca dalla pillola */
.buybar p { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; margin-right: auto; }
.buybar p b { overflow: hidden; font: 400 1.25rem/1 var(--f-acid); color: var(--ink); letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; }
.buybar p small { margin-left: .25em; font: 400 .72rem var(--f-mono); letter-spacing: .02em; color: var(--ink-2); }
.buybar p span { overflow: hidden; font: 400 .68rem/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.buybar .btn { flex: 0 1 auto; min-width: 0; min-height: 46px; padding-inline: 1em; letter-spacing: .08em; }
.buybar__wa { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(37 211 102 / .5); color: var(--ink); transition: background .3s, color .3s, scale .2s var(--ease-out); }
.buybar__wa .ico { width: 20px; height: 20px; }
@media (hover: hover) { .buybar__wa:hover { background: #25d366; color: #04140a; } }
@media (min-width: 1100px) { .buybar { display: none; } }
/* telefono: la barra in basso è anche la navigazione. Il menu sta sotto il pollice e il suo anello si riempie
   scorrendo la pagina; in alto non resta nulla che copra i titoli (la barra in alto vive solo sulla prima schermata) */
.buybar__menu { position: relative; display: none; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--ink); background: rgb(255 255 255 / .05); transition: background .3s, scale .2s var(--ease-out); }
.buybar__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.buybar__ring circle { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
/* l'anello che si riempie scorrendo: due mezzi archi che ruotano, ognuno dentro la sua metà (prima la metà destra, poi la
   sinistra). Ruotano con l'animazione legata allo scorrimento: li gira la scheda video, senza ridisegnare la barra a ogni
   fotogramma come faceva il tratteggio dell'SVG. Senza animazioni da scorrimento li gira --pp (js/app.js → onScroll) */
.buybar__prog { position: absolute; inset: 0; pointer-events: none; }
.buybar__prog b { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; }
.buybar__prog b:first-child { left: 50%; }
.buybar__prog i { position: absolute; top: 0; left: 0; width: 200%; height: 100%; rotate: calc(clamp(0, var(--pp, 0) * 2 - 1, 1) * 180deg); }
.buybar__prog b:first-child i { left: -100%; rotate: calc(clamp(0, var(--pp, 0) * 2, 1) * 180deg); }
.buybar__prog svg { width: 100%; height: 100%; overflow: visible; }
.buybar__prog path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
@supports (animation-timeline: scroll()) {
  .buybar__prog i { animation: bbHalf2 linear both; animation-timeline: scroll(root); }
  .buybar__prog b:first-child i { animation-name: bbHalf1; }
}
@keyframes bbHalf1 { from { rotate: 0deg; } 50%, to { rotate: 180deg; } }
@keyframes bbHalf2 { from, 50% { rotate: 0deg; } to { rotate: 180deg; } }
.buybar__burger { display: grid; gap: 5px; }
.buybar__burger i { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; }
.buybar__burger i:last-child { width: 10px; justify-self: end; }
@media (hover: none) { .buybar__menu:active { scale: .94; } }
@media (max-width: 699px) {
  .buybar { padding-left: 6px; }
  .buybar__menu { display: grid; }
  .buybar p { margin-left: 2px; }
  /* senza pacchetti in vendita resta la navigazione (menu e WhatsApp) */
  .buybar[data-empty="true"] p { visibility: hidden; }
  .buybar[data-empty="true"] .btn { display: none; }
}

/* ---------- marquee ---------- */
.marquee { display: grid; gap: 10px; padding-block: clamp(14px, 2.2vw, 26px); border-block: 1px solid var(--line); overflow: clip; background: rgb(5 5 5 / .35); }
.marquee__row { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 54s; }
.marquee__group { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); padding-right: clamp(24px, 4vw, 60px); }
.marquee__group .lg-host { font-size: clamp(2rem, 5.4vw, 4.6rem); }
.marquee .spk { width: clamp(14px, 1.6vw, 22px); height: clamp(14px, 1.6vw, 22px); fill: var(--ink); opacity: .7; }
.marquee__txt { font: 400 clamp(1.4rem, 3.6vw, 3rem)/1 var(--f-acid); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgb(243 240 234 / .5); }
/* discoteche: nome nello stile del suo logotipo (o il logo ufficiale) e la città in piccolo, in alto a destra */
.club { display: inline-flex; align-items: flex-start; gap: .35em; font-size: clamp(1.9rem, 5vw, 4.2rem); }
.marquee__row--rev .club { font-size: clamp(1.6rem, 4.2vw, 3.6rem); }
.club small { margin-top: .1em; font: 400 .68rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
/* gli eventi (festival, notti speciali) solo col contorno, i locali pieni: la fila alterna come una locandina */
.club--event .lg { color: transparent; -webkit-text-stroke: 1px rgb(243 240 234 / .62); }
@media (max-width: 699px) { .club small { font-size: .75rem; letter-spacing: .1em; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* reveal (fallback universale) */
.js [data-reveal] { opacity: 0; translate: 0 32px; transition: opacity .9s var(--ease-out), translate 1s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; translate: 0 0; }

/* ==========================================================================
   LE FESTE — scroll orizzontale
   ========================================================================== */
.big { font: 500 clamp(1.45rem, 3.2vw, 2.9rem)/1.15 var(--f-body); letter-spacing: -.02em; text-wrap: pretty; max-width: 30ch; }
/* la frase si accende parola per parola quando arriva la sua schermata (a tempo: con lo scorrimento a schermate lo scatto
   è troppo rapido per legarla allo scorrimento); uscendo si spegne subito, così rientrando riparte (app.js → classe lit) */
.big .w { display: inline-block; opacity: .15; transition: opacity .55s var(--ease-out); will-change: opacity; transform: translateZ(0); }
.big.lit .w { opacity: 1; transition-delay: calc(.15s + var(--p) * 2.4s); }
html.still .big .w { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .big .w { opacity: 1; transition: none; } }
.manifesto { padding-bottom: clamp(30px, 5vw, 60px); }
.formats { position: relative; }
.formats__sticky { display: grid; gap: 22px; padding-block: 20px 60px; }
.formats__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.formats__head .h2 { font-size: clamp(2.3rem, 9vw, 5rem); }
/* telefono in orizzontale: i titoli delle sezioni restano della misura che hanno in verticale (11vw del telefono =
   11svh). A 11vw di 915px (100px) il titolo riempiva lo schermo e dopo un salto la prima serata finiva sotto il dock */
@media (orientation: landscape) and (max-height: 500px) {
  :is(.week, .reviews, .how, .faq) .h2 { font-size: min(clamp(2.6rem, 11vw, 7.6rem), 11svh); }
  .formats__head .h2 { font-size: min(clamp(2.3rem, 9vw, 5rem), 9svh); }
}
.formats__meter { display: none; gap: 10px; justify-items: end; font: 400 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.formats__bar { width: clamp(120px, 16vw, 240px); height: 2px; background: var(--line); }
.formats__bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; scale: var(--prog, 0) 1; transition: scale .5s var(--ease-out); }
.formats__track { display: flex; gap: 14px; padding: 6px var(--gutter) 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.formats__track::-webkit-scrollbar { display: none; }
.fmt { --mx: 50%; --my: 40%; --rx: 0deg; --ry: 0deg; position: relative; flex: none; display: flex; flex-direction: column; width: min(84vw, 420px); height: min(70svh, 600px); padding: 20px; border-radius: 14px; overflow: clip; isolation: isolate; background: #000; container-type: inline-size; scroll-snap-align: start; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease-out); }
.fmt__bg { position: absolute; inset: 0; z-index: -2; }
.fmt__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .58; transition: scale 1.4s var(--ease-out), opacity .6s; }
@media (hover: hover) { .fmt:hover .fmt__bg img { scale: 1.07; opacity: .85; } }
.fmt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70cqi circle at var(--mx) var(--my), rgb(255 255 255 / .13), transparent 60%), linear-gradient(to top, rgb(0 0 0 / .92) 10%, transparent 60%); }
.fmt__top { display: flex; justify-content: space-between; font: 400 .64rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.fmt__logo { flex: 1; display: grid; place-items: center; font-size: clamp(2.6rem, 17cqi, 7.4rem); }
.fmt__genre { margin-bottom: .5rem; font: 700 .68rem var(--f-mono); letter-spacing: .15em; text-transform: uppercase; }
.fmt__desc { max-width: 44ch; margin-bottom: 1rem; font-size: .95rem; color: var(--ink-2); text-wrap: pretty; }
.fmt__when { align-self: flex-start; display: inline-flex; gap: .6em; align-items: center; min-height: 44px; padding: .55em .9em; border: 1px solid var(--line-2); border-radius: 999px; font: 700 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: rgb(0 0 0 / .4); transition: background .3s, color .3s; }
@media (hover: hover) { .fmt__when:hover { background: var(--ink); color: var(--bg); } }
.fmt--stella .fmt__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 70% 40%, rgb(226 164 143 / .3), transparent 70%); }
.fmt--ascension .fmt__bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .4) 0 1px, transparent 1px 3px), radial-gradient(70% 50% at 50% 45%, oklch(68% .21 36 / .22), transparent 70%); }
.fmt--end { justify-content: center; align-items: flex-start; gap: 20px; background: var(--ink); color: var(--bg); }
.fmt--end::after { display: none; }
.fmt--end p { font: 400 clamp(2.4rem, 14cqi, 5.4rem)/.9 var(--f-acid); text-transform: uppercase; }
.fmt--end .btn { border-color: var(--bg); color: var(--bg); }
@media (hover: hover) { .fmt--end .btn:hover { background: var(--bg); color: var(--ink); } }
/* la fila si scorre di lato (dito, trackpad, trascinamento col mouse, frecce): la pagina non resta mai bloccata
   su questa sezione per farla scorrere (niente "scroll-jacking") */
.formats__nav { display: none; gap: 8px; }
.formats__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.formats__track.is-drag .fmt { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .formats__track { cursor: grab; } }
@media (min-width: 700px) { .formats__nav { display: flex; } }
@media (min-width: 900px) {
  .formats__sticky { grid-template-columns: minmax(0, 1fr); padding-block: calc(var(--nav-h) + 26px) 28px; }
  .formats__head { align-items: center; }
  .formats__meter { display: grid; }
  .fmt { width: clamp(300px, 32vw, 520px); padding: 26px; }
}
/* a schermate la fila riempie la sua schermata. Telefono in orizzontale (scorrimento libero): la sezione è alta quanto
   serve e le carte quanto il loro contenuto (chiusa in 100svh, la fila tagliava descrizioni e «Quando») */
@media (min-width: 900px) and (min-height: 501px) {
  .formats__sticky { height: 100svh; grid-template-rows: auto minmax(0, 1fr); overflow: clip; }
  .formats__track { height: 100%; min-height: 0; align-items: center; }
  .fmt { height: min(100%, 640px); }
}
@media (orientation: landscape) and (max-height: 500px) { .fmt { height: auto; min-height: min(70svh, 600px); } }
/* telefono: fra una carta e l'altra lo stesso margine del bordo, così la carta di prima esce tutta dallo schermo
   (con 14px ne restava una striscia di 4px sul bordo sinistro) */
@media (max-width: 699px) { .formats__track { gap: var(--gutter); } }
/* poche feste: le carte stanno tutte nello schermo, niente scorrimento da indicare */
.formats.is-static :is(.formats__meter, .formats__nav) { visibility: hidden; }
.formats.is-static .formats__track { justify-content: center; }
.icon-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
@media (max-width: 699px) { :is(.fmt__top, .fmt__genre) { font-size: .75rem; } .fmt__top { letter-spacing: .1em; } }

/* ==========================================================================
   LA SETTIMANA
   ========================================================================== */
.week__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.night { position: relative; border-bottom: 1px solid var(--line); }
.night__btn { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem; grid-template-areas: "day logo arrow" "day info arrow"; align-items: center; gap: 6px 14px; width: 100%; padding: 18px 4px; text-align: left; isolation: isolate; }
.night__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(255 255 255 / .07), transparent 85%); opacity: 0; transition: opacity .4s; }
@media (hover: hover) { .night__btn:hover::before { opacity: 1; } }
.night__day { grid-area: day; display: grid; font: 400 2.4rem/.9 var(--f-acid); text-transform: uppercase; }
.night__day small { margin-top: 6px; font: 700 .68rem var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.night__logo { grid-area: logo; justify-self: start; font-size: clamp(1.7rem, 7vw, 2.6rem); }
.night__info { grid-area: info; display: grid; gap: 2px; }
.night__info b { font-weight: 600; }
.night__info > span:not(.pill) { font: 400 .68rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.night__arrow { grid-area: arrow; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line-2); border-radius: 50%; transition: rotate .6s var(--ease-out), background .3s, color .3s; }
@media (hover: hover) { .night__btn:hover .night__arrow { rotate: -45deg; background: var(--ink); color: var(--bg); } }
.night--today .night__day { color: var(--ember); text-shadow: 0 0 24px var(--ember); }
/* telefono: la pillola ("Stasera", "Accesso VIP") sta sotto il luogo, dentro le informazioni (non copre più il logo) */
.night .pill { justify-self: start; margin-top: 6px; pointer-events: none; }
.night .edit-chip { top: auto; bottom: 12px; right: 58px; }
@supports (animation-timeline: view()) {
  .night__btn { animation: nightOn linear both; animation-timeline: view(); animation-range: cover 15% cover 85%; }
  @keyframes nightOn { 0% { opacity: .75; } 30%, 70% { opacity: 1; } 100% { opacity: .75; } }
}
/* movimento ridotto: le righe sono piene subito, senza la luce che le segue scorrendo */
@media (prefers-reduced-motion: reduce) { .night__btn { animation: none; } }
@media (min-width: 900px) {
  .night__btn { grid-template-columns: 7rem minmax(0, 1.1fr) minmax(0, 1fr) 2.8rem; grid-template-areas: "day logo info arrow"; padding: 26px 8px; }
  .night__day { font-size: 3rem; }
  .night .pill { position: absolute; top: 50%; translate: 0 -50%; right: 74px; margin: 0; }
}


/* ==========================================================================
   FOTO — tela trascinabile
   ========================================================================== */
.photos { padding-bottom: 0; }
.canvas { --canvas-bg: #040404; position: relative; height: min(84svh, 900px); overflow: clip; border-block: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; background: var(--canvas-bg); }
/* le foto sfumano verso i bordi della tela: due veli fermi del colore del fondo (prima una maschera su tutte le tessere,
   che la scheda video ricalcolava a ogni fotogramma della deriva). Fondo pieno: i veli lo raggiungono esattamente */
.canvas::before, .canvas::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.canvas::before { background: linear-gradient(to right, var(--canvas-bg), transparent 7%, transparent 93%, var(--canvas-bg)); }
.canvas::after { background: linear-gradient(to bottom, var(--canvas-bg), transparent 9%, transparent 91%, var(--canvas-bg)); }
.canvas.is-dragging { cursor: grabbing; }
/* galleria e locandine si usano anche da tastiera (frecce, Invio): il fuoco deve vedersi */
.canvas:focus-visible, .ring:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 6px; }
.canvas.is-static, .canvas.is-static.is-dragging { cursor: default; }
.canvas.is-static .tile { cursor: zoom-in; }
/* la tela si sposta tutta insieme: un'unica trasformazione su questo contenitore (js/app.js → galRun) */
.canvas__tiles { position: absolute; inset: 0; will-change: transform; }
.tile { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); overflow: clip; border-radius: 8px; background: #0d0d0d; will-change: transform; contain: layout paint; }
.tile img { width: 100%; height: 100%; object-fit: cover; scale: 1.14; translate: var(--px, 0) var(--py, 0); transition: scale .9s var(--ease-out), filter .6s; pointer-events: none; -webkit-user-drag: none; }
/* la foto è un po' più scura a riposo e piena al passaggio del mouse: un velo nero sopra, di cui cambia solo la
   trasparenza (prima un filtro sulla foto, ricalcolato a ogni fotogramma del passaggio). La libreria è già in bianco e
   nero: il filtro resta solo per le foto caricate dallo Studio, a colori, che il tema spegne */
.tile::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .18; transition: opacity .6s; pointer-events: none; }
.tile img:not([src*="assets/img/"]) { filter: grayscale(1) contrast(1.05); }
@media (hover: hover) { .tile:hover img { scale: 1.22; filter: none; } .tile:hover::after { opacity: 0; } }
.canvas.is-dragging .tile img { scale: 1.04; }
/* a dito alzato la parallasse delle foto torna al centro con calma */
.canvas:not(.is-dragging) .tile img { transition: scale .9s var(--ease-out), filter .6s, translate .5s var(--ease-out); }
/* mouse: la parallasse sposta le foto a ogni fotogramma, ognuna sul suo livello (niente ridisegno delle foto filtrate) */
@media (pointer: fine) { .tile img { will-change: translate, scale; } }
.canvas__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 14px; padding-bottom: 22px; pointer-events: none; }
.canvas__info > * { pointer-events: auto; }
.canvas__info h3 { font: 400 clamp(2.2rem, 9vw, 5.4rem)/.88 var(--f-acid); text-transform: uppercase; text-shadow: 0 6px 40px rgb(0 0 0 / .9); }
.canvas__info p { margin-top: 8px; font: 400 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.canvas__info .row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.canvas__info .edit-chip { position: static; translate: none; }
@media (min-width: 900px) { .canvas__info { grid-auto-flow: column; justify-content: space-between; align-items: end; } }
@media (max-width: 699px) { .canvas__info p { font-size: .75rem; letter-spacing: .08em; } }

/* ==========================================================================
   LOCANDINE — anello 3D
   ========================================================================== */
.posters { position: relative; height: var(--posters-h, 260vh); }
.posters__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: clip; padding-top: calc(var(--nav-h) + 18px); padding-bottom: calc(24px + var(--safe-b)); }
.posters__sticky .sec-head { margin-bottom: 0; }
.posters__sticky .h2 { font-size: clamp(2.3rem, 9vw, 5rem); }
.ring { --pw: clamp(130px, min(44vw, 29svh), 270px); position: relative; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 42%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.ring:active { cursor: grabbing; }
.ring__track { --rot: 0deg; position: relative; width: var(--pw); aspect-ratio: 9 / 16; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--r, 400px))) rotateY(var(--rot)); }
.poster { position: absolute; inset: 0; margin: 0; overflow: visible; transform: rotateY(var(--a)) translateZ(var(--r, 400px)); backface-visibility: hidden; }
/* le locandine di lato si spengono: un velo nero di cui cambia solo la trasparenza (luce = .16 + .84 · cos dell'angolo).
   Prima era un filtro di luminosità su ogni locandina: un passaggio in più della scheda video per ognuna, a ogni
   fotogramma del giro (il costo più alto della sezione) */
.poster::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; background: #000; opacity: calc(.84 - .84 * max(0, cos(var(--a) + var(--rot)))); will-change: opacity; pointer-events: none; }
.poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 40px 90px rgb(0 0 0 / .7); pointer-events: none; -webkit-user-drag: none; -webkit-box-reflect: below 12px linear-gradient(transparent 64%, rgb(0 0 0 / .2)); }
/* scia di movimento naturale: sopra ogni locandina una copia già sfocata solo in orizzontale (la direzione del giro) che
   affiora con la velocità dell'anello (--mbo da app.js, al massimo 0,6: l'immagine nitida si vede sempre). La copia è un
   file già sfocato (assets/img/mappe/*.mosso-480.avif, con l'8% di margine per la coda): sullo schermo cambia solo la
   trasparenza del suo strato, quindi lavora la scheda video. Solo le locandine caricate dallo Studio usano ancora il
   filtro #mbx. Da ferma la copia è invisibile */
.poster__mb { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; opacity: var(--mbo, 0); will-change: opacity; }
.poster__mb:not(.is-baked) { filter: url(#mbx); }
.poster .poster__mb.is-baked img { width: 116%; max-width: none; margin-left: -8%; object-fit: fill; border-radius: 0; }
/* le copie esistono per lo schermo solo mentre l'anello gira (da ferme non costano nulla) */
.ring__track.is-moving .poster__mb { visibility: visible; }
.poster__mb img { box-shadow: none; -webkit-box-reflect: none; }
.poster .edit-chip { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .poster__mb { display: none; } }
html.still .poster__mb { display: none; }
.posters__caption { display: grid; gap: 14px; }
.posters__title { font: 400 clamp(1.6rem, 6vw, 2.8rem)/1 var(--f-acid); text-transform: uppercase; }
.posters__sub { margin-top: 6px; font: 400 .66rem var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.posters__ctrl { display: flex; align-items: center; gap: 8px; }
.posters__count { margin-right: auto; font: 400 .68rem var(--f-mono); letter-spacing: .18em; color: var(--ink-3); }
@media (min-width: 900px) { .posters__caption { grid-auto-flow: column; justify-content: space-between; align-items: end; } .posters__count { margin-right: 6px; } }
/* telefono in orizzontale: lo schermo è troppo basso per fissare l'anello. La sezione è alta quanto serve,
   la pagina scorre normale e l'anello si gira col dito o con le frecce (app.js ignora lo scorrimento quando non è fissato) */
@media (orientation: landscape) and (max-height: 500px) {
  .posters { height: auto; }
  .posters__sticky { position: relative; height: auto; row-gap: 10px; }
  .ring { --pw: min(25svh, 110px); min-height: calc(var(--pw) * 1.78 + 40px); }
  .posters__caption { grid-auto-flow: column; justify-content: space-between; align-items: end; }
}
@media (max-width: 699px) { :is(.posters__sub, .posters__count) { font-size: .75rem; } .posters__sub { letter-spacing: .08em; } .posters__count { letter-spacing: .12em; } }

/* ==========================================================================
   RECENSIONI
   ========================================================================== */
.reviews__stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1px; margin-bottom: 26px; border: 1px solid var(--line); background: var(--line); border-radius: 18px; overflow: hidden; }
.reviews__stats div { display: grid; gap: 6px; padding: 16px; background: var(--bg); }
.reviews__stats b { font: 400 clamp(1.8rem, 6vw, 3.4rem)/1 var(--f-acid); }
.reviews__stats span { font: 400 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rv-rows { display: grid; gap: 14px; overflow: clip; contain: content; mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
/* telefono: le file sono larghe quanto lo schermo e le recensioni ne escono dal bordo da sole. Niente sfumatura: era una
   maschera su file sempre in movimento, ricalcolata a ogni fotogramma */
@media (hover: none) { .rv-rows { mask: none; } }
.rv-row { display: flex; gap: 14px; width: max-content; will-change: transform; animation: marquee 70s linear infinite; }
.rv-row--rev { animation-direction: reverse; animation-duration: 84s; }
.rv-rows:hover .rv-row { animation-play-state: paused; }
.rv-rows.is-off .rv-row, .marquee.is-off .marquee__row { animation-play-state: paused; }
/* senza JavaScript, o se il codice non è arrivato (html.ko, con l'invito a ricaricare): un avviso fisso in basso, sempre in
   vista (in cima alla pagina non si vedrebbe: lo scorrimento si aggancia alla testata) */
.noscript { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(16px + var(--safe-b)); z-index: 90; max-width: 560px; margin: 0 auto; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--ink-2); }
.noscript a { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.noscript--ko { display: none; }
.ko .noscript--ko { display: block; }
.rv { display: grid; gap: 12px; align-content: start; width: min(78vw, 360px); padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / .03); }
.rv p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: .95rem; }
.rv footer { display: flex; justify-content: space-between; gap: 10px; font: 400 .68rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rv footer b { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   RADIO
   ========================================================================== */
.sound { overflow: clip; isolation: isolate; }
.sound__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.sound::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--bg), rgb(5 5 5 / .4) 30%, rgb(5 5 5 / .4) 70%, var(--bg)); }
.sound__grid { display: grid; gap: 32px; }
.sound__lede { max-width: 46ch; margin-top: 20px; color: var(--ink-2); text-wrap: pretty; }
.machine { display: grid; gap: 16px; padding: 14px; border: 1px solid var(--line-2); border-radius: 20px; background: rgb(8 8 8 / .66); backdrop-filter: blur(18px) saturate(130%); box-shadow: 0 40px 120px rgb(0 0 0 / .6); }
.machine__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 400 .68rem var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.machine__head b { color: var(--ink); font-weight: 700; }
.machine__genres { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.machine__genres .chip { flex: none; }
.machine__screen { position: relative; height: clamp(130px, 18vw, 190px); overflow: clip; border: 1px solid var(--line); border-radius: 12px; background: #000; }
.machine__screen canvas { width: 100%; height: 100%; }
.machine__idle { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font: 400 .66rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); transition: opacity .4s; }
.machine[data-playing="true"] .machine__idle { opacity: 0; }
.machine__chord { position: absolute; left: 12px; top: 10px; font: 400 1.4rem var(--f-acid); color: var(--ink); opacity: 0; transition: opacity .4s; }
.machine[data-playing="true"] .machine__chord { opacity: 1; }
.steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.step { position: relative; display: grid; place-items: end center; aspect-ratio: 1 / 1.25; min-height: 44px; padding-bottom: 5px; border: 1px solid var(--line); border-radius: 6px; font: 700 .55rem var(--f-mono); color: var(--ink-3); transition: background .12s, color .12s, box-shadow .12s, border-color .2s; }
/* i passi sono larghi meno di 44px (16 in fila): il tocco vale anche nello spazio fra uno e l'altro, metà per parte,
   così la griglia non ha punti morti e ogni passo prende 44px dove c'è posto (telefono, tablet). Il margine si conta dal
   bordo interno: 1px di bordo + 2,5px di spazio */
.step::before { content: ""; position: absolute; inset: -3.5px; }
.step:nth-child(4n + 1) { border-color: var(--line-2); }
.step[aria-pressed="true"] { background: rgb(255 255 255 / .1); color: var(--ink); }
.step.acc { box-shadow: inset 0 2px 0 var(--rose); }
.step.now { background: var(--ink); color: var(--bg); box-shadow: 0 0 22px rgb(255 255 255 / .6); }
.controls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px; }
.controls .knob:nth-of-type(n + 2), .controls .btn { grid-column: 1 / -1; }
.play { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--ink); color: var(--bg); box-shadow: 0 0 10px rgb(255 255 255 / .55); transition: scale .3s var(--ease-out); }
/* il battito: un alone più largo che si accende col volume (cambia solo l'opacità di un livello fermo; prima l'ombra
   cambiava misura e il pulsante si ridisegnava a ogni fotogramma) */
.play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 60px rgb(255 255 255 / .55); opacity: var(--beat, 0); will-change: opacity; pointer-events: none; }
.play:hover { scale: 1.06; }
.play svg { width: 22px; height: 22px; fill: currentColor; }
.play .i-pause, .machine[data-playing="true"] .play .i-play { display: none; }
.machine[data-playing="true"] .play .i-pause { display: block; }
.knob { display: grid; gap: 8px; font: 400 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.knob span { display: flex; justify-content: space-between; }
.knob output { color: var(--ink); }
input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; accent-color: var(--ink); cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 12px rgb(255 255 255 / .8); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink); }
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(16, 1fr); }
  .step { aspect-ratio: 1 / 1.7; }
  .controls { grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; }
  .controls .knob:nth-of-type(n + 2), .controls .btn { grid-column: auto; }
  .machine { padding: 20px; }
}
@media (min-width: 1000px) { .sound__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(36px, 5vw, 90px); } }

/* ==========================================================================
   COME PRENOTARE · FAQ · FINALE · FOOTER
   ========================================================================== */
.how__steps { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: s; }
.how__steps li { position: relative; display: grid; gap: 8px; padding: 22px 22px 22px 84px; border: 1px solid var(--line-2); border-radius: 20px; background: rgb(255 255 255 / .03); counter-increment: s; }
.how__steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 20px; top: 16px; font: 400 2.8rem/1 var(--f-acid); color: transparent; -webkit-text-stroke: 1px var(--ink); }
.how__steps b { font: 400 1.4rem/1.05 var(--f-acid); text-transform: uppercase; }
.how__steps span { color: var(--ink-2); font-size: .95rem; }
.how__ctas { display: grid; gap: 10px; }
@media (min-width: 900px) { .how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .how__steps li { padding: 90px 24px 26px; } .how__steps li::before { left: 24px; top: 22px; font-size: 3.6rem; } .how__ctas { display: flex; } }
.faq__grid { display: grid; gap: 22px; }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list details:first-child { border-top: 1px solid var(--line); }
.faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding: 18px 0; overflow: clip; list-style: none; cursor: pointer; font: 500 clamp(1.02rem, 1.6vw, 1.3rem)/1.3 var(--f-body); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; mask: var(--spark) center / contain no-repeat; transition: rotate .6s var(--ease-out), scale .6s var(--ease-out); }
/* aperta: la stellina gira e cresce dentro il suo quadrato (gli angoli vuoti ruotati non allargano la domanda: clip) */
.faq__list details[open] summary::after { rotate: 45deg; scale: 1.3; }
@media (prefers-reduced-motion: reduce) { .faq__list summary::after { transition: none; } }
html.still .faq__list summary::after { transition: none; }
.faq__list p { max-width: 62ch; padding-bottom: 22px; color: var(--ink-2); }
.faq__list .edit-chip { position: static; margin-bottom: 14px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); } }
.final { position: relative; padding-block: clamp(100px, 16vw, 220px); overflow: clip; text-align: center; }
.final__star { position: absolute; left: 50%; top: 50%; z-index: 0; width: min(86vw, 560px); translate: -50% -50%; mix-blend-mode: screen; opacity: .4; animation: float 14s ease-in-out infinite alternate; }
.final__star img { width: 100%; height: auto; }
.final .wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
@keyframes float { from { rotate: -8deg; scale: .94; } to { rotate: 10deg; scale: 1.06; } }
.final .h2 { display: grid; justify-items: center; }
.final .script { margin-top: -.08em; font-size: .9em; line-height: 1.1; text-transform: none; }
.final p { max-width: 44ch; color: var(--ink-2); text-wrap: balance; }
.final .how__ctas { width: min(100%, 420px); }
@media (min-width: 900px) { .final .how__ctas { width: auto; } }
.footer { padding-top: clamp(56px, 8vw, 110px); padding-bottom: calc(90px + var(--safe-b)); border-top: 1px solid var(--line); overflow: clip; background: linear-gradient(transparent, rgb(5 5 5 / .85) 30%); }
@media (min-width: 1100px) { .footer { padding-bottom: 0; } }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.footer__cols > div:first-child { grid-column: 1 / -1; }
.footer__cols p { max-width: 38ch; margin-top: 16px; color: var(--ink-2); }
.footer__cols h3 { margin-bottom: 12px; font: 700 .66rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.footer__cols ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer__cols a, .footer__cols li > button { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); transition: color .3s; text-align: left; }
.footer__cols a:hover, .footer__cols li > button:hover { color: var(--ink); }
.footer .logo { font-size: 2.2rem; }
/* Privacy e Cookie compaiono quando hanno la loro pagina (un indirizzo vero al posto di "#"); per chi non è admin, senza
   niente da mostrare la colonna intera resta via */
.footer__cols li:has(> a[href="#"]) { display: none; }
html:not(.is-admin) .footer__cols > div:has(.public-only):not(:has(li > a:not([href="#"]))) { display: none; }
/* la scritta grande è solo un disegno: i suoi caratteri sbordano dalla riga e coprivano i comandi della fila sotto */
.footer__big { margin-top: clamp(40px, 6vw, 80px); display: grid; place-items: center; pointer-events: none; }
.footer__big .logo { font-size: clamp(3rem, 16vw, 13rem); color: transparent; -webkit-text-stroke: 1px var(--ink-3); }
.footer__big .logo__orbit { color: var(--ink-3); }
.footer__big .logo__sub { color: var(--ink-3); -webkit-text-stroke: 0; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 26px; margin-top: 26px; border-top: 1px solid var(--line); font: 400 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__bottom a:hover { color: var(--ink); }
/* crediti delle foto con licenza libera (autore, titolo, licenza): obbligatori, discreti */
.footer__credits { margin: -10px 0 24px; font: 400 .62rem/1.7 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); text-wrap: pretty; }
.footer__credits a { text-decoration: underline; text-underline-offset: 2px; }
.footer__credits a:hover { color: var(--ink); }
@media (min-width: 900px) { .footer__cols { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .footer__cols > div:first-child { grid-column: auto; } }

/* ==========================================================================
   DIALOG — foglio di prenotazione, scheda festa, confronto, lightbox
   ========================================================================== */
dialog { color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .62); backdrop-filter: blur(8px); }
/* --bk-*: i colori del calendario e dell'avanzamento, ridefiniti dal tema estate */
.sheet { --bk-on: var(--ink); --bk-on-ink: var(--bg); --bk-range: color-mix(in srgb, #fff 8%, #0b0b0b); --bk-prog: var(--ink); --bk-err: var(--ember); position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: 94dvh; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 26px 26px 0 0; background: #0b0b0b; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; translate: 0 100%; transition: translate .55s var(--ease-out), display .55s allow-discrete, overlay .55s allow-discrete; box-shadow: 0 -30px 100px rgb(0 0 0 / .7); overscroll-behavior: contain; }
/* aperto cambia solo display e posizione: griglia e altezza restano anche mentre si chiude, così scende intero */
.sheet[open] { display: grid; translate: 0 0; }
@starting-style { .sheet[open] { translate: 0 100%; } }
.sheet.dragging { transition: none; }
/* testata compatta: ← · luogo + pacchetto su una riga · ✕, poi avanzamento e "Passo 1 di 3 · …" */
.sheet__head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 6px 14px 8px 20px; border-bottom: 1px solid var(--line); touch-action: none; }
.sheet__head::before { content: ""; grid-column: 1 / -1; justify-self: center; width: 42px; height: 4px; border-radius: 4px; background: var(--line-2); }
.sheet__head .bk-back { grid-column: 1; }
.sheet__id { grid-column: 2; min-width: 0; }
.bk-back[hidden] + .sheet__id { grid-column: 1 / 3; }
.sheet__head .bk-back { margin-left: -6px; }
.sheet__head .bk-x { grid-column: 3; }
.sheet__kicker { font: 700 .75rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__title { font: 400 1.6rem/1.05 var(--f-acid); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__body { display: grid; gap: 22px; align-content: start; padding: 12px 20px 14px; overflow-y: auto; overscroll-behavior: contain; }
.sheet__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 10px 20px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: #0b0b0b; }
/* telefono: altezza fissa per tutti i passi (niente salti passando dall'uno all'altro) */
@media (max-width: 899px) { .sheet { height: min(92dvh, 760px); } }
@media (min-width: 900px) {
  .sheet { inset: 0 0 0 auto; width: min(500px, 100%); height: 100dvh; max-height: none; border-top: 0; border-left: 1px solid var(--line-2); border-radius: 0; translate: 100% 0; }
  .sheet[open] { translate: 0 0; }
  @starting-style { .sheet[open] { translate: 100% 0; } }
  .sheet__head { padding-top: 14px; }
  .sheet__head::before { display: none; }
  .sheet__title { font-size: 2rem; }
}
.bk-sec { display: grid; gap: 6px; }
.bk-sec > b, .bk-row > b, .bk-who b { font: 700 .75rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.bk-help { font-size: .85rem; line-height: 1.35; color: var(--ink-3); }
.bk-help.hot { color: var(--rose); }
.bk-input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: #121212; color: var(--ink); font-size: 1rem; color-scheme: dark; outline: 0; transition: border-color .25s, box-shadow .25s; }
.bk-input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(255 255 255 / .08); }
.bk-input:user-invalid, .bk-input[aria-invalid="true"] { border-color: var(--bk-err); }
.stepper { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; font-size: 1.2rem; line-height: 1; transition: background .25s, color .25s, opacity .25s; }
@media (hover: hover) { .stepper button:not([aria-disabled="true"]):hover { background: var(--ink); color: var(--bg); } }
.stepper button[aria-disabled="true"] { opacity: .3; cursor: default; }
.stepper output { min-width: 1.8em; text-align: center; font: 400 1.5rem var(--f-acid); }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.opt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; transition: border-color .25s, background .25s; }
.opt:has(input:checked) { border-color: var(--ink); background: rgb(255 255 255 / .05); }
.opt input { appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--line-2); border-radius: 50%; cursor: pointer; }
.opt input[type="checkbox"] { border-radius: 6px; }
.opt input:checked { border-color: var(--ink); background: var(--ink); }
.opt input:checked::after { content: ""; width: 10px; height: 10px; background: var(--bg); mask: var(--spark) center / contain no-repeat; }
.opt b { display: block; font-weight: 600; font-size: .95rem; }
/* solo la descrizione è attenuata: il nome della sistemazione resta pieno */
.opt > span > span { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
.opt em { font: 400 .75rem var(--f-mono); letter-spacing: .06em; font-style: normal; color: var(--ink-2); white-space: nowrap; text-align: right; }
/* supplemento su due righe ("+60 €" / "a persona"): il nome della sistemazione resta su una riga anche sul telefono */
.opt em small { display: block; font: inherit; }
.sum { display: grid; gap: 4px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 16px; font: 400 .875rem/1.35 var(--f-body); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.sum .neg { color: var(--rose); }
.sum .tot { align-items: center; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font: 700 .75rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.sum .tot small { display: block; margin-top: 2px; font: 400 .8rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.sum .tot output { font: 400 1.6rem/1 var(--f-acid); color: var(--ink); letter-spacing: .02em; }
.bk-ok { display: grid; justify-items: center; gap: 12px; padding: 16px 0 6px; text-align: center; }
/* la stella entra col suo contenitore HTML (opacità, scala, rotazione); l'alone è un gradiente fermo dietro di lei:
   un filtro sull'SVG che entra andava ridisegnato a ogni fotogramma */
.bk-ok__star { --glow: rgb(255 255 255 / .3); position: relative; display: grid; width: 64px; height: 64px; color: var(--ink); isolation: isolate; animation: orbitIn 1s var(--ease-out) both; }
.bk-ok__star::before { content: ""; position: absolute; inset: -18px; z-index: -1; background: radial-gradient(closest-side, var(--glow), transparent); }
.bk-ok__star svg { width: 100%; height: 100%; fill: currentColor; }
.bk-ok h3 { font: 400 2.6rem/.9 var(--f-acid); text-transform: uppercase; }
.bk-ok code { padding: .5em .9em; border-radius: 10px; background: rgb(255 255 255 / .08); font: 700 1rem var(--f-mono); letter-spacing: .14em; }
.bk-ok p { color: var(--ink-2); }
.bk-ok h3:focus { outline: 0; }

/* ---------- prenotazione a passi ---------- */
.bk-prog { grid-column: 1 / -1; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bk-prog li { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); }
/* un solo gradiente che attraversa i segmenti accesi (nel tema estate è il tramonto); si accende con l'opacità, non col colore */
.bk-prog li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bk-prog) calc(var(--i) / max(1, var(--n) - 1) * 100%) 0 / calc(var(--n) * 100%) 100%; opacity: 0; transition: opacity .4s; }
.bk-prog li.on::after { opacity: 1; }
.bk-steplabel { grid-column: 1 / -1; font: 700 .75rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-steplabel:focus:not(:focus-visible) { outline: 0; }
.bk-form { display: grid; }
.bk-step { display: grid; gap: 16px; align-content: start; min-width: 0; }
.bk-step.bk-in { animation: bkIn .32s var(--ease-out) both; }
@keyframes bkIn { from { opacity: 0; translate: calc(var(--dir, 1) * 28px) 0; } }
.bk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bk-mon { font: 400 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.bk-months { display: flex; gap: 6px; }
.bk-months button { flex: 1; min-height: 44px; border: 1px solid var(--line-2); border-radius: 999px; font: 700 .75rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); transition: background .25s, color .25s, border-color .25s; }
.bk-months button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bk-wk, .bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bk-wk { margin-top: 2px; font: 400 .75rem var(--f-mono); text-transform: uppercase; color: var(--ink-3); text-align: center; }
.bk-cal { border-radius: 12px; }
.bk-cal[aria-invalid="true"] { outline: 1px solid var(--bk-err); outline-offset: 4px; }
/* giorno: tutta la cella si tocca (44px), il cerchio segna la scelta; la fascia va dall'arrivo alla partenza */
.day { position: relative; display: grid; place-items: center; min-height: 44px; cursor: pointer; font: 500 1rem/1 var(--f-body); font-variant-numeric: tabular-nums; }
.day span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background .2s, color .2s; }
.day:has(:disabled) { color: var(--ink-3); opacity: .45; cursor: default; }
/* il soggiorno: una capsula alta quanto i cerchi, dall'arrivo (pieno) alla partenza (anello). Un pixel in più per lato:
   le celle hanno larghezze frazionarie e fra due tratti restava una riga sottile */
.day.in-range { background: linear-gradient(var(--bk-range), var(--bk-range)) center / calc(100% + 2px) 40px no-repeat; }
.day.is-end { background: linear-gradient(var(--bk-range), var(--bk-range)) -1px center / calc(50% + 1px) 40px no-repeat; }
.day.is-end span { box-shadow: inset 0 0 0 1.5px var(--bk-on); }
.day:has(:checked) { background: linear-gradient(var(--bk-range), var(--bk-range)) calc(100% + 1px) center / calc(50% + 1px) 40px no-repeat; }
/* periodo breve: una settimana a cavallo dei mesi; i giorni che si possono scegliere hanno il loro cerchio */
.bk-cal--short .day { min-height: 66px; }
.bk-cal--short .day small { position: absolute; bottom: 0; font: 400 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bk-cal--short .day:not(:has(:disabled, :checked)) span { box-shadow: inset 0 0 0 1px var(--line-2); }
.bk-cal--short .day.in-range span, .bk-cal--short .day.is-end span { box-shadow: none; }
.bk-cal--short .day.is-end span { box-shadow: inset 0 0 0 1.5px var(--bk-on); }
/* la partenza chiude la capsula: anello pieno, niente mezzo cerchio colorato */
.day.is-end span { background: var(--bk-range); }
/* notti e partenza si leggono piene anche dove non si può arrivare */
.day:is(.in-range, .is-end):has(:disabled) { opacity: 1; color: var(--ink); }
.day:has(:checked) span { background: var(--bk-on); color: var(--bk-on-ink); font-weight: 700; }
.day:has(:focus-visible) span { outline: 1.5px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .day:not(:has(:disabled, :checked)):hover span { background: rgb(255 255 255 / .1); } }
.bk-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-who > div:first-child { display: grid; gap: 4px; min-width: 0; }
.bk-who b { letter-spacing: .06em; }
.bk-max { justify-self: start; padding-block: 2px; font-size: .8rem; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px; }
.bk-err { font-size: .85rem; line-height: 1.35; color: var(--bk-err); }
.bk-err:empty { display: none; }
.bk-help.bk-err { color: var(--bk-err); }
.sum__pick { align-items: center; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sum__pick > span { display: grid; gap: 1px; min-width: 0; }
.sum__pick small { font: 700 .75rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sum__pick + .tot { margin-top: 0; border-top: 0; }
.bk-edit { flex: none; align-self: center; min-height: 44px; margin-block: -6px; padding: 0 2px 0 8px; font: 700 .75rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.bk-share { min-height: 44px; }
/* riepilogo e invio: tutto in uno schermo anche a 360×740 (nome in cima, la tastiera arriva solo qui) */
.bk-step[data-step="send"] { gap: 10px; }
.sheet .bk-input { min-height: 48px; padding-block: 10px; }
.bk-step .fine { font: 400 .75rem/1.4 var(--f-body); letter-spacing: 0; }
/* piede: totale (persone, cifra, acconto) | Avanti; all'ultimo passo il totale sopra e WhatsApp a tutta larghezza */
.bk-total { display: grid; gap: 1px; min-width: 0; margin: 0; }
.bk-total small { font: 400 .75rem/1.25 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-total b { font: 400 1.6rem/1 var(--f-acid); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-next { min-height: 52px; padding-inline: 1.5em; }
.bk-pay { min-height: 52px; }
.sheet__foot.is-last { grid-template-columns: minmax(0, 1fr); }
.is-last .bk-total { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.is-last .bk-total b { grid-column: 2; grid-row: 1 / 3; }
/* telefono basso (390×664, 360×740): il foglio sale fin quasi in cima e spazi un filo più stretti, così ogni passo sta
   in uno schermo anche con un mese di sei settimane e le lingue più lunghe; i bersagli restano da 44px */
@media (max-width: 899px) and (max-height: 760px) {
  .sheet { height: calc(100dvh - 24px); max-height: none; }
  .sheet__head { padding-block: 4px 6px; row-gap: 4px; }
  .sheet__body { padding-block: 8px 10px; }
  .sheet__foot { padding-block: 8px calc(8px + var(--safe-b)); }
  .bk-step { gap: 12px; }
  .bk-sec { gap: 4px; }
  .opt { min-height: 46px; padding-block: 7px; }
}
/* tastiera aperta: il foglio occupa l'area visibile (js → --vvt/--vvh) e la testata si stringe */
.sheet.kb { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); max-height: none; border-radius: 0; }
.sheet.kb .sheet__head::before { display: none; }
.sheet.kb .bk-steplabel, .bk-prog li > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* telefono in orizzontale: foglio centrato e testata compatta senza scritta di avanzamento (resta per i lettori di schermo) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) { .sheet { margin-inline: auto; width: min(100%, 680px); } }
@media (orientation: landscape) and (max-height: 500px) {
  .sheet__head { padding-block: 6px; row-gap: 6px; }
  .sheet__head::before { display: none; }
  .bk-steplabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sheet__foot { padding-block: 8px calc(8px + var(--safe-b)); }
}

.modal { width: min(1000px, calc(100% - 20px)); max-height: calc(100dvh - 20px); padding: 0; overflow: auto; border: 1px solid var(--line-2); border-radius: 20px; background: #090909; overscroll-behavior: contain; view-transition-name: modal; }
.modal[open] { display: grid; grid-auto-rows: max-content; }
.no-vt .modal[open] { animation: modalIn .5s var(--ease-out) both; }
::view-transition-new(modal) { animation: modalIn .55s var(--ease-out) both; }
::view-transition-old(modal) { animation: modalOut .35s var(--ease-io) both; }
::view-transition-group(*.pack) { animation-duration: .55s; animation-timing-function: var(--ease-out); }
::view-transition-group(lb-img) { animation-duration: .7s; animation-timing-function: var(--ease-out); }
@keyframes modalIn { from { opacity: 0; translate: 0 30px; scale: .98; } }
@keyframes modalOut { to { opacity: 0; translate: 0 20px; scale: .98; } }
.modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; }
@media (hover: hover) { .modal__close:hover { rotate: 90deg; } }
.modal__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3.4; overflow: clip; background: #000; isolation: isolate; }
.modal__media::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--bgimg, none) center / cover; filter: blur(30px) brightness(.45); }
.modal__media img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.modal__media .no-poster { object-fit: cover; padding: 0; opacity: .6; }
.modal__logo { font-size: clamp(3rem, 12vw, 5.6rem); padding: 20px; }
.modal__body { display: grid; gap: 18px; align-content: start; padding: clamp(20px, 3vw, 40px); }
.modal__title { font: 400 clamp(2rem, 7vw, 3.4rem)/.92 var(--f-acid); text-transform: uppercase; }
.modal__desc { color: var(--ink-2); text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.facts div { padding: 12px 14px; background: #090909; }
.facts dt { font: 400 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font-weight: 500; }
.h3 { margin-bottom: 10px; font: 700 .66rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 820px) { .modal[open]:not(.compare) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .modal__media { aspect-ratio: auto; min-height: 480px; } }

/* confronto: testata fissa + tabella che scorre nei due versi; nomi (thead), pulsanti (tfoot) e prima colonna restano incollati */
.compare[open] { display: flex; flex-direction: column; overflow: hidden; }
.compare__head { position: relative; flex: none; padding: 22px 64px 14px 16px; }
.compare__head .eyebrow { margin-bottom: .6rem; }
.compare__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 16px 16px; border: 1px solid var(--line); border-radius: 16px; overscroll-behavior: contain; }
.compare table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.compare th, .compare td { padding: 12px; border-bottom: 1px solid var(--line); text-align: center; }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; text-align: left; background: #090909; box-shadow: 10px 0 14px -10px rgb(0 0 0 / .8); }
.compare thead th { position: sticky; top: 0; z-index: 2; background: #090909; font: 400 1.4rem var(--f-acid); text-transform: uppercase; }
.compare thead small { display: block; font: 400 .95rem var(--f-acid); color: var(--ink-2); }
.compare td .ico { margin: 0 auto; width: 18px; height: 18px; }
.compare td:first-child .ico { display: inline-block; vertical-align: -3px; margin: 0 4px 0 0; width: 16px; height: 16px; }
.compare td.off { color: var(--ink-3); }
.compare tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--line); border-bottom: 0; background: #090909; }
.compare thead th:first-child, .compare tfoot td:first-child { z-index: 3; }
.compare tfoot .btn { max-width: 100%; }
/* maniglia dei fogli dal basso (si vede solo sotto i 700px) */
.modal__grab { display: none; }
/* una colonna: la ✕ resta in vista mentre la scheda scorre (sticky su tutte le righe della griglia) */
@media (max-width: 819px) {
  .modal[open]:not(.compare) { grid-template-columns: minmax(0, 1fr); }
  .modal:not(.compare) .modal__close { position: sticky; top: 12px; grid-row: 1 / 3; grid-column: 1; justify-self: end; align-self: start; margin: 12px 12px 0 0; }
  .modal:not(.compare) .modal__media { grid-row: 1; grid-column: 1; }
  .modal:not(.compare) .modal__body { grid-row: 2; grid-column: 1; }
}
/* telefono: scheda festa e confronto diventano fogli dal basso, come la prenotazione */
@media (max-width: 699px) {
  .modal { inset: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; margin: 0; border-width: 1px 0 0; border-radius: 22px 22px 0 0; transition: translate .4s var(--ease-out); }
  .modal.dragging { transition: none; }
  .modal__grab { position: sticky; top: 0; z-index: 4; display: grid; place-items: center; justify-self: center; align-self: start; width: 50%; height: 26px; touch-action: none; cursor: grab; }
  .modal__grab::before { content: ""; width: 42px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .5); box-shadow: 0 0 6px rgb(0 0 0 / .5); }
  .modal:not(.compare) .modal__grab { grid-row: 1 / 3; grid-column: 1; }
  .compare .modal__grab { position: absolute; top: 0; left: 25%; }
  .compare__head { padding-top: 26px; }
  .compare__head .modal__close { top: 14px; }
  .compare .modal__title { font-size: 1.9rem; }
  .compare__scroll { container-type: inline-size; scroll-snap-type: x mandatory; scroll-padding-left: 112px; margin-bottom: calc(12px + var(--safe-b)); }
  .compare table { width: max-content; min-width: 100%; font-size: .85rem; }
  .compare th:first-child, .compare td:first-child { width: 112px; min-width: 112px; max-width: 112px; padding: 10px 6px 10px 10px; font-size: .8rem; line-height: 1.25; }
  /* due pacchetti interi accanto alle etichette, gli altri a scatto */
  .compare th:not(:first-child), .compare td:not(:first-child) { width: calc((100cqi - 112px) / 2); min-width: calc((100cqi - 112px) / 2); padding: 10px 6px; }
  .compare thead th:not(:first-child) { scroll-snap-align: start; font-size: 1.2rem; }
  .compare tfoot .btn { width: 100%; padding-inline: .5em; font-size: .75rem; letter-spacing: .04em; }
  /* le etichette in maiuscoletto non scendono sotto i 12px nemmeno dentro le finestre */
  dialog :is(.eyebrow, .fine, .chip, .h3, .facts dt, .lb__top, .lb__sub), .toast, .toast button { font-size: .75rem; }
  dialog .eyebrow { letter-spacing: .14em; }
}
@media (orientation: landscape) and (max-height: 500px) { .modal__media { aspect-ratio: auto; height: 45svh; min-height: 0; } }
/* movimento ridotto (sistema o "Riduci animazioni"): fogli e passi compaiono senza scivolare */
@media (prefers-reduced-motion: reduce) { .modal, .bk-prog li::after { transition: none; } .bk-step.bk-in, .bk-ok__star { animation: none; } }
html.still :is(.sheet, .modal), html.still .bk-prog li::after { transition: none; }
html.still .bk-ok__star { animation: none; }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(3 3 3 / .97); overscroll-behavior: contain; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.no-vt .lightbox[open] { animation: modalIn .45s var(--ease-out) both; }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); font: 400 .7rem var(--f-mono); letter-spacing: .18em; color: var(--ink-2); }
/* il dito muove l'immagine (app.js): un dito = gesto nostro, due dita = zoom del browser */
/* una riga e una colonna esatte (non auto): così il max-height: 100% dell'immagine si misura sul palco e non sulla foto,
   che altrimenti usciva intera sopra titolo, «Scarica» e miniature */
.lb__stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 clamp(12px, 7vw, 110px); touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 120px rgb(0 0 0 / .8); -webkit-user-drag: none; -webkit-touch-callout: none; }
.lb__nav { position: absolute; top: 50%; translate: 0 -50%; display: none; }
.lb__nav--prev { left: var(--gutter); }
.lb__nav--next { right: var(--gutter); }
@media (min-width: 700px) { .lb__nav { display: grid; } }
.lb__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; padding: 16px var(--gutter) 10px; }
.lb__title { font: 400 clamp(1.5rem, 3vw, 2.3rem)/1 var(--f-acid); text-transform: uppercase; }
.lb__sub { margin-top: 6px; font: 400 .64rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lb__thumbs { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) calc(16px + var(--safe-b)); scrollbar-width: none; }
.lb__thumbs button { flex: none; width: 52px; height: 64px; overflow: clip; border-radius: 4px; opacity: .4; outline-offset: 2px; transition: opacity .3s; scroll-snap-align: center; }
.lb__thumbs button[aria-current="true"] { opacity: 1; outline: 1px solid var(--ink); }
.lb__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- toast ---------- */
.toast { position: fixed; inset: auto auto calc(84px + var(--safe-b)) 50%; margin: 0; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 10px 10px 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(14 14 14 / .95); backdrop-filter: blur(12px); color: var(--ink); font: 400 .74rem/1.35 var(--f-mono); letter-spacing: .04em; opacity: 0; translate: -50% 16px; transition: opacity .35s, translate .5s var(--ease-out), display .5s allow-discrete, overlay .5s allow-discrete; }
/* da chiuso l'avviso resta nel layout (display:flex): non deve intercettare i tocchi sul contenuto sotto */
.toast:not(:popover-open) { pointer-events: none; }
.toast:popover-open { opacity: 1; translate: -50% 0; }
@starting-style { .toast:popover-open { opacity: 0; translate: -50% 16px; } }
.toast button { flex: none; min-height: 36px; padding: .5em 1em; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 .64rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.toast button[hidden] { display: none; }
.toast span { padding-right: 8px; }
@media (min-width: 1100px) { .toast { bottom: 24px; } }
/* con la prenotazione aperta l'avviso sta sopra il piede (totale e invio), non sopra il pulsante; da 900px al centro del pannello */
html:has(#book[open]) .toast { bottom: calc(132px + var(--safe-b)); }
@media (min-width: 900px) { html:has(#book[open]) .toast { left: calc(100% - min(500px, 100%) / 2); max-width: min(476px, calc(100% - 24px)); } }

/* ---------- Studio: accesso riservato ---------- */
/* i pulsanti dello Studio esistono solo sui dispositivi già sbloccati (o in anteprima locale) */
html:not(.is-admin) :is(.studio-fab, .menu [data-studio-open], .footer li:has(> [data-studio-open]), .admin-only) { display: none !important; }
html.is-admin .public-only { display: none; }
.gate { width: min(420px, calc(100% - 24px)); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg-2); color: var(--ink); box-shadow: 0 40px 120px rgb(0 0 0 / .7); overscroll-behavior: contain; }
.gate::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(14px); }
.gate[open] { animation: modalIn .45s var(--ease-out) both; }
.gate__box { display: grid; gap: 16px; padding: 24px 22px 20px; }
.gate__head { display: flex; align-items: center; gap: 12px; }
.gate__head > svg { width: 22px; height: 22px; flex: none; fill: currentColor; filter: drop-shadow(0 0 10px rgb(255 255 255 / .6)); }
.gate__head b { display: block; font: 400 1.9rem/1 var(--f-acid); text-transform: uppercase; letter-spacing: .02em; }
.gate__head span { font: 400 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.gate__f { display: grid; gap: 8px; font: 700 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.gate__in { position: relative; display: block; }
.gate__in .bk-input { padding-right: 54px; font: 400 1.05rem var(--f-body); letter-spacing: .02em; text-transform: none; }
.gate__eye { position: absolute; right: 5px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink-3); transition: color .25s, background .25s; }
.gate__eye:hover, .gate__eye[aria-pressed="true"] { color: var(--ink); background: rgb(255 255 255 / .07); }
.gate__eye .ico { width: 20px; height: 20px; }
.gate__msg { font: 400 .78rem/1.45 var(--f-mono); color: var(--ember); }
.gate__msg:empty { display: none; }
.gate__row { display: flex; justify-content: flex-end; gap: 8px; }
.gate__row .btn { min-width: 112px; }
.gate .fine { text-align: center; }
.gate__s2 { display: grid; gap: 12px; }
.gate__lead { font-size: .92rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.gate__s2 .btn svg { width: 1.3em; height: 1.3em; }
.gate__link { justify-self: center; padding: 6px 4px; font: 400 .68rem var(--f-mono); letter-spacing: .08em; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; transition: color .25s; }
.gate__link:hover { color: var(--ink); }
.gate__code { font: 700 1rem var(--f-mono) !important; letter-spacing: .14em !important; text-transform: uppercase !important; }

/* ---------- Studio: segni di modifica sul sito ---------- */
.add-chip, .edit-chip { display: none; }
.studio-on .add-chip { display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: .7em 1.1em; border: 1px dashed var(--ink); border-radius: 999px; background: rgb(255 255 255 / .06); font: 700 .64rem var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); white-space: nowrap; animation: chipIn .5s var(--ease-out) both; }
.studio-on .add-chip:hover { background: var(--ink); color: var(--bg); }
.studio-on .edit-chip { display: inline-flex; position: absolute; top: 10px; right: 10px; z-index: 6; align-items: center; gap: .4em; padding: .55em .9em; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 24px rgb(0 0 0 / .5); animation: chipIn .5s var(--ease-out) both; }
@keyframes chipIn { from { opacity: 0; scale: .8; } }
.studio-fab { position: fixed; left: 0; top: 50%; translate: 0 -50%; z-index: 66; display: none; writing-mode: vertical-rl; align-items: center; gap: .7em; padding: 1.2em .8em; border-radius: 0 12px 12px 0; border: 1px solid var(--line-2); border-left: 0; background: rgb(10 10 10 / .72); backdrop-filter: blur(12px); font: 700 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s, opacity .3s; }
@media (hover: hover) { .studio-fab:hover { background: var(--ink); color: var(--bg); } }
.studio-fab svg { width: 1em; height: 1em; fill: currentColor; }
.studio-fab .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.has-drafts .studio-fab .dot { display: block; }
.studio-on .studio-fab { opacity: 0; pointer-events: none; }
@media (min-width: 1100px) {
  .studio-fab { display: inline-flex; }
  html.studio-on body { margin-right: var(--studio-w); }
  html.studio-on .nav, html.studio-on .progress { right: var(--studio-w); }
  html.studio-on .toast { left: calc((100% - var(--studio-w)) / 2); }
}
.flash { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 2px var(--ink), 0 0 60px rgb(255 255 255 / .4); } }

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__row, .rv-row, .grain, .final__star, .lg__o i, .logo__s1, .logo__s2, .logo__run, .pack__ring i, .hero__cue { animation: none !important; }
  .js .logo--hero .logo__main, .js .logo--hero .logo__orbit, .js .logo--hero .logo__fx, .js .logo--hero .logo__sub, .js [data-intro] { animation: none !important; clip-path: none !important; opacity: 1 !important; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .fmt { transform: none !important; }
  .sheet { transition: none; }
  /* l'equalizzatore del pulsante Suono e il loader restavano in movimento */
  .eq i, .hero__kicker::after { animation: none !important; }
  /* c'è già il sistema a ridurre il movimento: il pulsante "Riduci animazioni" non serve */
  [data-still] { display: none !important; }
}

/* ==========================================================================
   NAVIGAZIONE E RIFINITURE SU TELEFONO
   ========================================================================== */
/* ancore: il contenuto della sezione arriva 16px sotto la barra (senza la fascia vuota del padding della sezione) */
.section[id] { scroll-margin-top: calc(16px - clamp(72px, 12vw, 170px)); }
.packs[id] { scroll-margin-top: calc(16px - clamp(28px, 6vw, 80px)); }
/* sezioni che si fermano in cima (locandine; feste su schermo largo): il loro riquadro tiene già conto della barra */
.posters[id] { scroll-margin-top: calc(-1 * var(--nav-h)); }
@media (min-width: 900px) { .formats[id] { scroll-margin-top: calc(-1 * var(--nav-h)); } }
/* la radio: la fila dei generi arriva col motore audio, il suo posto è già tenuto */
.machine__genres:empty { min-height: 44px; }
/* sezione corrente nella barra in alto (schermo largo) */
.nav__links a[aria-current="location"] { color: var(--ink); }
.nav__links a[aria-current="location"]::after { scale: 1 1; }
.nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
/* FAQ: chi ha ancora una domanda scrive subito */
.faq__more { margin-top: 24px; }
.faq__more a { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgb(37 211 102 / .55); text-underline-offset: 5px; transition: color .3s; }
.faq__more .ico { color: #25d366; }
@media (hover: hover) { .faq__more a:hover { color: var(--ink); } }
.footer__bottom .still-btn { min-height: 44px; }

/* fuori schermo (js/app.js → is-off) si fermano il bordo che gira del pacchetto in evidenza, il puntino della testata,
   le stelline dei loghi e la stella del finale */
#pacchetti.is-off .pack__ring i, .hero.is-off .hero__kicker::after, .hero.is-off :is(.hero__cue, .logo__s1, .logo__s2, .logo__run), .is-off :is(.lg__o i, .final__star) { animation-play-state: paused; }
/* pagina coperta da una finestra o dal menu (html.covered, js/app.js → syncCover): ciò che si muove dietro si ferma.
   Sotto lo sfondo sfocato di una finestra ogni fotogramma di un nastro o di un bordo che gira costringerebbe a
   risfocare tutto lo schermo (sul telefono il foglio della prenotazione ne risentiva) */
html.covered :is(.marquee__row, .rv-row, .grain, .final__star, .lg__o i, .logo__s1, .logo__s2, .logo__run, .hero__cue, .eq i),
html.covered .pack__ring i, html.covered .hero__kicker::after { animation-play-state: paused !important; }
/* "Riduci animazioni" (html.still, da js/app.js → setStill): tutto ciò che si muove da solo si ferma dov'è */
html.still :is(.marquee__row, .rv-row, .grain, .final__star, .lg__o i, .logo__s1, .logo__s2, .logo__run, .hero__cue, .eq i),
html.still .pack__ring i, html.still .hero__kicker::after, html.still :is(.loader__spin, .loader__orbit) { animation-play-state: paused !important; }

/* niente vetro sfocato su carte, barre e pulsanti sopra il cielo e il pulviscolo: il cielo si muove sempre, quindi ogni
   suo fotogramma costringeva a risfocare tutto ciò che ci sta sopra (sul computer quattro carte grandi a ogni fotogramma).
   Al suo posto un fondo quasi pieno, su ogni schermo come sul telefono. Restano lo sfondo delle finestre, il piccolo vetro
   della testata e, sul computer, la barra in alto */
:is(.buybar, .pack, .seg, .chip, .icon-btn, .machine, .toast, .lang-pop, .studio-fab) { backdrop-filter: none; }
.buybar { background: rgb(12 12 12 / .94); }
.pack { background-color: rgb(10 10 10 / .9); }
.seg { background: rgb(16 16 16 / .92); }
.icon-btn { background: rgb(5 5 5 / .9); }
.machine { background: rgb(8 8 8 / .92); }
.studio-fab { background: rgb(10 10 10 / .92); }
@media (hover: none) {
  .nav.is-scrolled { background: rgb(5 5 5 / .92); backdrop-filter: none; }
  /* touch: anche il vetro della testata diventa un fondo quasi pieno. Sopra il video si risfocava a ogni suo fotogramma
     (tre passaggi in più della scheda video per ogni fotogramma della testata) */
  .hero__kicker { backdrop-filter: none; background: rgb(5 5 5 / .62); }
  .hero__chips button { backdrop-filter: none; background: rgb(16 16 16 / .6); }
}

/* telefono: le etichette in maiuscoletto non scendono sotto i 12px (nelle finestre ci pensa il foglio di prenotazione) */
@media (max-width: 699px) {
  :is(.eyebrow, .fine, .chip, .pill, .hero__kicker, .hero__rating, .night__info > span:not(.pill), .night__day small, .reviews__stats span, .rv footer, .machine__head, .machine__idle, .knob, .footer__cols h3, .footer__bottom, .lang-btn, .buybar p span):not(dialog *) { font-size: .75rem; }
  /* un filo meno di spaziatura: a 360px le etichette più lunghe restano su una riga come prima */
  .eyebrow { letter-spacing: .14em; }
  .night__info > span:not(.pill) { letter-spacing: .05em; }
}

/* schermi bassi (iPhone SE con le barre): sottotitolo su due righe, spazi più stretti, le due azioni restano in vista */
@media (max-height: 640px) {
  .hero__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero__act { margin-top: 12px; gap: 10px; }
  .hero__chips button { padding: .55em .9em .6em; }
  .hero__inner { gap: clamp(10px, 2svh, 18px); }
}
/* telefoni bassi in verticale (360×740, barre del browser): il menu stringe un po' gli spazi per entrare tutto */
@media (orientation: portrait) and (max-height: 760px) {
  .menu { gap: 16px; }
  .menu__nav { gap: 10px; }
  .menu ul a { min-height: 44px; font-size: clamp(1.9rem, 9.4vw, 5rem); }
}
/* telefono in orizzontale: solo marchio, titolo e azioni (il resto è subito sotto) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__sub, .hero__chips, .hero__rating, .hero__cue { display: none; }
  .hero { min-height: 100svh; }
  .hero__inner { padding-top: calc(var(--nav-h) + 8px); padding-bottom: calc(16px + var(--safe-b)); }
  /* tema monocromo: logo e titolo a sinistra, le due azioni a destra (il tema estate ha la sua griglia in estate.css) */
  html:not([data-theme]) .hero__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); justify-items: start; text-align: left; }
  html:not([data-theme]) .hero__inner > * { grid-column: 1; }
  html:not([data-theme]) .hero__ctas { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; width: auto; }
  html:not([data-theme]) .hero__title { font-size: min(clamp(2rem, 8.6vw, 4.6rem), 11svh); }
  html:not([data-theme]) .logo--hero { font-size: 19svh; }
  /* menu: due colonne e voci più basse, così entra quasi tutto senza scorrere */
  .menu ul a { min-height: 44px; font-size: clamp(1.6rem, min(10vw, 8svh), 5rem); }
  .menu__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .menu .menu__more { grid-column: 1 / -1; }
  .menu__cta { display: flex; }
}

/* ---------- rifiniture dal collaudo finale ---------- */
html.still { scroll-behavior: auto; }
/* telefono: pavimento di 12px anche per pulsanti, schede dei tipi di pacchetto e chip */
@media (max-width: 699px) {
  .btn { font-size: .75rem; letter-spacing: .1em; }
  .seg button { font-size: .75rem; }
  .seg button small { font-size: .75rem; }
  .hero__chips button, .fmt__when, .chip small, .inc .vip, .buybar p b small { font-size: .75rem; }
}
/* telefoni bassi: il menu stringe gli spazi (se non entra scorre al suo interno); ogni voce resta alta 44px, la misura di
   un dito */
@media (orientation: portrait) and (max-height: 760px) {
  .menu { gap: 10px; padding-top: 8px; padding-bottom: calc(16px + var(--safe-b)); }
  .menu__nav { gap: 6px; }
  .menu ul a { font-size: clamp(1.7rem, 8.6vw, 5rem); }
}
/* bersagli da un dito anche dove la scritta è corta o bassa: "Foto", le lingue, "Area promoter" */
.menu .menu__more a, .menu__langs .chip, .footer__bottom .chip { min-width: 44px; }
.menu [data-studio-open] { min-height: 44px; display: inline-flex; align-items: center; }