/* ============================================================
   VIBRA — foglio di stile principale
   Token: viola nativo #551A8E, notte viola, bianco, accento caldo
   ============================================================ */
/* ---------- I font, dal sito stesso (assets/fonts/, dal 21 ott 2026) ----------
   Gli stessi file di Google Fonts (Unbounded e Manrope variabili, Sora 800; solo alfabeto latino ed esteso), serviti da qui:
   caricati da Google passavano l'indirizzo IP dei visitatori a Google senza consenso (privacy). I preload nei <head> puntano
   a unbounded-latin e manrope-latin: se cambiano i file, cambiare anche lì. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/unbounded-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Font di riserva con le stesse misure dei font veri ----------
   Unbounded e Manrope arrivano con display=swap: per un attimo la pagina usa il font di sistema,
   più stretto (Unbounded è il 30% più largo di Arial), e quando arriva il font vero i titoli vanno a capo in un altro
   punto e la pagina sotto salta (CLS fino a 0,03 su telefono). Qui Arial viene ridimensionato per occupare lo stesso
   spazio: a capo negli stessi punti prima e dopo, niente salto. Misure prese in Chrome sulle frasi del sito. */
@font-face { font-family: "Unbounded Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 130%; ascent-override: 76.9%; descent-override: 19.2%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 132.5%; ascent-override: 75.5%; descent-override: 18.9%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT");
  size-adjust: 103.7%; ascent-override: 103.2%; descent-override: 28.9%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98.3%; ascent-override: 108.9%; descent-override: 30.5%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.2%; ascent-override: 106.8%; descent-override: 29.9%; line-gap-override: 0%; }

:root {
  --viola: #551a8e;            /* colore nativo del brand */
  --viola-chiaro: #9b5cf0;
  --viola-scuro: #2d0d52;
  --notte: #150827;
  --notte-2: #1e0b3a;
  --bianco: #f7f3ff;
  --grigio: #c3b6e0;
  --accento: #ffd166;          /* solo per i badge giorno */
  --superstar: #ff5c8a;        /* rosa del logo Superstar */
  --hiclub: #27e600;           /* verde del logo Hi.Club */
  --font-display: "Unbounded", "Unbounded Fallback", system-ui, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 96px);
  --max: clamp(1280px, 72vw, 1840px);   /* il contenitore cresce sugli schermi grandi (2K, 4K) */
  --frame: min(100vw - 2 * var(--gutter), 1840px);   /* area utile della storia del logo */
  --ease: cubic-bezier(.22, 1, .36, 1);
}
/* scala dei testi su telefono (19 ott 2026, spunto dal template Stride): poche misure, titoli nettamente più grandi del testo.
   La usano tutte le pagine (in home dopo la scena del logo; le pagine interne nel blocco in fondo al file, candidature in lavora.css). */
@media (max-width: 860px) {
  :root {
    --m-display: 2.25rem; /* 36px, frasi grandi (es. "e tu sai da dove nasce tutto?") */
    --m-h2: 1.75rem;      /* 28px, titoli di sezione */
    --m-h3: 1.25rem;      /* 20px, titoli di scheda */
    --m-body: 1rem;       /* 16px, testo */
    --m-small: .875rem;   /* 14px, testo secondario */
    --m-label: .75rem;    /* 12px, etichette maiuscole */
    --m-track: -.035em;   /* Unbounded è larghissimo: sui titoli un filo più stretto, più parole per riga */
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* barra di scorrimento sempre presente: la pagina non scatta di lato
   quando il contenuto caricato dopo (es. i prodotti dello shop) la rende scorrevole.
   (scrollbar-gutter sulla radice Chrome lo ignora). overflow-x sta qui e non sul body */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; font-size: 16px; overflow-x: hidden; overflow-y: scroll; }
/* scala adattiva: da 1600px in su testi, bottoni e spaziature in rem crescono con lo schermo (2048px ≈ 17px, 2560px ≈ 18,4px) */
@media (min-width: 1600px) { html { font-size: calc(16px + (100vw - 1600px) * .0025); } }
html.lenis, html.lenis body { height: auto; }
/* testo solo per Google e lettori di schermo (es. il titolo della home, dove a schermo c'è il logo 3D) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--notte);
  color: var(--bianco);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--viola-chiaro); color: var(--notte); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.6rem, 8vw, 7rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
p { margin: 0; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--grigio); max-width: 36ch; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Sfondo: viola che respira ---------- */
.aura {
  /* un'unica luce di palco dall'alto sul viola notte del brand: niente aloni sparsi */
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  bottom: auto; height: 100lvh;   /* alto quanto lo schermo SENZA la barra del browser: sul telefono, quando la barra sparisce, sotto restava una fascia del colore di fondo */
  background:
    radial-gradient(38% 62% at 50% -8%, rgba(160,100,240,.24), rgba(110,45,190,.09) 55%, transparent 75%),
    #12071f;
}
/* trama: le barre dell'equalizzatore del logo, giganti e appena visibili sul fondo */
.aura::before {
  content: ""; position: absolute; inset: 0; opacity: .011;
  background: url("../img/barre.svg") 50% 100% / 150vw auto no-repeat;
}
/* grana di pellicola, ferma (nessun costo durante lo scroll) */
.aura::after {
  content: ""; position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ---------- Navigazione ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), padding .4s;
}
/* sfondo a sfumatura che compare dopo i primi pixel di scroll */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(21,8,39,.92) 35%, rgba(21,8,39,0)); transition: opacity .4s;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-120%); }
.nav__logo { display: block; line-height: 0; }
.nav__logo img, .nav__mark { height: 42px; width: auto; }
.nav__mark { aspect-ratio: 1034 / 530; display: block; overflow: visible; }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 4px; }
.nav__links li { display: flex; }
.nav__links a {
  display: block; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--grigio);
  transition: color .3s, background .3s;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--bianco); background: rgba(255,255,255,.08); }
/* "Lavora con noi": magnetico (main.js) con alone che si accende al passaggio */
.nav__links a.cta {
  /* il link condivide la classe .cta col riquadro finale della home: ne annullo overflow e alone */
  position: relative; isolation: isolate; overflow: visible; margin-left: 2px; color: var(--notte); background: var(--bianco);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .3s;
}
.nav__links a.cta::before {
  content: ""; position: absolute; inset: -2px; height: auto; border-radius: inherit; z-index: -1;
  background: linear-gradient(110deg, var(--viola-chiaro), #fff 50%, var(--viola-chiaro)); opacity: 0; filter: blur(14px); transition: opacity .5s;
}
.nav__links a.cta:hover { background: #fff; }
.nav__links a.cta:hover::before { opacity: .85; }
@media (min-width: 961px) {
  /* link raccolti in una pillola sfocata */
  .nav__links {
    background: rgba(21,8,39,.55); border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  }
}
/* icona del menu (telefono): tre barre dell'equalizzatore del logo; al tocco ballano e diventano la X */
.nav__burger { display: none; position: relative; width: 44px; height: 44px; border: 0; background: transparent; color: var(--bianco); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav__burger span { position: absolute; left: 50%; top: 50%; width: 4px; height: 24px; margin: -12px 0 0 -2px; border-radius: 3px; background: currentColor;
  transition: transform .45s var(--ease), opacity .25s; }
.nav__burger span:nth-child(1) { transform: translateX(-7px) scaleY(.5); }
.nav__burger span:nth-child(2) { transform: scaleY(.9); }
.nav__burger span:nth-child(3) { transform: translateX(7px) scaleY(.62); }
.nav__burger.is-beat span { animation: nav-beat .42s var(--ease); }
.nav__burger.is-beat span:nth-child(2) { animation-delay: .05s; }
.nav__burger.is-beat span:nth-child(3) { animation-delay: .1s; }
@keyframes nav-beat { 40% { scale: 1 1.35; } }
.nav__links .nav__social { display: none; }   /* solo nel menu del telefono */

@media (max-width: 960px) {
  .nav__logo, .nav__burger { position: relative; z-index: 2; }
  .nav__burger { display: block; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { transform: scaleY(0); opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: rotate(-45deg); }
  /* il menu aperto: a tutto schermo, voci grandi a sinistra che salgono una alla volta; barre del logo appena accennate sul fondo */
  .nav__links { position: fixed; inset: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 96px var(--gutter) max(24px, env(safe-area-inset-bottom));
    background: var(--notte); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s .35s; }
  .nav__links::before { content: ""; position: absolute; inset: auto 0 0; height: 62%; pointer-events: none; opacity: .045;
    background: var(--viola-chiaro); -webkit-mask: url("../img/barre.svg") 50% 100% / 170% auto no-repeat; mask: url("../img/barre.svg") 50% 100% / 170% auto no-repeat; }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
  .nav__links li { position: relative; display: block; opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .5s var(--ease); }
  .nav.is-open .nav__links li { opacity: 1; transform: none; }
  .nav.is-open .nav__links li:nth-child(1) { transition-delay: .06s; } .nav.is-open .nav__links li:nth-child(2) { transition-delay: .1s; }
  .nav.is-open .nav__links li:nth-child(3) { transition-delay: .14s; } .nav.is-open .nav__links li:nth-child(4) { transition-delay: .18s; }
  .nav.is-open .nav__links li:nth-child(5) { transition-delay: .22s; } .nav.is-open .nav__links li:nth-child(6) { transition-delay: .3s; }
  .nav.is-open .nav__links li:nth-child(7) { transition-delay: .34s; }
  /* voci con la scala dei testi del telefono (--m-*, 19 ott 2026): prima ~29px, troppo grandi */
  .nav__links a { padding: 15px 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: none;
    font: 800 var(--m-h3, 1.25rem)/1.1 var(--font-display); letter-spacing: var(--m-track, -.035em); color: var(--bianco); }
  .nav__links a:hover, .nav__links a[aria-current="page"] { background: none; color: var(--viola-chiaro); }
  /* "Lavora con noi" subito sotto le voci (prima era in fondo allo schermo); le icone social restano in fondo */
  .nav__links li:has(.cta) { margin-top: 0; padding-top: 28px; }
  .nav__links a.cta { margin: 0; padding: .8rem 1.4rem; border: 0; border-radius: 999px; text-align: center; font: 700 var(--m-body, 1rem)/1.3 var(--font-body); letter-spacing: 0; color: var(--notte); background: var(--bianco); }
  .nav__links a.cta[aria-current="page"] { color: var(--notte); }
  .nav__social { display: flex !important; justify-content: center; gap: 14px; margin-top: auto; padding-top: 24px; }
  .nav__social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
    background: rgba(255,255,255,.04); color: var(--bianco); }   /* come i bottoni del dock */
  .nav__social svg { width: 20px; height: 20px; fill: currentColor; }
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 1rem 1.625rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; border: 0; cursor: pointer;
  background: var(--bianco); color: var(--notte);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(155,92,240,.6); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--bianco); border: 1px solid rgba(255,255,255,.16); }
.btn--ghost:hover { background: rgba(255,255,255,.1); box-shadow: none; }
.btn--small { padding: .75rem 1.25rem; font-size: .95rem; }

/* icone ufficiali dei social (Instagram col suo gradiente, TikTok con gli sfasamenti ciano/rosso) */
.ico { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.ico--tt { color: var(--notte); }
.btn--ghost .ico--tt, .social__handle .ico--tt, .contact__ico .ico--tt { color: #fff; }
.btn--icon { padding: .75rem 1.5rem; }
.btn--icon .ico { width: 1.625rem; height: 1.625rem; transition: transform .35s var(--ease); }
.btn--icon:hover .ico { transform: scale(1.12) rotate(-6deg); }

/* ============================================================
   HERO + STORIA: il logo che si scompone
   ============================================================ */
.dis { position: relative; }
/* alta quanto lo schermo SENZA la barra del browser: quando il telefono la nasconde scorrendo, sotto non resta una fascia scura.
   --barra = altezza della barra: i testi ancorati in basso salgono di tanto, così con la barra visibile non ci finiscono sotto. */
.dis__pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; --barra: calc(100lvh - 100svh); }
.dis__track { height: 520svh; }           /* lunghezza della storia: 6 passi */

.dis__intro {
  /* stesse misure che logo3d.js (resize) calcola in px: logo largo il 60% dello schermo (limitato dall'altezza),
     video = logo / 0,805, centro spostato di 0,49% / 0,02%. Così quando lo script le applica non si muove nulla. */
  position: absolute; left: 50%; top: 50%; width: min(74.53%, 124.73svh); aspect-ratio: 1; transform: translate(-50.49%, -49.98%);
  object-fit: contain; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  max-width: none;   /* su telefono il video è più largo dello schermo (il logo ne occupa l'80%): col limite generale il suo logo veniva più piccolo di quello 3D */
}
.dis__intro.is-wait { opacity: 0; }   /* gira invisibile finché il logo 3D non è pronto (main.js) */
.dis__intro.is-done { opacity: 0; visibility: hidden; transition: opacity .45s ease-out, visibility 0s .45s; }
/* Safari e iPhone (intro-webkit.js): il video fa da sorgente invisibile, si vede il canvas che ne toglie il nero */
.dis__intro--src { opacity: 0 !important; }
.dis__intro--gl { mix-blend-mode: normal; }

.dis__stage { position: absolute; inset: 0; display: grid; place-items: center; }
.dis__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.dis__canvas.is-ready.is-shown { opacity: 1; }
.dis__fallback { position: absolute; left: 50%; top: 50%; width: min(74vw, 860px); transform: translate(-50%, -54%); display: none; }
.dis__fallback.is-on { display: block; }

.dis__tag {
  position: absolute; left: 50%; top: calc(var(--logo-bottom, 68%) + 28px); transform: translateX(-50%);
  text-align: center; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--grigio); width: max-content; max-width: 90vw;
}
.dis__tag strong { color: var(--bianco); }

.dis__info {
  /* centrato senza transform: la transform la usa GSAP per l'entrata, e la sovrascriverebbe */
  position: absolute; top: 0; bottom: 0; height: max-content; margin-block: auto;
  width: calc(var(--frame) * .4); display: grid; gap: clamp(12px, min(1.2vw, 2svh), 28px); opacity: 0; z-index: 2;
  /* trasparenti ma già disegnati (niente visibility: hidden): prima il telefono li disegnava nell'istante in cui entravano e quel
     fotogramma scattava. Si cliccano solo quando sono in scena (.is-on, main.js) */
  pointer-events: none; will-change: opacity, transform;
}
.dis__info.is-on { pointer-events: auto; }
.dis__info--left { left: calc((100vw - var(--frame)) / 2); }
.dis__info--right { right: calc((100vw - var(--frame)) / 2); }
.dis__info h2 { font-size: clamp(1.5rem, min(2.9vw, 5.4svh), 4.6rem); }
.dis__info p { color: var(--grigio); font-size: clamp(1rem, min(1.2vw, 2.3svh), 1.7rem); max-width: 40ch; }
.dis__kicker { font-family: var(--font-display); font-size: .95rem; letter-spacing: .08em; color: var(--accento); }
.dis__brand { height: clamp(44px, min(5.6vw, 9svh), 150px); width: auto; max-width: 100%; }
.dis__brand--invert { filter: invert(1) brightness(1.6); }
.dis__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dis__info .btn { width: max-content; }

.dis__final {
  position: absolute; left: 50%; top: calc(var(--logo-bottom, 68%) + 28px); transform: translateX(-50%);
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; visibility: hidden;
}

.dis__progress { position: absolute; right: calc(var(--gutter) * .5); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 4; }
.dis__progress i { width: 4px; height: 1.625rem; border-radius: 4px; background: rgba(255,255,255,.14); transition: background .3s, transform .3s; }
.dis__progress i.is-on { background: var(--bianco); transform: scaleX(1.6); }
.dis__hint { position: absolute; left: 50%; bottom: calc(22px + var(--barra, 0px)); transform: translateX(-50%); font-size: .8rem; color: var(--grigio); opacity: .8; transition: opacity .4s; }
.dis.is-moving .dis__hint { opacity: 0; }

@media (max-width: 860px) {
  .dis__intro { top: 38%; width: min(104.35%, 84.82svh); }
  .dis__fallback { width: 88vw; top: 38%; transform: translate(-50%, -50%); }
  /* sotto il logo, come su desktop: la riserva è la stessa misura che logo3d.js calcola (centro al 38%, logo largo l'84%), così non salta */
  .dis__tag { font-size: 1.05rem; top: calc(var(--logo-bottom, 38% + 20.92vw) + 28px); }
  .dis__final { top: calc(var(--logo-bottom, 38% + 20.92vw) + 36px); }
  .dis__info, .dis__info--left, .dis__info--right {
    left: var(--gutter); right: var(--gutter); top: auto; margin-block: 0; transform: none; width: auto; gap: 10px;
    /* al 20% dal fondo; sugli schermi bassi (sotto 800px, es. iPhone con le barre di Safari) più giù: i pannelli lunghi crescono verso l'alto e toccavano il logo */
    bottom: calc(min(20vh, 20vh - (800px - 100vh) * .5) + var(--barra, 0px));
  }
  .dis__info h2 { font-size: 1.35rem; }
  .dis__info p { font-size: .98rem; }
  .dis__brand { height: 40px; }
  .dis__progress { right: 10px; }
  .dis__track { height: 520svh; }
}

/* ============================================================
   SERATE: tre card, ognuna col colore del suo logo
   ============================================================ */
.nights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1200px; }
.social { perspective: 1200px; }
[data-3d] { will-change: transform, opacity; }

/* Ogni serata è un biglietto stampato: inchiostro pieno, grana di stampa, l'equalizzatore del logo che suona piano
   (assets/js/nights.js), matrice con perforazione e due intagli. Niente sfumature. */
.night {
  --paper: #1c0a1a; --ink: var(--superstar); --line: rgba(255,255,255,.16); --stub: 64px;
  position: relative; isolation: isolate; aspect-ratio: 4 / 5; min-height: 380px; overflow: hidden; border-radius: 6px;
  display: grid; grid-template-rows: auto 1fr var(--stub); color: var(--bianco); background: var(--paper);
  /* intagli del biglietto all'altezza della perforazione */
  -webkit-mask: radial-gradient(circle 8px at 0 calc(100% - var(--stub)), #0000 7.5px, #000 8px) left / 51% 100% no-repeat,
                radial-gradient(circle 8px at 100% calc(100% - var(--stub)), #0000 7.5px, #000 8px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 8px at 0 calc(100% - var(--stub)), #0000 7.5px, #000 8px) left / 51% 100% no-repeat,
                radial-gradient(circle 8px at 100% calc(100% - var(--stub)), #0000 7.5px, #000 8px) right / 51% 100% no-repeat;
}
.night--hiclub { --paper: #08160c; --ink: var(--hiclub); }
.night--chapeau { --paper: #5E0121; --ink: #EEEED2; --line: rgba(238,238,210,.28); }
/* grana di stampa sopra a tutto */
.night::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' 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(%23g)'/%3E%3C/svg%3E");
}

.night__head {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 14px;
  padding: 20px 22px 18px; border-bottom: 1px solid var(--line);
}
.night__dayname { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 1.9vw, 2rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.night__where { font-size: .72rem; font-weight: 700; line-height: 1.25; text-align: right; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.72); padding-top: .2em; }

.night__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.4vw, 34px); padding: 18px 22px 0; }
.night__print { position: relative; display: block; width: 80%; height: clamp(90px, 9vw, 130px); margin: auto 0; }
/* equalizzatore: barre vere del logo, appoggiate sulla perforazione; scendono e risalgono dalla base */
.night__eq { position: relative; display: block; width: 100%; aspect-ratio: 944 / 177; overflow: hidden; flex: none; }
.night__eq span { position: absolute; top: 0; bottom: 0; }
.night__eq b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); border-radius: 999px 999px 0 0;
  opacity: .9; animation: eq 1.2s cubic-bezier(.45, 0, .55, 1) infinite alternate paused; will-change: transform; }
.night__eq i { position: absolute; left: 0; right: 0; background: var(--ink); border-radius: 999px; }
.night.is-playing .night__eq b { animation-play-state: running; }
.night.is-playing.is-moving .night__eq b { animation-play-state: paused; }   /* ferme finché il biglietto entra ruotando (main.js, [data-3d]) */
@keyframes eq { from { transform: translateY(0); } to { transform: translateY(var(--a, 40%)); } }
@media (prefers-reduced-motion: reduce) { .night__eq b { animation: none; } }
.night__logo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.night__logo--invert { filter: invert(1) brightness(1.6); }

.night__stub {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 22px; background: var(--paper);
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  /* perforazione */
  background-image: linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  background-size: 12px 1px; background-repeat: repeat-x; background-position: 0 0;
}
.night__stub > span:first-child { color: rgba(255,255,255,.72); }
.night__time { color: var(--bianco); font-family: var(--font-display); font-size: .85rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.night:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 860px) { .nights__grid { grid-template-columns: 1fr; } .night { aspect-ratio: auto; min-height: 360px; } }
/* Telefono (22 ott 2026): Safari su iPhone a volte lasciava il biglietto disegnato a metà mentre scorreva (ritaglio con maschera
   + grana in fusione "overlay" sopra 35 barre animate, dentro un elemento che entra in 3D). Qui niente maschera né fusione:
   gli intagli sono due cerchi del colore del fondo, la grana è stesa normalmente, con la stessa resa */
@media (max-width: 860px) {
  .night { -webkit-mask: none; mask: none; }
  .night::before {
    content: ""; position: absolute; left: -8px; right: -8px; bottom: calc(var(--stub) - 8px); height: 16px; z-index: 4; pointer-events: none;
    background: radial-gradient(circle 8px at 8px 50%, #12071f 7.5px, transparent 8px), radial-gradient(circle 8px at calc(100% - 8px) 50%, #12071f 7.5px, transparent 8px);
  }
  .night::after { mix-blend-mode: normal; opacity: .05; }
}

/* ---------- SEZIONI GENERICHE ---------- */
.section { padding: clamp(80px, 12vw, 150px) 0; }
.home .section { padding: clamp(56px, 7vw, 110px) 0; }   /* home: niente schermi vuoti tra una sezione e l'altra */
.home .nights { padding-bottom: clamp(24px, 3vw, 48px); }
.home .band { padding-bottom: clamp(80px, 12vw, 150px); }   /* le barre video in fondo alla fascia restano sotto il bottone, come prima */
.home .band + .section { padding-top: clamp(32px, 4vw, 64px); }
/* fra la scheda TikTok e "Tre proposte settimanali" c'era troppo vuoto (~190px su telefono, ~230 su computer: i due padding
   più lo spostamento della sezione che entra inclinata). Qui i due padding si accorciano */
.home .section:has(> .wrap > .social) { padding-bottom: clamp(16px, 3vw, 48px); }
.home .nights { padding-top: clamp(24px, 4vw, 60px); }
/* dopo la storia del logo i social salgono sulla metà bassa (vuota) dello schermo fissato */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .home .dis + .section { margin-top: -20svh; position: relative; } }
/* su telefono i pulsanti finali finiscono a circa due terzi dello schermo: sotto restava un terzo vuoto */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) { .home .dis + .section { margin-top: -30svh; position: relative; } }
.section__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.section__head p { max-width: 44ch; color: var(--grigio); font-size: 1.1rem; justify-self: end; }
@media (max-width: 860px) { .section__head { grid-template-columns: 1fr; } .section__head p { justify-self: start; } }

/* fascia con le barre in loop dietro */
.band { position: relative; overflow: hidden; background: linear-gradient(180deg, transparent, rgba(85,26,142,.35) 50%, transparent); }
.band__video { position: absolute; left: 50%; bottom: -4%; width: min(140vw, 1600px); transform: translateX(-50%); opacity: .35; mix-blend-mode: screen; pointer-events: none; }
.band .wrap { position: relative; }
.band--soft .band__video { opacity: .2; }   /* home: le barre restano ma non coprono il testo */

/* "Perché Vibra" */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.why__big { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.why__big em { font-style: normal; color: var(--viola-chiaro); }
.why__text { display: grid; gap: 18px; color: var(--grigio); font-size: 1.1rem; max-width: 46ch; }
.why__text strong { color: var(--bianco); }
.why__text .btn { width: max-content; }
/* bottone con alone viola come "Lavora con noi" in alto: bianco, alone che si accende al passaggio, magnetico (main.js .btn--mag) */
.btn--glow { position: relative; isolation: isolate; overflow: visible; transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .3s; }
.btn--glow::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: linear-gradient(110deg, var(--viola-chiaro), #fff 50%, var(--viola-chiaro)); opacity: 0; filter: blur(14px); transition: opacity .5s; }
.btn--glow:hover { box-shadow: none; }
.btn--glow:hover::before { opacity: .85; }
/* home: titolo più compatto, testo leggibile e la frase-regola in evidenza */
.why--home { grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.why--home .why__big { font-size: clamp(2.2rem, 4.7vw, 4.4rem); line-height: 1.03; max-width: 13ch; }
.why--home .why__text { gap: 22px; font-size: 1.15rem; line-height: 1.6; max-width: 50ch; }
.why--home .why__text p:first-child { color: var(--bianco); font-size: 1.3rem; line-height: 1.5; }
@media (max-width: 860px) { .why--home .why__big { max-width: none; } }
/* "e tu sai da dove nasce tutto?" su telefono, con la scala --m-*: frase a 36px, i due paragrafi a 16px (prima 20,8 e 18,4), spazi più stretti */
@media (max-width: 860px) {
  .home .why--home { gap: 20px; }
  .home .why--home .why__big { font-size: var(--m-display); line-height: 1.02; letter-spacing: var(--m-track); }
  .home .why--home .why__text { gap: 14px; font-size: var(--m-body); line-height: 1.55; }
  .home .why--home .why__text p:first-child { font-size: var(--m-body); line-height: 1.55; }
  .home .why--home .why__text p { text-wrap: pretty; }
  .home .why--home .why__text .btn { margin-top: 8px; }
}

/* ---------- Home: la prossima serata, sotto i biglietti ---------- */
.nn {
  margin-top: 20px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  display: grid; grid-template-columns: 1.2fr auto auto; gap: clamp(20px, 3vw, 48px); align-items: center;
}
.nn__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; }
.nn__count-txt { display: block; color: var(--viola-chiaro); margin-top: .2em; }
.nn__meta { margin-top: 10px; color: var(--grigio); }
.nn__controls { display: grid; gap: 14px; justify-items: start; }
.nn__pick { display: flex; flex-wrap: wrap; gap: 8px; }
.nn__pick button, .nn__stepper button {
  font: 700 .95rem/1 var(--font-body); color: var(--bianco); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; min-height: 44px; padding: 0 18px; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease);
}
.nn__pick button:hover, .nn__stepper button:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.nn__pick button[aria-pressed="true"] { background: var(--bianco); color: var(--notte); border-color: var(--bianco); }
.nn__count { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.nn__stepper { display: inline-flex; align-items: center; gap: 6px; }
.nn__stepper button { width: 44px; padding: 0; font-size: 1.2rem; }
.nn__stepper output { min-width: 2.2ch; text-align: center; font: 800 1.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.nn__wa { justify-self: end; white-space: nowrap; }
@media (max-width: 1100px) { .nn { grid-template-columns: 1fr auto; } .nn__wa { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 860px) { .nn { grid-template-columns: 1fr; } .nn__wa { width: 100%; justify-content: center; } }
/* "Le serate" su telefono con la scala --m-*: titolo e testo vicini (prima 40px di vuoto fra i due), testo a 16px, etichette dei biglietti a 12px */
@media (max-width: 860px) {
  .nights .section__head { gap: 14px; margin-bottom: 32px; }
  .nights .section__head h2 { font-size: var(--m-h2); line-height: 1.05; letter-spacing: var(--m-track); }
  .nights .section__head p { font-size: var(--m-body); line-height: 1.5; text-wrap: pretty; }   /* niente parola sola sull'ultima riga */
  .nights .night__dayname { font-size: var(--m-h3); }
  .nights .night__where, .nights .night__stub > span:first-child { font-size: var(--m-label); }
  .nights .night__time { font-size: var(--m-small); }
  .nights .nn__title { font-size: var(--m-h3); line-height: 1.15; letter-spacing: var(--m-track); }
  .nights .nn__meta { margin-top: 8px; font-size: var(--m-small); line-height: 1.45; text-wrap: balance; }
  .nights .nn__count { font-size: var(--m-body); }
}
@media (max-width: 860px) { .why { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- SOCIAL ---------- */
.social { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.social__card { border-radius: 24px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); overflow: hidden; display: flex; flex-direction: column; }
.social__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.social__handle { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.social__handle img { width: 40px; height: 40px; border-radius: 12px; }
.social__handle small { display: block; color: var(--grigio); font-weight: 500; font-size: .85rem; margin-top: 4px; }
.social__handle small .ico { width: 18px; height: 18px; }
.social__top a { font-size: .9rem; font-weight: 700; color: var(--viola-chiaro); }
.social__embed { flex: 1; min-height: 520px; background: #000; position: relative; }
.social__embed iframe { width: 100%; height: 100%; min-height: 520px; border: 0; display: block; }
.social__embed blockquote { margin: 0; }
/* Instagram e TikTok fermi come una pagina stampata (22 ott 2026): il riquadro di Instagram non si tocca (il dito scorre la pagina,
   non il riquadro) e un tocco apre il profilo; la griglia di TikTok non scorre dentro la scheda */
.social__embed iframe { pointer-events: none; }
.social__open { position: absolute; inset: 0; z-index: 1; }
@media (max-width: 860px) { .social { grid-template-columns: 1fr; } }

/* ---------- CTA finale ---------- */
.cta {
  position: relative; border-radius: 32px; overflow: hidden; padding: clamp(48px, 8vw, 96px); text-align: center;
  background: linear-gradient(160deg, var(--viola) 0%, var(--viola-scuro) 100%);
}
.cta::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
.cta__logo { position: relative; width: min(60%, 360px); margin: 0 auto 28px; opacity: .95; }
.cta h2 { position: relative; margin-bottom: 16px; }
.cta p { position: relative; color: rgba(255,255,255,.82); max-width: 48ch; margin-inline: auto; font-size: 1.1rem; }
.cta .btn { position: relative; margin-top: 32px; }
/* "Ti piace il nostro mondo?" su telefono, con la scala --m-*: meno margine interno (48px per lato stringevano il titolo su 3 righe),
   titolo a 28px, testo a 16px, spazi più corti. Solo il riquadro della home (div.cta), non il link "Lavora con noi" del menu che ha la stessa classe */
@media (max-width: 860px) {
  main div.cta { padding: 40px 22px; border-radius: 26px; }   /* anche il riquadro finale di Chi siamo (#wearevibra) */
  main div.cta .cta__logo { margin-bottom: 20px; }
  main div.cta h2 { margin-bottom: 12px; font-size: var(--m-h2); line-height: 1.05; letter-spacing: var(--m-track); text-wrap: balance; }
  main div.cta p { font-size: var(--m-body); line-height: 1.5; text-wrap: balance; }
  main div.cta .btn { margin-top: 24px; }
}

/* ---------- FOOTER ---------- */
.footer { padding: 56px 0 32px; border-top: 1px solid rgba(255,255,255,.08); color: var(--grigio); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
.footer__grid b { display: block; color: var(--bianco); margin-bottom: 12px; font-family: var(--font-display); font-size: .85rem; }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__grid a:hover { color: var(--bianco); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; font-size: .85rem; }
/* telefono: compatto. Marchio su una riga (logo + frase), sotto Pagine e Social affiancate */
@media (max-width: 700px) {
  .footer { padding: 36px 0 24px; font-size: .88rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer__grid > :first-child { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }   /* #wearevibra sotto il logo, come su computer */
  .footer__grid > :first-child img { height: 40px !important; margin-bottom: 0 !important; flex: none; }   /* l'altezza del logo è scritta nell'HTML */
  .footer__grid > :first-child p { font-size: .82rem; line-height: 1.4; }
  .footer__grid b { margin-bottom: 8px; font-size: .78rem; }
  .footer__grid ul { gap: 6px; }
  .footer__bottom { flex-direction: column; gap: 4px; margin-top: 26px; padding-right: 64px; font-size: .74rem; }   /* a destra c'è il tasto WhatsApp fisso */
}

/* ---------- PAGINE INTERNE ---------- */
.page-hero { padding: clamp(120px, 14vh, 170px) 0 clamp(32px, 5vh, 56px); }
.page-hero h1 { font-size: clamp(2.2rem, min(5vw, 8vh), 4.4rem); max-width: 18ch; }
.page-hero .lead { margin-top: 18px; }
.page-hero:not(.page-hero--row) .lead { max-width: 60ch; }   /* aperture semplici (Contatti, Ordine ricevuto): a 36ch "qui" andava a capo da solo */
/* variante compatta (Le serate): titolo e testo affiancati, così le card stanno nella prima schermata */
.page-hero--row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 48px; align-items: end; padding-bottom: clamp(24px, 4vh, 44px); }
.page-hero--row h1 { font-size: clamp(2rem, min(3.6vw, 6.4vh), 3.6rem); max-width: 20ch; }
.page-hero--row .lead { margin-top: 0; justify-self: end; }
@media (max-width: 860px) { .page-hero--row { grid-template-columns: 1fr; } .page-hero--row .lead { justify-self: start; } }
/* Le serate: titolo "Napoli [equalizzatore con foto] balla" (componente in eq-window.css) */
.page-hero--eq { grid-template-columns: auto 1fr; }
.page-hero__title { display: grid; gap: clamp(10px, 1.4vw, 18px); }
.page-hero--eq h1 { font-size: clamp(2.4rem, min(5.6vw, 10vh), 6.4rem); max-width: none; white-space: nowrap; letter-spacing: -.04em; line-height: 1; }
.page-hero--eq .lead { justify-self: end; }
.page-hero__claim { font: 700 clamp(1.1rem, 1.8vw, 1.7rem)/1.25 var(--font-display); color: var(--bianco); letter-spacing: -.01em; }
@media (max-width: 860px) {
  .page-hero--eq { grid-template-columns: 1fr; }
  .page-hero--eq h1 { font-size: clamp(2rem, 9.6vw, 4rem); }
  .page-hero--eq .lead { justify-self: start; }
}

.timeline { display: grid; gap: 0; max-width: 820px; }
.timeline__item { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.1); }
.timeline__year { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--viola-chiaro); }
.timeline__item h3 { margin-bottom: 10px; }
.timeline__item p { color: var(--grigio); max-width: 56ch; }
@media (max-width: 600px) { .timeline__item { grid-template-columns: 1fr; gap: 8px; } }

/* le tre serate affiancate: tutte visibili alla prima schermata, entrano insieme all'apertura */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.4vw, 28px); }
/* ogni serata: il biglietto (lo stesso della home) e sotto i dettagli, senza card attorno */
/* le ancore delle serate (ricerca, link) arrivano sotto la barra in alto, non dietro */
.project { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 96px; }
#eventi { scroll-margin-top: 72px; }
.project__body { flex: 1; padding: clamp(18px, 1.6vw, 26px) 4px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.project__body h2 { font-size: clamp(1.25rem, 1.6vw, 1.75rem); }
.project__body p { color: var(--grigio); font-size: .98rem; }
.project__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; font-size: .88rem; color: var(--grigio); margin-top: auto; padding-top: 6px; }
.project__meta b { color: var(--bianco); display: block; font-family: var(--font-display); font-size: .72rem; }
.project__body .btn { margin-top: auto; }
@media (max-width: 1100px) { .project__meta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .projects { grid-template-columns: 1fr; } }

/* eventi speciali: due card-link */
.event-card { padding: clamp(26px, 3vw, 40px); gap: 14px; justify-content: space-between; min-height: 240px; color: inherit; text-decoration: none; transition: border-color .25s, background .25s; }
.event-card:hover, .event-card:focus-visible { border-color: var(--viola-chiaro); background: rgba(155,92,240,.09); }
.event-card__kicker { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--viola-chiaro); }
.event-card__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; max-width: 18ch; }
.event-card__go { font-weight: 700; color: var(--bianco); }
.event-card__go span { display: inline-block; color: var(--viola-chiaro); transition: transform .25s; }
.event-card:hover .event-card__go span { transform: translateX(4px); }

/* ---------- FORM ---------- */
.form { display: grid; gap: 20px; max-width: 720px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-weight: 700; font-size: .95rem; }
.field small { color: var(--grigio); font-size: .85rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: var(--bianco); font: inherit; transition: border-color .25s, background .25s;
}
.field select option { color: #000; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--viola-chiaro); background: rgba(155,92,240,.08); }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { color: var(--grigio); font-size: .9rem; }
.form__ok { display: none; padding: 20px 24px; border-radius: 16px; background: rgba(155,92,240,.15); border: 1px solid rgba(155,92,240,.4); }
.form.is-sent .form__ok { display: block; }
.form.is-sent fieldset { display: none; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
/* campo nascosto da una scelta (main.js, data-mostra): .field è grid e vincerebbe sull'attributo hidden; la riga resta piena */
.field[hidden] { display: none; }
.form__row:has(> .field[hidden]) { grid-template-columns: 1fr; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact__list { display: grid; gap: 28px; align-content: start; }
.contact__list b { display: block; font-family: var(--font-display); font-size: .8rem; color: var(--viola-chiaro); margin-bottom: 8px; }
.contact__list a { font-size: 1.25rem; font-weight: 700; }
.contact__list b.contact__ico .ico { width: 22px; height: 22px; }
.contact__list a:hover { color: var(--viola-chiaro); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Entrata all'apertura: il corpo centrale delle pagine interne è pronto subito ----------
   stessa idea delle card (salita in prospettiva), ma parte da sola al caricamento e in sequenza (--i) */
[data-intro] { transform-origin: 50% 100%; animation: intro 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
@keyframes intro {
  from { opacity: 0; transform: perspective(1200px) translate3d(0, 110px, -180px) rotateX(34deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reveal (una sola regia per sezione) ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .dis__pin { position: static; height: auto; padding: 140px 0 60px; }
  .dis__track { display: none; }
  .dis__intro { display: none; }
  .dis__canvas { display: none; }
  .dis__fallback { display: block; position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
  .dis__stage { position: relative; display: grid; gap: 32px; padding: 0 var(--gutter); }
  .dis__tag, .dis__final { position: relative; left: auto; top: auto; transform: none; margin-top: 24px; }
  .dis__info { position: relative; left: auto; right: auto; top: auto; transform: none; opacity: 1; visibility: visible; width: auto; max-width: 560px; }
  .dis__final { opacity: 1; visibility: visible; }
  .dis__progress, .dis__hint { display: none; }
  .band__video { display: none; }
}

/* ---------- Social sempre a portata: dock fisso ---------- */
.dock { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.dock a, .dock button {
  width: 3.125rem; height: 3.125rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(21,8,39,.7); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--bianco); transition: transform .3s var(--ease), background .25s, border-color .25s;
}
.dock a:hover, .dock button:hover { transform: translateY(-3px); background: var(--viola); border-color: var(--viola-chiaro); }
.dock svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.dock button { padding: 0; cursor: pointer; font: inherit; }
.dock__nn[aria-expanded="true"] { background: var(--viola); border-color: var(--viola-chiaro); }
/* la prossima serata a comparsa (home): si apre dal pallino in cima al dock, accanto al dock */
.nn-pop {
  --dock-r: 18px; --dock-w: 3.125rem;
  position: fixed; z-index: 41; right: calc(var(--dock-r) + var(--dock-w) + 12px); bottom: var(--dock-r);
  width: min(400px, calc(100vw - var(--dock-r) - var(--dock-w) - 12px - 12px)); max-height: calc(100svh - 2 * var(--dock-r)); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px; background: #1a0b2e; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(85,26,142,.35);
  will-change: transform, opacity;
}
.nn-pop[hidden] { display: none; }
.nn-pop:focus { outline: none; }
.nn-pop .nn { margin: 0; border: 0; background: none; grid-template-columns: 1fr; gap: 20px; padding: 24px 22px 22px; }
.nn-pop .nn__title { padding-right: 34px; }
.nn-pop .nn__wa { grid-column: auto; width: 100%; justify-content: center; justify-self: stretch; }
.nn-pop__x { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--bianco); transition: background .25s; }
.nn-pop__x:hover { background: rgba(255,255,255,.14); }
.nn-pop__x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
@media (max-width: 860px) { .nn-pop { --dock-r: 12px; --dock-w: 44px; } .nn-pop .nn { padding: 20px 18px 18px; } }
@media (max-width: 860px) { .dock { right: 12px; bottom: 12px; } .dock a, .dock button { width: 44px; height: 44px; } }
/* altezza fissa: quando Instagram e TikTok finiscono di caricare non spostano la pagina */
.social__embed { flex: none; height: 620px; min-height: 0; overflow: hidden; contain: layout paint; }
.social__embed iframe { height: 620px; min-height: 0; }
/* su telefono i due riquadri a metà altezza: a 620px ognuno riempiva lo schermo. Dentro si scorre come prima */
@media (max-width: 860px) { .social__embed, .social__embed iframe { height: 310px; } }
/* "Dai nostri social" in home su telefono, con la scala --m-* (come "Le serate"): titolo e testo vicini, testo a 16px;
   nella testata delle schede nome a 14px e logo più piccolo, così "Apri il profilo ↗" sta su una riga (su TikTok la freccia andava a capo da sola) */
@media (max-width: 860px) {
  .home .section:has(> .wrap > .social) .section__head { gap: 14px; margin-bottom: 32px; }
  .home .section:has(> .wrap > .social) .section__head h2 { font-size: var(--m-h2); line-height: 1.05; letter-spacing: var(--m-track); }
  .home .section:has(> .wrap > .social) .section__head p { font-size: var(--m-body); line-height: 1.5; text-wrap: pretty; }
  .home .social { gap: 16px; }
  .home .social__top { gap: 12px; padding: 14px 16px; }
  .home .social__handle { gap: 10px; min-width: 0; font-size: var(--m-small); }
  .home .social__handle img { width: 32px; height: 32px; border-radius: 10px; }
  .home .social__top a { flex: none; font-size: var(--m-small); white-space: nowrap; }
}
/* TikTok: il profilo incorporato (www.tiktok.com/embed/@…), come quello di Instagram. L'iframe è molto più alto della card:
   la scheda del profilo sta in cima, mentre il banner cookie di TikTok (centrato nell'iframe e non chiudibile, perché i tocchi
   vanno al link sopra) finisce sotto il bordo e non si vede */
.social__embed--tt { background: #fff; }
.social__embed--tt iframe { height: 2400px; }
@media (max-width: 860px) { .social__embed--tt { height: 400px; } .social__embed--tt iframe { height: 2400px; } }

/* ---------- Titoli composti lettera per lettera ---------- */
.is-letters .w { display: inline-block; white-space: nowrap; }
.is-letters .l { display: inline-block; transform-style: preserve-3d; }   /* niente will-change: centinaia di livelli GPU permanenti rallentano lo scroll */
.section > .wrap, .band > .wrap { transform-style: preserve-3d; }

/* ============================================================
   SHOP — stesse card, aloni e pillole del resto del sito
   ============================================================ */
.shop-hero__side { display: grid; gap: 18px; justify-items: end; }
.shop-hero__side .lead { text-align: right; }
.shop-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--bianco); color: var(--notte); font-size: .8rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(16px, 1.4vw, 28px); }
@media (min-width: 1200px) { .shop-grid { grid-template-columns: repeat(5, 1fr); } }   /* i 5 prodotti in una riga sola */
/* finché i prodotti non arrivano dal catalogo (shop.js) la griglia tiene già l'altezza che avrà:
   il piè di pagina non salta al caricamento (misure: 5 card alte ~1,8× la larghezza su mobile, 2 righe fino a 1199px, 1 riga da 1200px) */
/* telefono: 5 card in colonna = 5 foto quadrate + ~288 px di testo ciascuna + 4 spazi da 16 px (misurato a 360, 390 e 430 px) */
.shop-grid:not(:has(.shop-card)) { min-height: calc(5 * (100vw - 2 * var(--gutter)) + 1504px); }
@media (min-width: 601px) { .shop-grid:not(:has(.shop-card)) { min-height: 115vw; } }
@media (min-width: 1200px) { .shop-grid:not(:has(.shop-card)) { min-height: clamp(520px, 40vw, 640px); } }
.shop-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); transition: border-color .3s; }
.shop-card:hover { border-color: rgba(255,255,255,.22); }
.shop-card__media { position: relative; aspect-ratio: 1; background: radial-gradient(90% 75% at 50% 25%, rgba(155,92,240,.38), transparent 65%), var(--viola-scuro); overflow: hidden; }
.shop-card__sagoma { position: absolute; inset: 9%; width: 82%; height: 82%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); transition: transform .6s var(--ease); }
.shop-card:hover .shop-card__sagoma { transform: scale(1.04); }
.shop-card:hover .shop-card__logo { transform: translateX(-50%) scale(1.04); }
.shop-card__logo { position: absolute; left: 50%; transform: translateX(-50%); height: auto; transition: transform .6s var(--ease); }
.shop-card__foto { width: 100%; height: 100%; object-fit: cover; }
.shop-card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 1.6vw, 26px); }
.shop-card__body h2 { font-size: clamp(1.1rem, 1.3vw, 1.4rem); }
.shop-card__body > p { color: var(--grigio); font-size: .95rem; }
.shop-sizes { display: flex; gap: 5px; flex-wrap: wrap; }
.shop-sizes button { min-width: 38px; height: 38px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--bianco); font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.shop-sizes button:hover { border-color: var(--bianco); }
.shop-sizes button[aria-checked="true"] { background: var(--bianco); color: var(--notte); border-color: var(--bianco); }
.shop-unica { color: var(--grigio); font-size: .9rem; }
/* varianti di colore: le foto stanno una sopra l'altra, il pallino scelto accende la sua (solo opacity) */
.shop-card__media img[data-col] { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.shop-card__media img[data-col].is-on { opacity: 1; }
.shop-colors { display: flex; gap: 10px; }
.shop-colors button { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--c); border: 1.5px solid rgba(255,255,255,.55); cursor: pointer;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .2s, transform .2s; }
.shop-colors button:hover { transform: scale(1.1); }
.shop-colors button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--notte), 0 0 0 4px var(--bianco); }
.shop-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.shop-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.shop-card__msg { min-height: 1.2em; font-size: .85rem; color: var(--accento); }
.shop-note { margin-top: 28px; color: var(--grigio); font-size: .92rem; max-width: 70ch; }

/* carrello laterale */
/* carrello aperto: si blocca lo scorrimento e si compensa la barra che sparisce (--sbw, misurata in shop.js) */
.shop-lock { overflow: hidden; padding-right: var(--sbw, 0px); }
.shop-lock body { overflow: hidden; }
.shop-lock .nav { right: var(--sbw, 0px); }
.shop-lock .dock { right: calc(18px + var(--sbw, 0px)); }
.shop-drawer { position: fixed; inset: 0; z-index: 120; }
.shop-drawer__veil { position: absolute; inset: 0; background: rgba(8,3,14,.6); opacity: 0; transition: opacity .35s; }
.shop-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column;
  background: #170a27; border-left: 1px solid rgba(255,255,255,.1); transform: translateX(100%); transition: transform .45s var(--ease);
  overflow-y: auto; overscroll-behavior: contain; }
.shop-drawer.is-open .shop-drawer__veil { opacity: 1; }
.shop-drawer.is-open .shop-drawer__panel { transform: none; }
.shop-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.shop-drawer__head h2 { font-size: 1.3rem; }
.shop-drawer__x { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--bianco); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.shop-drawer__items { flex: 1 0 auto; padding: 8px 24px; }
.shop-line { display: grid; grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; gap: 6px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.shop-line__media { grid-row: span 2; position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--viola-scuro); }
.shop-line__info { display: grid; gap: 2px; font-size: .9rem; color: var(--grigio); }
.shop-line__info b { color: var(--bianco); font-size: .95rem; }
.shop-qty { display: flex; align-items: center; gap: 6px; }
.shop-qty button { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--bianco); cursor: pointer; }
.shop-qty output { min-width: 18px; text-align: center; font-weight: 700; }
.shop-line__rm { grid-column: 2 / 4; justify-self: start; background: none; border: 0; padding: 0; color: var(--grigio); font-size: .82rem; text-decoration: underline; cursor: pointer; }
.shop-empty { padding: 32px 0; color: var(--grigio); }
.shop-drawer__foot { padding: 20px 24px 24px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 12px; }
.shop-sum { margin: 0; display: grid; gap: 6px; }
.shop-sum div { display: flex; justify-content: space-between; color: var(--grigio); }
.shop-sum dd { margin: 0; color: var(--bianco); font-weight: 700; }
.shop-sum__tot { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-size: 1.1rem; }
.shop-sum__tot dt { color: var(--bianco); font-weight: 700; }
.shop-free { font-size: .85rem; color: var(--accento); min-height: 0; }
.shop-free:empty, .shop-error:empty { display: none; }
.shop-pay { justify-content: center; width: 100%; }
.shop-pay:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.shop-pay__methods { text-align: center; font-size: .82rem; color: var(--grigio); }
.shop-error { font-size: .85rem; color: #ffb4c8; }
@media (max-width: 860px) {
  .shop-hero__side { justify-items: start; }
  .shop-hero__side .lead { text-align: left; }
}

/* richiesta d'ordine nel carrello */
.shop-order { display: grid; gap: 10px; margin-top: 4px; }
.shop-order__intro { font-size: .88rem; color: var(--grigio); }
.shop-order label { display: grid; gap: 5px; font-size: .85rem; font-weight: 700; }
.shop-order label small { font-weight: 500; color: var(--grigio); }
.shop-order input:not([type=checkbox]), .shop-order textarea { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--bianco); font: inherit; font-weight: 500; resize: vertical; }
.shop-order input:focus, .shop-order textarea:focus { outline: 0; border-color: var(--viola-chiaro); background: rgba(155,92,240,.08); }
.shop-order label.shop-order__ok { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--grigio); }
.shop-order__ok input { margin-top: 3px; accent-color: var(--viola-chiaro); }
.shop-sent { padding: 18px 20px; border-radius: 16px; background: rgba(155,92,240,.15); border: 1px solid rgba(155,92,240,.4); display: grid; gap: 6px; }
.shop-sent p { color: var(--grigio); font-size: .92rem; }
.shop-order[hidden], .shop-sent[hidden] { display: none; }
/* prezzo sopra, bottone a tutta larghezza: uguale in ogni card, a ogni larghezza */
.shop-card__row { flex-direction: column; align-items: stretch; gap: 10px; }
.shop-card__row .btn { justify-content: center; }
.shop-order__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Le serate: anteprima Instagram di ogni serata sotto il suo biglietto (come il box di Vibra in home).
   Su mobile resta solo la riga col profilo, senza anteprima. */
.project__ig { margin-top: clamp(18px, 1.6vw, 26px); }
.project__ig .social__top { padding: 14px 18px; }
.project__ig .social__handle { gap: 10px; font-size: .95rem; }
.project__ig .social__handle .ico { width: 22px; height: 22px; flex: none; }
.project__ig .social__embed, .project__ig iframe { height: 412px; }   /* intestazione + due righe di post: l'anteprima non ne mostra di più */
@media (max-width: 860px) { .project__ig .social__embed { display: none; } .project__ig .social__top { border-bottom: 0; } }

/* ============================================================
   CHI SIAMO: la storia a capitoli (assets/js/storia.js + storia3d.js)
   Scene fisse = blocco sticky (.st-pin) + pista (.st-track) che dà la lunghezza dello scroll.
   Le foto stanno sempre dentro riquadri (.st-tile) con margini, mai a tutto schermo.
   ============================================================ */
.st-scene { position: relative; }
.st-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.st-track { height: calc(var(--len, 300) * 1svh); }
.st-block { position: relative; padding: clamp(96px, 16vh, 200px) 0; }
/* tra l'apertura e "Come è iniziata" non c'è uno stacco: la luce viola dell'apertura (radiale centrata sotto il suo bordo)
   continua qui come sua immagine allo specchio, alta quanto l'apertura: sulla giuntura i due colori sono identici,
   poi si dirada piano. Sopra, due banchi di nebbia ferma, leggeri, che si sciolgono nello stesso tratto. */
.st-intro::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100lvh; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 22% at 26% 24%, rgba(120, 60, 200, .13), transparent 70%),
    radial-gradient(40% 20% at 72% 30%, rgba(110, 50, 190, .11), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, rgba(85, 26, 142, .45), transparent 60%);
}
.st-intro .wrap { position: relative; z-index: 1; }
.st-label { font-size: .95rem; color: rgba(255,255,255,.55); margin: 0; }
.storia h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.025em; margin: 0; }

/* riquadri: angoli morbidi, immagine che si muove dentro */
.st-tile { position: relative; overflow: hidden; border-radius: 14px; background: #1c0f30; margin: 0; }
.st-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* parole: entrano dal basso dentro una maschera (.st-words) o si accendono da grigie a bianche (.st-fill) */
.st-words .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.st-words .wi { display: inline-block; will-change: transform; }
.st-fill { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 2.1rem); line-height: 1.5; letter-spacing: -.01em; max-width: 34ch; margin: 0; }
.st-fill--small { font-size: clamp(1.08rem, 1.35vw, 1.3rem); line-height: 1.7; max-width: 44ch; }
.st-fill--pin { font-size: clamp(1.08rem, 1.45vw, 1.4rem); line-height: 1.65; max-width: 40ch; }
.st-gap { display: block; height: .55em; }   /* tra una frase e l'altra */
.st-fill .fw { opacity: .2; }

/* 1. hero: niente foto, solo la notte del sito, la nebbia e il logo che si compone */
.st-hero .st-pin { background: radial-gradient(120% 80% at 50% 110%, rgba(85,26,142,.45), transparent 60%); }
/* alta quanto lo schermo SENZA la barra del browser: quando il telefono la nasconde scorrendo, sotto non resta una fascia scura */
.st-hero .st-pin { height: 100lvh; }
.st-text { position: absolute; z-index: 5; }
.st-text h1 { font-size: clamp(4rem, 12vw, 11rem); line-height: .95; letter-spacing: -.03em; margin: 0 0 14px; }
.st-text p { color: rgba(255,255,255,.7); font-size: clamp(1.05rem, 1.4vw, 1.35rem); max-width: 40ch; margin: 0; }
/* il titolo sta DIETRO il logo 3D (z-index sotto il canvas): il logo salendo lo copre */
@keyframes st-in { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
.st-text--year { animation: st-in 1.6s cubic-bezier(.22,.61,.36,1) .25s both; z-index: 1; inset: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 6svh; will-change: transform; }
.st-text--year h1 { font-size: clamp(5rem, 17vw, 16rem); margin: 0 0 18px; background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-text--year p { max-width: 46ch; line-height: 1.6; }
.st-text--year h1, .st-text--year p { will-change: filter, opacity; }   /* la sfocatura allo scroll la applica il compositore: il testo non si ridisegna a ogni fotogramma */
.st-hint { position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: .85rem; color: rgba(255,255,255,.55); margin: 0; }
.st-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
/* la nebbia 3D si scioglie nell'ultimo tratto in basso, invece di finire di netto sul bordo: sotto continua la luce viola di .st-intro::before */
.st-hero__canvas { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); }
.st-hero__fallback { position: absolute; left: 50%; top: 50%; width: min(74vw, 860px); transform: translate(-50%, -54%); display: none; z-index: 2; }
.st-hero__fallback.is-on { display: block; }
.st-hero__names { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.st-hero__names span { position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(.8rem, 1.1vw, 1.1rem); white-space: nowrap; color: var(--bianco); }
.st-hero__names span::after { content: ""; display: block; width: 1px; height: 14px; margin: 6px auto 0; background: rgba(255,255,255,.6); }
@media (max-width: 860px) {
  .st-hero__names { inset: auto 16px 30svh; display: flex; justify-content: center; gap: 10px 16px; flex-wrap: wrap; }
  .st-hero__names span { position: static; transform: none !important; }
  .st-hero__names span::after { display: none; }
}

/* 2. come è iniziata */
.storia .st-intro__title { font-size: clamp(2.6rem, 6vw, 6rem); margin-bottom: clamp(40px, 5vw, 80px); }
.st-intro__grid { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.st-intro__tile { aspect-ratio: 4 / 5; }
/* riquadri che si aprono col ritaglio (storia.js): ritaglio su un livello suo, la foto non si ridisegna a ogni fotogramma */
.st-tile--reveal, .st-posto__tile { will-change: transform, clip-path; }

/* 3. un posto (21 ott 2026, presa dalla prova GSAP): il riquadro nasce come una barra del logo al centro e si apre a cornice
   con i margini; il testo sta sopra la foto scurita, in basso a sinistra, e le righe salgono da dietro una maschera (storia.js) */
.st-posto__tile { position: absolute; inset: 12svh var(--gutter) 10svh; }
.st-posto__tile img { inset: -16% 0 auto; height: 132%; filter: brightness(.5) saturate(1.05); }   /* più alta: scorre dentro a scena finita (storia.js) */
.st-posto__text { position: absolute; left: calc(var(--gutter) + clamp(24px, 4vw, 72px)); bottom: calc(10svh + clamp(24px, 4vw, 64px)); width: min(100% - 2 * var(--gutter) - 48px, 720px); }
.st-posto__text h2 { margin-bottom: 22px; }
.st-posto__p { color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.7; max-width: 46ch; margin: 0; }

/* 4. il promoter */
.st-promoter__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.st-promoter__tile { aspect-ratio: 4 / 5; }
.st-promoter__text h2 { margin-bottom: 24px; }
/* foto di "Come è iniziata" e "Il promoter": più alte del riquadro di un 32%, scorrono dentro più lente della pagina (storia.js) */
.st-block .st-tile--reveal img { inset: -16% 0 auto; height: 132%; }
.st-promoter__text .st-fill { color: var(--bianco); }
.st-names { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15; }
.st-names li { will-change: transform; }

/* 5. di corsa: una fila di riquadri a barra che attraversa lo schermo */
/* (20 ott 2026) la frase grande al centro, in primo piano; le foto arrivano dal fondo e le passano sopra e sotto (storia.js).
   Il fondo pieno della scena (le barre giganti della trama non passano dietro alle frasi) è uno strato a parte che storia.js accende
   appena la scena è ferma e spegne prima che riparta: mentre entra ed esce è trasparente, niente stacco netto col resto della pagina */
/* fisso e non assoluto: copre tutto lo schermo anche quando sul telefono la barra del browser sparisce (la scena è alta 100svh:
   sotto restava una fascia di un altro colore). La scena non ha trasformazioni, quindi "fixed" si riferisce allo schermo */
.st-corsa__bg { position: fixed; inset: 0; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(90% 60% at 50% 115%, rgba(85,26,142,.32), transparent 65%), var(--notte); }
.st-corsa__strip { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 46%; }
.st-corsa__strip .st-tile { position: absolute; left: 50%; top: 46%; width: clamp(170px, 17vw, 290px); aspect-ratio: 3 / 4.2; border-radius: 999px 999px 14px 14px;
  opacity: 0; will-change: transform, opacity; }
/* la foto non si muove dentro il riquadro: niente livello suo (col livello a parte il bordo ad arco non la tagliava e serviva un ritaglio costoso) */
.st-corsa__strip .st-tile img { filter: saturate(1.05) brightness(.82); will-change: auto; }
.st-corsa__lines { position: absolute; left: 50%; top: 50%; width: min(90vw, 1080px); height: 34svh; transform: translate(-50%, -50%); z-index: 2; }
/* velo scuro dietro la frase: le foto che passano vicino al centro non la sporcano */
.st-corsa__lines::before { content: ""; position: absolute; inset: -18% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(18,7,31,.9) 45%, rgba(18,7,31,.55) 75%, transparent); }
.st-corsa__lines h2 { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: clamp(2.2rem, 4.4vw, 4.6rem); text-wrap: balance; }

/* 6. un punto di ritrovo */
.st-ritrovo__grid { height: 100%; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 96px); align-items: center; padding-top: 70px; }
.st-ritrovo__text h2 { margin-bottom: 26px; }
.st-ritrovo__eq { height: 70svh; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 22px); align-items: end; }
.st-ritrovo__eq .st-tile { height: var(--h, 80%); border-radius: 999px 999px 14px 14px; }
/* 7. da gruppetto a movimento: la scena "la famiglia" ha il suo file, famiglia.css */

@media (max-width: 860px) {
  .st-intro__grid, .st-promoter__grid { grid-template-columns: 1fr; gap: 28px; }
  .st-intro__tile, .st-promoter__tile { aspect-ratio: 4 / 3; }
  .st-intro__tile img { object-position: 50% 22%; }
  .st-promoter__tile img { object-position: 50% 48%; }
  .st-posto__tile { inset: 9svh 16px 8svh; }
  .st-posto__text { left: 36px; right: 36px; width: auto; bottom: calc(8svh + 24px); }
  .st-posto__text h2 { font-size: var(--m-h2); letter-spacing: var(--m-track); }
  .st-posto__p { font-size: var(--m-body); text-wrap: pretty; }
  /* telefono: meno scroll a vuoto fra un capitolo e l'altro (prima ~una schermata vuota dopo il logo e fra le sezioni) */
  .st-block { padding: 64px 0; }
  .st-hero .st-track { height: calc(var(--len, 300) * .85svh); }   /* il logo, già composto, restava fermo a lungo */
  /* "Come è iniziata" sale sopra la coda dell'apertura (la metà bassa, vuota, mentre il logo se ne va); la sua luce viola
     parte sempre dal bordo dell'apertura (scesa della stessa misura), dove i due colori combaciano: niente stacco */
  .st-intro { margin-top: -42svh; }
  .st-intro::before { top: 42svh; }
  .st-corsa__strip { perspective: 700px; }
  .st-corsa__strip .st-tile { width: 34vw; }
  .st-corsa__lines { width: calc(100vw - 2 * var(--gutter)); height: 40svh; }
  .st-corsa__lines h2 { font-size: var(--m-display); letter-spacing: var(--m-track); }
  .st-ritrovo__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: end; gap: 20px; padding: 84px 0 24px; }
  .st-ritrovo__eq { height: 36svh; }
  /* le barre salgono mentre la foto dentro si stringe: con un livello grafico fisso (iPhone) il riquadro arrotondato si sposta
     senza essere ridisegnato, e GSAP non crea e distrugge il livello a ogni inizio e fine movimento (lo scrub lo fa di continuo) */
  .st-ritrovo__eq .st-tile { will-change: transform; }
  .st-fill--pin { font-size: 1rem; line-height: 1.55; }
  .st-gap { height: .35em; }
}

/* senza animazioni (riduci movimento): tutto fermo nello stato finale */
.st-static .st-track, .st-static .st-hint, .st-static .st-hero__canvas { display: none; }
.st-static .st-pin { position: relative; height: auto; min-height: 100svh; }
.st-static .st-hero__fallback { display: block; }
.st-static .st-fill .fw { opacity: 1; }
.st-static .st-corsa__strip { position: relative; display: flex; gap: 14px; padding: 96px var(--gutter) 0; overflow-x: auto; perspective: none; }
.st-static .st-corsa__strip .st-tile { position: relative; left: auto; top: auto; flex: none; opacity: 1; }
.st-static .st-corsa__lines { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; margin: 40px var(--gutter) 60px; }
.st-static .st-corsa__lines h2 { position: static; transform: none; }
.st-static .st-corsa__lines h2 + h2 { display: none; }

/* ---------- WhatsApp ---------- */
.ico--wa { width: 1.25rem; height: 1.25rem; flex: none; }
.btn .ico--wa { width: 1.3rem; height: 1.3rem; }
.contact__list b.contact__ico .ico--wa { width: 22px; height: 22px; }
.event-card__go .ico--wa { width: 1.1rem; height: 1.1rem; vertical-align: -.2em; margin-right: 6px; }
.shop-wa { margin-top: 10px; width: 100%; justify-content: center; }

/* ---------- Pagine interne su telefono con la scala --m-* (19 ott 2026) ----------
   Le serate, Contatti, Shop, Ordine ricevuto. Stesse misure della home: titolo grande 36px, titoli di sezione 28px,
   titoli di scheda 20px, testo 16px, testo secondario 14px, etichette 12px. I campi del modulo restano a 17px:
   sotto i 16px l'iPhone ingrandisce la pagina quando li tocchi. Su computer niente cambia. */
@media (max-width: 860px) {
  /* apertura delle pagine (non quella di Le serate con il video nel titolo, che ha misure sue) */
  .page-hero:not(.page-hero--eq) h1 { font-size: var(--m-display); line-height: 1.02; letter-spacing: var(--m-track); }
  .page-hero__claim { font-size: var(--m-body); line-height: 1.3; text-wrap: balance; }
  .page-hero .lead { margin-top: 12px; font-size: var(--m-body); line-height: 1.5; text-wrap: pretty; }
  .page-hero--row { gap: 14px; }
  .page-hero__title { gap: 10px; }
  /* titoli di sezione (es. "Eventi speciali") */
  body:not(.home) .section__head { gap: 14px; margin-bottom: 32px; }
  body:not(.home) .section__head h2 { font-size: var(--m-h2); line-height: 1.05; letter-spacing: var(--m-track); }
  body:not(.home) .section__head p { font-size: var(--m-body); line-height: 1.5; text-wrap: pretty; }
  /* Le serate: le tre serate e le schede degli eventi */
  .project__body h2 { font-size: var(--m-h3); letter-spacing: var(--m-track); }
  .project__body p { font-size: var(--m-body); line-height: 1.5; text-wrap: pretty; }
  body:not(.home) .night__dayname { font-size: var(--m-h3); }
  body:not(.home) .night__where, body:not(.home) .night__stub > span:first-child { font-size: var(--m-label); }
  body:not(.home) .night__time { font-size: var(--m-small); }
  .event-card { min-height: 0; }
  .event-card__kicker { font-size: var(--m-label); }
  .event-card__title { font-size: var(--m-h3); line-height: 1.15; letter-spacing: var(--m-track); text-wrap: balance; }
  .event-card__go { font-size: var(--m-body); }
  /* Contatti */
  .contact__list { gap: 22px; }
  .contact__list b { font-size: var(--m-label); }
  .contact__list a { font-size: var(--m-h3); }
  .contact__list p { font-size: var(--m-body); line-height: 1.5; }
  .field label { font-size: var(--m-small); }
  /* campi più bassi (da ~60 a ~50px); il testo resta a 16px: sotto, l'iPhone ingrandisce la pagina al tocco */
  .field input, .field textarea, .field select { padding: 12px 16px; border-radius: 12px; font-size: var(--m-body); }
  .field textarea { min-height: 120px; }
  .form__note { font-size: var(--m-small); line-height: 1.5; text-wrap: pretty; }
  .form button[type="submit"] { justify-content: center; }   /* bottone a tutta larghezza: testo e icona al centro */
  /* Shop */
  .shop-card__body h2 { font-size: var(--m-h3); letter-spacing: var(--m-track); }
  .shop-card__body > p { font-size: var(--m-body); line-height: 1.5; }
  .shop-price { font-size: var(--m-h3); }
  .shop-note { font-size: var(--m-small); line-height: 1.5; }
  .shop-order input:not([type=checkbox]), .shop-order textarea { font-size: var(--m-body); }   /* campi dell'ordine a 16px: sotto, l'iPhone ingrandisce la pagina al tocco */
  /* Lavora con noi: in lavora.css (si carica dopo e ridefinisce il titolo) */
  /* bottoni: più bassi (da ~57 a ~50px), sempre almeno 44px per il dito */
  .btn { padding: .8rem 1.4rem; font-size: var(--m-body); }
  .btn--small { padding: .65rem 1.1rem; font-size: var(--m-small); }
  .btn--icon { padding: .7rem 1.3rem; }
  .btn--icon .ico { width: 1.375rem; height: 1.375rem; }
}

/* ============================================================
   Privacy e cookie (21 ott 2026): pagina privacy.html, banner del consenso, riquadri al posto dei post social
   (assets/js/consenso.js). Banner fisso sopra la pagina: entra ed esce senza spostare niente.
   ============================================================ */
.legal { display: grid; gap: clamp(36px, 5vw, 56px); padding-bottom: clamp(64px, 9vw, 120px); }
.legal__sec { max-width: 76ch; }   /* il blocco resta allineato al titolo, solo le righe sono corte */
.legal__date { margin-top: 14px; color: var(--grigio); font-size: .9rem; }
.legal__sec h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; }
.legal__sec h3 { font: 700 1.05rem/1.3 var(--font-body); color: var(--bianco); margin: 22px 0 6px; }
.legal__sec p, .legal__sec li { color: var(--grigio); line-height: 1.7; }
.legal__sec p + p { margin-top: 12px; }
.legal__sec ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 10px; }
.legal__sec strong { color: var(--bianco); font-weight: 700; }
.legal a, .consenso__p a, .consenso-box a, .form__note a, .shop-order__ok a { color: var(--viola-chiaro); text-decoration: underline; text-underline-offset: 2px; }
.legal__btn { margin-top: 20px; }

/* il banner: in basso a sinistra (a destra c'è il dock), sopra a tutto tranne carrello e menu aperti */
.consenso { position: fixed; left: 18px; bottom: 18px; z-index: 90; width: min(420px, calc(100vw - 36px)); padding: 20px 20px 18px; border-radius: 18px;
  background: #1f0e35; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.consenso[hidden] { display: none; }
.consenso__t { font: 800 1rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--bianco); margin: 0 0 8px; }
.consenso__p { color: var(--grigio); font-size: .92rem; line-height: 1.55; margin: 0; }
/* i due pulsanti uguali: rifiutare costa quanto accettare (Garante) */
.consenso__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.consenso__btns .btn { justify-content: center; }

/* al posto dei post di Instagram e TikTok, finché non c'è il consenso: copre il riquadro, che ha già la sua altezza fissa */
.consenso-box { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px;
  text-align: center; background: #0d0618; }
.consenso-box[hidden] { display: none; }
.consenso-box p { margin: 0; max-width: 30ch; color: var(--grigio); font-size: .92rem; line-height: 1.55; }

.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a, .footer__legal button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover, .footer__legal button:hover { color: var(--bianco); }

@media (max-width: 860px) {
  .legal__sec h2 { font-size: var(--m-h3); letter-spacing: var(--m-track); }
  .legal__sec h3 { font-size: var(--m-body); }
  .legal__sec p, .legal__sec li { font-size: var(--m-body); line-height: 1.6; text-wrap: pretty; }
  .legal__date { font-size: var(--m-small); }
  .consenso { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px 16px 14px; }
  .consenso__t { font-size: var(--m-body); }
  .consenso__p, .consenso-box p { font-size: var(--m-small); text-wrap: pretty; }
  .footer__legal { gap: 12px; margin-top: 6px; }
}