/* =========================================================
   DA BIAGIO — Vino e mescita, Via della Scala 64
   Mobile-first. Si parte dal telefono e si sale.
   ========================================================= */

/* ---------- 1. TOKEN ----------
   Tutti i colori e le misure stanno qui. Se domani il cliente dice
   "l'arancione è troppo acceso", cambi UNA riga e cambia tutto il sito. */
:root {
  /* Palette: non è nero puro. È il nero che vedi guardando dentro
     una bottiglia di vino — ha una punta di verde. */
  --pece:        #0A0E0C;
  --pece-alto:   #131916;
  --travertino:  #E7E0D2;
  --travertino-2:#CFC5B2;
  --ambra:       #E3902F;  /* la luce dei lampioni al sodio */
  --verdeacqua:  #86A69B;  /* vetro di bottiglia slavato */
  --granata:     #6B1524;  /* il vino nella bottiglia */
  --fumo:        #8E887C;

  --font-display: 'Big Shoulders Display', Impact, sans-serif;
  --font-testo:   'Newsreader', Georgia, serif;
  --font-dati:    'Space Mono', 'Courier New', monospace;

  --bordo: 1px solid rgba(231, 224, 210, 0.14);
  --margine: 6vw;

  /* LOGO — le uniche due misure da toccare per ingrandirlo o rimpicciolirlo.
     La prima è l'altezza normale, la seconda quella dopo lo scroll.
     La seconda deve restare più bassa della prima, altrimenti sparisce
     l'effetto della testata che si ritira mentre leggi. */
  --logo-h: 51px;
  --logo-h-mini: 42px;

  /* ===== LUMINOSITÀ DELLE DUE APERTURE =====
     Sono le UNICHE quattro misure da toccare per schiarire o scurire
     le foto grandi. Prima erano sei valori sparsi in due blocchi, ed
     era il motivo per cui alzare solo la luminosità non bastava: sopra
     la foto c'è un velo scuro, e se resta scuro lui non cambia niente.
     Ora le due cose si muovono insieme.

       --*-luce  luminosità della foto. PIÙ ALTO = PIÙ CHIARA.
                 .42 è scuro, .60 medio, .80 quasi naturale.
       --*-velo  densità del pannello scuro sopra la foto.
                 PIÙ BASSO = PIÙ CHIARO. 1 è pieno, .6 leggero, .35 appena.

     Si muovono in coppia: per schiarire davvero, alza la luce E abbassa
     il velo. Ma non scendere troppo col velo, o la scritta bianca sopra
     la foto diventa illeggibile: controlla sempre il titolo dopo. */

  /* Apertura della home (index.html) */
  --home-luce: .78;
  --home-velo: .45;

  /* Apertura della pagina vini (vini.html) */
  --vini-luce: .76;
  --vini-velo: .45;
}

/* ---------- 2. RESET ESSENZIALE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* clip e NON hidden: overflow:hidden sulla radice crea un contenitore di
     scorrimento e manderebbe in pezzi tutti i position:sticky della pagina.
     clip taglia e basta, senza creare nulla. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--pece);
  color: var(--travertino);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* il nastro scorrevole sborda: qui lo contieni */
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1.1em; }
ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }

/* Focus visibile solo da tastiera: chi usa il mouse non lo vede,
   chi naviga col tab non si perde. */
:focus-visible {
  outline: 2px solid var(--ambra);
  outline-offset: 3px;
}

.salta {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--ambra); color: var(--pece);
  padding: .6rem 1rem; font-family: var(--font-dati); font-size: .75rem;
  transition: top .2s;
}
/* :focus-visible e non :focus. Con :focus il link compariva anche a un
   semplice clic del mouse in quella zona, ed è il motivo per cui lo
   vedevi spuntare. Con :focus-visible appare SOLO a chi ci arriva col
   tasto Tab, cioè esattamente a chi serve. */
.salta:focus-visible { top: 1rem; }

.contenitore {
  width: min(1280px, 100% - var(--margine) * 2);
  margin-inline: auto;
}

/* ---------- 3. TIPOGRAFIA RICORRENTE ---------- */

/* clamp(minimo, fluido, massimo): il testo scala col viewport
   senza bisogno di scrivere media query per ogni dimensione. */
.occhiello {
  font-family: var(--font-dati);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verdeacqua);
  margin-bottom: 1.4rem;
}
/* Era #6E7F52: 3.3:1 sul travertino, sotto il minimo di 4.5:1 per un
   testo piccolo. Scurito quanto basta per passare (4.7:1) senza
   cambiare il colore percepito. */
.occhiello--scuro { color: #596642; }

.titolo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: .92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--pece);
  margin-bottom: 1.6rem;
}
.titolo--chiaro { color: var(--travertino); }

.nota {
  font-family: var(--font-dati);
  font-size: .74rem;
  line-height: 1.7;
  color: var(--fumo);
  letter-spacing: .02em;
}

/* ---------- 4. GRANA CINEMATOGRAFICA ----------
   Un SVG di rumore generato al volo, in overlay su tutta la pagina.
   pointer-events: none = i click passano attraverso. */
.grana {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sfarfallio .5s steps(3) infinite;
}
/* Animo la POSIZIONE DELLO SFONDO, non l'elemento: prima la grana era un
   riquadro fisso largo il doppio dello schermo, e su iOS un elemento fisso
   sovradimensionato può allargare l'area scorrevole. */
@keyframes sfarfallio {
  0%   { background-position:   0px   0px; }
  33%  { background-position:  -9px   5px; }
  66%  { background-position:   6px -11px; }
  100% { background-position:   0px   0px; }
}

/* ---------- 6. TESTATA ---------- */
.testata {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem var(--margine) .8rem calc(var(--margine) + 8px);
  transition: background .35s, padding .35s;
}
.testata.compatta {
  background: rgba(10, 14, 12, .82);
  backdrop-filter: blur(10px);
  padding-block: .7rem;
}
/* Il logo. L'altezza la comandano due token dichiarati in :root
   (--logo-h e --logo-h-mini): li cambi in un punto solo e cambia ovunque. */
.testata__logo {
  display: block;
  line-height: 0; /* toglie i 3-4px fantasma sotto le immagini inline */
}
.testata__logo img {
  height: var(--logo-h);
  width: auto;    /* mai fissare anche la larghezza: deforma il logo */
  transition: height .35s;
}
.testata.compatta .testata__logo img { height: var(--logo-h-mini); }
.testata__nav {
  display: flex;
  gap: 1.1rem;
  font-family: var(--font-dati);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.testata__nav a {
  text-decoration: none;
  color: var(--travertino);
  opacity: .7;
  transition: opacity .25s, color .25s;
}
.testata__nav a:hover { opacity: 1; color: var(--ambra); }

/* ---------- 7. APERTURA ---------- */
.apertura {
  position: relative;
  min-height: 100svh; /* svh, non vh: su iOS la barra del browser non taglia più il contenuto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--margine) 3rem;
  overflow: hidden;

  /* Sfondo di riserva: se la foto manca o non carica, resta questo.
     Il sito non si rompe mai per un file assente. */
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 2px, transparent 2px 9px),
    linear-gradient(155deg, #1D2620 0%, #0F1512 50%, var(--pece) 100%);
}

/* La scena sta sotto a tutto il testo */
.apertura__scena {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* La foto: object-fit cover = riempie sempre il riquadro senza deformarsi,
   qualunque sia il formato dell'originale.
   Il filtro è tarato sulla foto reale (scaffali chiari, molto dettaglio):
   la scurisce, la desatura e la sfuoca appena. Il micro-blur non è un vezzo:
   crea profondità di campo, la foto va sullo sfondo e il testo viene avanti. */
.apertura__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.38) contrast(1.2) brightness(var(--home-luce)) blur(1.5px);
  transform: scale(1.06);
  animation: carrello 26s ease-in-out infinite alternate;
}
@keyframes carrello {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1.5%); }
}

/* Se il JS non trova la foto, nasconde l'immagine e resta lo sfondo di riserva */
.apertura.senza-foto .apertura__foto { display: none; }

/* Il velo: tre gradienti sovrapposti.
   1) verticale, con il punto più opaco AL CENTRO (.52) e non al 15% come prima:
      è lì che passa la scritta DA BIAGIO, e sotto ci sono etichette chiare.
   2) verde-bottiglia in diagonale, tiene la foto dentro la palette.
   3) vignettatura radiale: scurisce gli angoli, occhio al centro. Da cinema. */
.apertura__velo {
  position: absolute;
  inset: 0;
  /* Ogni opacità è moltiplicata per --home-velo: un solo numero
     alleggerisce tutti e tre i gradienti insieme, che è l'unico modo
     perché il risultato si veda davvero. */
  background:
    linear-gradient(180deg,
      rgba(10,14,12, calc(.72 * var(--home-velo))) 0%,
      rgba(10,14,12, calc(.52 * var(--home-velo))) 45%,
      rgba(10,14,12, calc(.96 * var(--home-velo))) 100%),
    linear-gradient(140deg,
      rgba(18,45,33, calc(.60 * var(--home-velo))) 0%,
      rgba(10,14,12, calc(.40 * var(--home-velo))) 100%),
    radial-gradient(120% 80% at 50% 45%,
      transparent 25%,
      rgba(10,14,12, calc(.65 * var(--home-velo))) 100%);
}

/* La luce del lampione: un alone ambra fuori fuoco in alto a sinistra,
   sopra al velo così sembra che illumini la scena */
.apertura__luce {
  position: absolute;
  top: -25%; left: -20%;
  width: 90vw; height: 90vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(227,144,47,.28) 0%, rgba(227,144,47,.08) 40%, transparent 70%);
  mix-blend-mode: screen; /* schiarisce invece di coprire: si comporta da luce vera */
}

/* Il testo va sopra la scena */
.occhiello,
.insegna,
.apertura__claim,
.apertura__cue { position: relative; z-index: 1; }

.insegna {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 24vw, 17rem);
  line-height: .82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}

/* Il taglio da titoli di testa: il contenitore nasconde,
   la riga dentro scivola su. Due elementi, un effetto. */
.scatto { display: block; overflow: hidden; }
.scatto__riga {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.scatto:nth-child(2) .scatto__riga { transition-delay: .12s; }
body.acceso .scatto__riga { transform: translateY(0); }

/* La seconda riga in ambra: spezza il blocco e dà il punto di calore */
.insegna .scatto:nth-child(2) .scatto__riga { color: var(--ambra); }

.apertura__claim {
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  line-height: 1.5;
  max-width: 30ch;
  color: var(--travertino-2);
}
.apertura__cue {
  font-family: var(--font-dati);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: auto;
  padding-top: 3rem;
  margin-bottom: 0;
}

/* ---------- 8. NASTRO SCORREVOLE ---------- */
.nastro {
  border-block: var(--bordo);
  padding-block: .85rem;
  overflow: hidden;
  background: var(--pece-alto);
}
.nastro__pista {
  display: flex;
  width: max-content;
  /* --larghezza e --durata le scrive il JS dopo aver misurato un blocco.
     I valori di riserva servono se il JS non parte. */
  animation: scorri var(--durata, 34s) linear infinite;
}
.nastro__blocco {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  padding-right: 1.5rem;
  color: var(--travertino);
}
.nastro__blocco em { color: var(--ambra); font-style: normal; }
/* Scorre di UNA larghezza di blocco, non del 50% della pista.
   Col 50% il loop si richiudeva solo se la pista era esattamente due
   blocchi: con tre o piu' cloni appariva il buco che vedevi. */
@keyframes scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--larghezza, 50%) * -1)); }
}

/* ---------- 9. STORIA (blocco chiaro) ----------
   Il ribaltamento cromatico è voluto: notte fuori, marmo dentro. */
.storia {
  background: var(--travertino);
  color: #26221B;
  padding: 5rem 0;
}
.storia__griglia {
  width: min(1280px, 100% - var(--margine) * 2);
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
}
.storia__testo p { max-width: 46ch; }
.storia__testo strong { font-weight: 400; color: #7A1F2C; }

/* Griglia dati: tre coppie etichetta/valore in fila */
.dati {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(38,34,27,.2);
}
.dati dt {
  font-family: var(--font-dati);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6A6152;   /* era #6E6455: 4.42:1, appena sotto il minimo */
  margin-bottom: .35rem;
}
.dati dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
}

/* ---------- 10. LASTRE (segnaposto immagini) ----------
   Finché non carichi le foto, questi blocchi sembrano una scelta,
   non un errore. Quando togli il commento all'<img>, riempie tutto. */
.lastra {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #5E6B5F 0%, #2B322D 55%, #171C18 100%);
  overflow: hidden;
}
.lastra::after {
  content: attr(data-slot);
  position: absolute;
  left: 1rem; bottom: 1rem;
  font-family: var(--font-dati);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(231,224,210,.55);
}
.lastra img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lastra:has(img)::after { content: none; } /* se c'è la foto, via l'etichetta */

/* ---------- 11. CARTA / LISTINO ---------- */
.carta { padding: 5rem 0; }

/* overflow: clip qui è la difesa vera. Le righe entrano da fuori schermo:
   invece di sperare che sia la pagina a tagliarle, se le taglia il listino.
   Il contenimento va messo il piu' vicino possibile a chi sborda. */
.listino {
  border-top: var(--bordo);
  overflow: clip;
}
.voce {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  padding: 1.1rem 0;
  border-bottom: var(--bordo);
  transition: background .3s, padding-left .3s;
}
.voce:hover { background: rgba(227,144,47,.06); padding-left: .8rem; }
.voce__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
  text-transform: uppercase;
}
.voce__prezzo {
  font-family: var(--font-dati);
  font-size: 1rem;
  color: var(--ambra);
  text-align: right;
  align-self: center;
}
.voce__luogo { font-size: .95rem; color: var(--fumo); }
.voce__grado {
  font-family: var(--font-dati);
  font-size: .72rem;
  color: var(--verdeacqua);
  text-align: right;
}
.listino + .nota { margin-top: 1.2rem; }

.sfuso {
  margin-top: 4rem;
  padding: 2rem;
  border: var(--bordo);
  background: var(--pece-alto);
}
.sfuso__titolo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.sfuso__misure {
  display: grid;
  gap: 1px;
  background: rgba(231,224,210,.14); /* i gap mostrano lo sfondo = righe sottili gratis */
  margin-bottom: 1.4rem;
}
.misuraprezzo {
  background: var(--pece-alto);
  padding: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.misuraprezzo__q {
  font-family: var(--font-dati);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--travertino-2);
}
.misuraprezzo__p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--ambra);
}

/* ---------- 12. BANCO / CARRELLATA ---------- */
.banco { padding: 3rem 0 5rem; }

.carrellata {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem var(--margine) 2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(231,224,210,.25) transparent;
}
.fotogramma {
  flex: 0 0 74%;
  margin: 0;
  scroll-snap-align: center;
}
.fotogramma figcaption {
  font-family: var(--font-dati);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--fumo);
  margin-top: .8rem;
}

/* ---------- 13. DOVE ---------- */
.dove {
  padding: 5rem 0;
  border-top: var(--bordo);
}
.dove__griglia { display: grid; gap: 3rem; }

.bottone {
  display: inline-block;
  font-family: var(--font-dati);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.8rem;
  border: 1px solid var(--ambra);
  color: var(--ambra);
  transition: background .3s, color .3s;
}
.bottone:hover { background: var(--ambra); color: var(--pece); }

.orari dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: var(--bordo);
}
.orari dt {
  font-family: var(--font-dati);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--travertino-2);
}
.orari dd { font-family: var(--font-dati); font-size: .82rem; color: var(--verdeacqua); }
.orari .nota { margin-top: 1.2rem; }

/* ---------- 14. PIEDE ---------- */
.piede {
  padding: 2.5rem 0;
  border-top: var(--bordo);
  font-family: var(--font-dati);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fumo);
}
.piede__griglia { display: grid; gap: .6rem; }

/* ---------- 15. COMPARSE ALLO SCROLL ----------
   Stato di partenza. Il JS aggiunge .visibile quando l'elemento entra. */
.comparsa {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.comparsa.visibile { opacity: 1; transform: none; }

/* =========================================================
   16. BREAKPOINT — mobile-first, si aggiunge, non si corregge
   ========================================================= */

/* --- 480px: piccoli aggiustamenti tipografici --- */
@media (min-width: 480px) {
  .voce { grid-template-columns: 1fr auto auto; align-items: baseline; }
  .voce__luogo { grid-column: 1; }
  .sfuso__misure { grid-template-columns: repeat(3, 1fr); }
}

/* --- 768px: la carrellata si stringe, compare la bottiglia --- */
@media (min-width: 768px) {

  /* Logo più grande da tablet in su (+50% rispetto a prima) */
  :root { --logo-h: 69px; --logo-h-mini: 54px; }


  .fotogramma { flex: 0 0 42%; }
  /* Due colonne su tablet: indirizzo e orari sopra, mappa sotto a
     tutta larghezza ma contenuta, altrimenti un quadrato largo quanto
     lo schermo diventerebbe altissimo. */
  .dove__griglia { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
  .dove__griglia .mappa { grid-column: 1 / -1; max-width: 420px; }
  .piede__griglia { grid-template-columns: repeat(3, 1fr); }
  .storia { padding: 7rem 0; }
  .carta, .dove { padding: 7rem 0; }
}

/* --- 1024px: lo split-screen della storia entra in scena --- */
@media (min-width: 1024px) {
  .storia__griglia {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
  /* sticky: la lastra resta ferma mentre la colonna accanto scorre.
     Funziona solo se il genitore NON ha overflow nascosto. */
  .storia__lastra {
    position: sticky;
    top: 12vh;
  }
  .lastra { aspect-ratio: 3 / 4; }
  .fotogramma { flex: 0 0 30%; }

  .listino { border-top-width: 1px; }
  .voce {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 90px 110px;
    align-items: baseline;
    padding: 1.4rem 0;
  }
  .voce__luogo { grid-column: auto; }
  .voce__nome { font-size: 2.1rem; }
}

/* --- 1280px: si dà aria, non si allarga a dismisura --- */
@media (min-width: 1280px) {
  :root { --margine: 5rem; }
  .apertura { padding-inline: var(--margine); }
  .sfuso { padding: 3rem; }
}

/* ---------- 17. RISPETTO PER CHI NON VUOLE MOVIMENTO ----------
   Impostazione di sistema. Ignorarla è un errore di accessibilità. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grana { animation: none; }
  .nastro__pista { animation: none; }
  .scatto__riga { transform: none; transition: none; }
  .comparsa { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   18. MOTO — il blocco delle animazioni JavaScript
   -----------------------------------------------------------------
   Tutto qui dentro è agganciato a body.js-moto, classe che aggiunge
   script.js. Se il JavaScript non parte o l'utente ha chiesto meno
   animazioni, NIENTE di questo si attiva e il sito resta quello di
   prima: leggibile, completo, semplicemente fermo.

   Le variabili le scrive il JS. Qui decidiamo solo cosa farne:
     --p       0 → 1  avanzamento dell'elemento nella viewport
     --uscita  0 → 1  quanto l'apertura è scorsa via
     --vel    -1 → 1  velocità e direzione dello scroll
     --tx/--ty        inclinazione sotto il puntatore
     --verso  1 o -1  lato di provenienza, alternato
   ========================================================= */

/* ---------- 18.1 IL TITOLO SMONTATO ----------
   Disattivo il vecchio scivolamento: adesso comanda il montaggio
   lettera per lettera. E tolgo overflow:hidden, altrimenti le lettere
   che arrivano da fuori vengono tagliate. */
body.motore-vivo .scatto { overflow: visible; }
body.motore-vivo .scatto__riga { transform: none; transition: none; }

/* Il guscio esterno: si occupa SOLO dello schizzo allo scroll.
   Ogni lettera ha una direzione sua (--sx, --sy, --sr, casuali).
   Il risultato è che l'insegna si disintegra invece di scorrere via. */
body.motore-vivo .lettera {
  display: inline-block;
  will-change: transform;
  transform:
    translate(calc(var(--sx, 0) * var(--uscita, 0) * 1px),
              calc(var(--sy, 0) * var(--uscita, 0) * 1px))
    rotate(calc(var(--sr, 0) * var(--uscita, 0) * 1deg));
}

/* L'elemento interno: si occupa SOLO dell'entrata al caricamento.
   Due livelli annidati perché una sola transform non può fare
   due movimenti indipendenti nello stesso istante. */
body.motore-vivo .lettera > i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
}
body.acceso .lettera > i {
  animation: montaggio 1s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes montaggio {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.45); filter: blur(18px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- 18.2 L'APERTURA CHE SI SFALDA ----------
   Il titolo sfuoca e svanisce, il testo di servizio sale più veloce
   (velocità diverse = profondità), la foto resta indietro. */
body.js-moto .insegna {
  filter: blur(calc(var(--uscita, 0) * 11px));
  opacity: calc(1 - var(--uscita, 0) * 1.15);
}
body.js-moto .apertura .occhiello,
body.js-moto .apertura__claim,
body.js-moto .apertura__cue {
  transform: translateY(calc(var(--uscita, 0) * -70px));
  opacity: calc(1 - var(--uscita, 0) * 1.7);
}

/* La scena scende mentre la pagina sale: è il parallasse.
   inset negativo = ho margine sopra e sotto, così scendendo
   non scopre il bordo. */
body.js-moto .apertura__scena {
  inset: -14% 0;
  transform:
    translateY(calc(var(--uscita, 0) * 14vh))
    scale(calc(1 + var(--uscita, 0) * .1));
}

/* ---------- 18.3 REAZIONE ALLA VELOCITÀ ----------
   Non è decorazione: la deformazione sotto accelerazione è come
   il cinema ha sempre reso la velocità. Ferma la pagina, torna dritto. */
body.js-moto .listino,
body.js-moto .carrellata {
  transform: skewY(calc(var(--vel, 0) * .8deg));
}
body.js-moto .nastro__blocco {
  display: inline-block;
  transform:
    skewX(calc(var(--vel, 0) * -16deg))
    scaleX(calc(1 + var(--vel, 0) * .07));
}

/* ---------- 18.4 I QUATTRO MOVIMENTI ---------- */
body.motore-vivo [data-moto].in-scena { will-change: transform, opacity; }

/* SALI — il movimento sobrio, per i testi lunghi.
   Non tutto deve strillare: se strilla tutto, non strilla niente. */
body.motore-vivo [data-moto="sali"] {
  opacity: calc(var(--p, 0) * 1.3 + .1);
  transform: translateY(calc((1 - var(--p, 0)) * 70px));
}

/* STRAPPO — i titoli arrivano schiacciati e storti da sinistra
   e si raddrizzano. transform-origin in basso a sinistra: ruotano
   sul loro angolo, come un cartello che si alza. */
body.motore-vivo [data-moto="strappo"] {
  transform-origin: left bottom;
  opacity: calc(var(--p, 0) * 1.5 + .05);
  transform:
    translateX(calc((1 - var(--p, 0)) * -16vw))
    skewX(calc((1 - var(--p, 0)) * 24deg))
    scaleY(calc(.65 + var(--p, 0) * .35));
}

/* SPINTA — le righe del listino entrano da lati alterni (--verso),
   ruotate. Sopra ci passa anche lo skew da velocità: le due
   deformazioni si sommano e il listino sembra sbandare. */
body.motore-vivo [data-moto="spinta"] {
  /* Corsa d'ingresso. Tenuta corta di proposito: era 60vw, tarata su
     colonne a tutta larghezza. Ora le liste stanno affiancate e sono
     meta' larghe, quindi una corsa lunga porta il testo cosi' lontano
     dal proprio riquadro che al minimo intoppo resta tagliato fuori.
     Il movimento si legge lo stesso, e non c'e' piu' niente che possa
     restare invisibile. */
  --corsa: 22vw;
  opacity: calc(var(--p, 0) * 1.6 + .05);
  transform:
    translateX(calc((1 - var(--p, 0)) * var(--verso, 1) * var(--corsa)))
    rotate(calc((1 - var(--p, 0)) * var(--verso, 1) * -8deg));
}

/* CARTA — il movimento strano che volevi.
   L'elemento è sdraiato sul tavolo (rotateX 62°) e si alza in
   prospettiva mentre entra. Dentro la STESSA catena di transform
   ci sono --tx e --ty, che il JS muove col puntatore: così la card
   può alzarsi dal tavolo E seguire il mouse nello stesso momento. */
body.motore-vivo [data-moto="carta"] {
  transform-origin: 50% 130%;
  opacity: calc(var(--p, 0) * 1.5 + .05);
  transform:
    perspective(900px)
    translateY(calc((1 - var(--p, 0)) * 60px))
    rotateX(calc((1 - var(--p, 0)) * 62deg + var(--tx, 0deg)))
    rotateY(var(--ty, 0deg))
    rotate(calc((1 - var(--p, 0)) * var(--verso, 1) * 9deg))
    scale(calc(.82 + var(--p, 0) * .18));
}

/* LASTRA — la foto della storia entra storta e si assesta */
body.motore-vivo [data-moto="lastra"] {
  opacity: calc(var(--p, 0) * 1.4 + .05);
  transform:
    translateY(calc((1 - var(--p, 0)) * 45px))
    rotate(calc((1 - var(--p, 0)) * -7deg))
    scale(calc(.76 + var(--p, 0) * .24));
}

/* ---------- 18.5 IL BOTTONE MAGNETICO ---------- */
body.js-moto .bottone {
  transform: perspective(600px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
}

/* ---------- 18.6 SICUREZZA ----------
   Le transform in prospettiva su elementi larghi possono generare
   barre di scorrimento orizzontali durante il movimento. */
body.js-moto { overflow-x: clip; }

/* =========================================================
   19. LA BOTTIGLIA, IL CURSORE, L'ANCORAGGIO, IL VIRAGGIO
   Tutto agganciato a body.js-moto: senza JavaScript non esiste
   nulla di tutto questo e il sito resta perfettamente utilizzabile.
   ========================================================= */

/* ---------- 19.1 LA BOTTIGLIA ----------
   Sostituisce il vecchio misuratore. Sta a destra, si riempie di
   granata mentre scorri e il vino continua a ballare quando ti fermi. */
body.js-moto .bottiglia {
  position: fixed;
  /* La bottiglia e' fissa sul bordo destro mentre il contenuto arriva
     fino al margine del contenitore: con la larghezza di prima i due
     si incrociavano, e si vedeva sul riquadro della mappa e sul campo
     di ricerca della pagina vini. Stretta e accostata al bordo non
     tocca piu' niente a nessuna larghezza, e come indicatore di
     avanzamento funziona uguale. */
  right: clamp(6px, 1vw, 16px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(34px, 3vw, 48px);
  z-index: 820;
  pointer-events: none;
  display: none;              /* su telefono comanda il filo, vedi 19.2 */
}
body.js-moto .bottiglia svg { width: 100%; height: auto; display: block; }

/* Il vino: un blocco molto piu' largo della bottiglia, ritagliato dalla
   sagoma. Essendo largo, può inclinarsi senza mai scoprire gli angoli.
   transform-box: view-box = le coordinate della transform sono quelle
   del disegno, non del riquadro dell'elemento. Senza questa riga,
   l'origine della rotazione finisce nel posto sbagliato. */
body.js-moto .bottiglia__massa {
  transform-box: view-box;
  transform-origin: 32px 150px;
  transform:
    translateY(calc((1 - var(--livello, 0)) * 212px))
    rotate(var(--sbandata, 0deg));
}

/* Due onde a velocità diverse: una sola sembra un disegno che scorre,
   due sovrapposte sembrano un liquido. --amp le fa gonfiare quando il
   vino sbatte. */
body.js-moto .bottiglia__onda {
  transform-box: view-box;
  transform-origin: 32px 12px;
  --amp: calc(1 + var(--forza, 0) * 1.4);
}
body.js-moto .bottiglia__onda--fondo {
  fill: #8E2033;
  opacity: .6;
  animation: onda 5.2s linear infinite reverse;
}
body.js-moto .bottiglia__onda--sopra {
  fill: var(--granata);
  animation: onda 3.4s linear infinite;
}
/* -152px = due lunghezze d'onda esatte: il ciclo si richiude senza salto */
@keyframes onda {
  from { transform: translateX(0)       scaleY(var(--amp, 1)); }
  to   { transform: translateX(-152px)  scaleY(var(--amp, 1)); }
}

/* Il vetro cambia colore col viraggio: su travertino un contorno
   chiaro sparirebbe. */
body.js-moto .bottiglia__vetro {
  fill: none;
  stroke: rgba(231, 224, 210, .5);
  stroke: color-mix(in oklab, rgba(231,224,210,.55), rgba(26,23,18,.65) calc(var(--vira, 0) * 100%));
  stroke-width: 1.6;
}
body.js-moto .bottiglia__riflesso {
  fill: none;
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 2.5;
  stroke-linecap: round;
}
body.js-moto .bottiglia__tappo {
  fill: var(--ambra);
  opacity: .85;
}

/* ---------- 19.2 IL FILO (telefono) ----------
   Sotto i 768px la bottiglia finirebbe sopra i prezzi allineati a
   destra. Stessa informazione, tre pixel, zero collisioni. */
body.js-moto .filo {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  z-index: 820;
  pointer-events: none;
  background: rgba(231, 224, 210, .12);
}
body.js-moto .filo__vino {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #8E2033, var(--granata));
  box-shadow: 0 0 10px rgba(142, 32, 51, .7);
}

/* ---------- 19.3 IL CURSORE E LA SCIA ----------
   Solo su puntatori fini. Su un touch screen non c'è un cursore da
   sostituire, e nascondere quello di sistema farebbe solo danni. */
@media (hover: hover) and (pointer: fine) {
  body.js-moto.cursore-attivo,
  body.js-moto.cursore-attivo * { cursor: none; }
}

.cursore {
  position: fixed;
  top: 0; left: 0;
  z-index: 950;
  pointer-events: none;
  will-change: transform;
  transition: opacity .25s;
}
.cursore__anello,
.cursore__nucleo {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* L'anello è il bicchiere, il nucleo è la goccia dentro */
.cursore__anello {
  width: 30px; height: 30px;
  border: 1px solid rgba(227, 144, 47, .75);
  transition: width .3s cubic-bezier(.16,1,.3,1),
              height .3s cubic-bezier(.16,1,.3,1),
              border-color .3s;
}
.cursore__nucleo {
  width: 6px; height: 6px;
  background: var(--granata);
  box-shadow: 0 0 12px rgba(142, 32, 51, .9);
}
.cursore--presa .cursore__anello { width: 56px; height: 56px; border-color: var(--verdeacqua); }
.cursore--giu   .cursore__anello { width: 20px; height: 20px; }
.cursore--fuori { opacity: 0; }

/* Le gocce: forma leggermente a lacrima, non cerchi perfetti.
   Partono a opacità 0 e sono l'animazione JS ad accenderle. */
.goccia {
  position: fixed;
  z-index: 940;
  pointer-events: none;
  opacity: 0;
  border-radius: 50% 50% 55% 55% / 60% 60% 42% 42%;
  background: radial-gradient(circle at 35% 30%, #A32B40, var(--granata) 70%);
}

/* ---------- 19.4 LA CARRELLATA ANCORATA ----------
   Lo sticky è tutto CSS. Il JS traduce solo l'avanzamento verticale
   in spostamento laterale, scrivendolo in --scorri. */
body.js-moto.appeso .ancora__schermo {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
body.js-moto.appeso .carrellata {
  overflow: visible;
  scroll-snap-type: none;
  padding-block: 0;
  will-change: transform;
  transform:
    translateX(var(--scorri, 0px))
    skewY(calc(var(--vel, 0) * .8deg));
}
body.js-moto.appeso .fotogramma { flex: 0 0 32vw; }

/* Le foto inseguono il puntatore anche quando non hanno un data-moto */
body.js-moto .fotogramma {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
}

/* ---------- 19.5 IL VIRAGGIO NOTTE → TRAVERTINO ----------
   Il fondo della pagina non stacca piu' di netto: vira. Con lui virano
   la grana, la testata, il logo e il vetro della bottiglia.
   color-mix mescola due colori in percentuale: la percentuale è --vira,
   che il JS muove fra 0 e 1. La riga sopra ogni color-mix è la riserva
   per i browser che non lo supportano. */
body.js-moto .fondale {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--pece);
  background: color-mix(in oklab, var(--pece), var(--travertino) calc(var(--vira, 0) * 100%));
}
body.js-moto .storia { background: transparent; }

body.js-moto .grana { opacity: calc(.16 - var(--vira, 0) * .1); }

/* La grana è l'ULTIMO strato sopra tutto, aperture comprese: a .16 si
   mangia una parte di qualunque schiarita. Sopra le due foto grandi la
   tengo piu' leggera, cosi' alzare --home-luce si vede davvero. */
.grana { opacity: .10; }

body.js-moto .testata__logo img { filter: brightness(calc(1 - var(--vira, 0) * .82)); }
body.js-moto .testata__nav a {
  color: color-mix(in oklab, var(--travertino), #14110C calc(var(--vira, 0) * 100%));
}
body.js-moto .testata.compatta {
  background: color-mix(in oklab, rgba(10,14,12,.82), rgba(231,224,210,.86) calc(var(--vira, 0) * 100%));
}

/* ---------- 19.6 BREAKPOINT ---------- */
@media (min-width: 768px) {
  body.js-moto .bottiglia { display: block; }
  body.js-moto .filo { display: none; }
}

/* ---------- 19.7 LA CARRELLATA SU TELEFONO ----------
   Qui non si ancora: si trascina col dito. Il problema di uno scorrimento
   laterale su telefono non è farlo funzionare, è farlo NOTARE.
   Tre segnali, due dei quali stanno qui. */
@media (max-width: 899px) {

  /* La foto successiva resta tagliata a metà sul bordo: un contenuto
     interrotto dice "continua" molto meglio di qualsiasi freccia. */
  body.js-moto .carrellata { scroll-snap-type: x proximity; }
  body.js-moto .fotogramma { flex: 0 0 66%; }

  /* E il bordo destro sfuma invece di tagliare netto.
     mask-image nasconde progressivamente i pixel: un bordo netto sembra
     la fine del contenuto, uno sfumato sembra che ci sia dell'altro. */
  body.js-moto .carrellata {
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  }

  /* Su schermo stretto 60vw di corsa sono un terzo di pagina in piu':
     la riduco a 35vw. Il movimento resta netto, l'ingombro no. */
  body.motore-vivo [data-moto="spinta"] { --corsa: 30vw; }

  /* L'avviso, aggiunto dal JS solo quando il trascinamento è attivo:
     scriverlo nell'HTML significherebbe mostrarlo anche su desktop,
     dove è falso. */
  .trascina {
    margin: -.6rem 0 1.4rem;
    color: var(--verdeacqua);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .64rem;
  }
}

/* =========================================================
   20. MESCITA E ASPORTO
   Il vecchio listino con i prezzi al calice è sparito: non c'erano
   prezzi veri da mettere, e una lista finta su un sito vero è un danno.
   Al suo posto due numeri grandi e due elenchi di categorie.
   ========================================================= */

/* La cifra: il numero fa il lavoro, la didascalia lo spiega.
   È l'unico posto del sito dove uso il display alla sua dimensione
   massima fuori dall'apertura, e serve a dare un secondo picco visivo
   a metà pagina. */
.cifra {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: -.6rem 0 2.5rem;
}
.cifra__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 15vw, 9rem);
  line-height: .8;
  color: var(--ambra);
  letter-spacing: -.02em;
}
.cifra__t {
  font-family: var(--font-dati);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--travertino-2);
  max-width: 14ch;
  line-height: 1.6;
}

/* L'elenco: stessa logica del vecchio listino, righe e filetti.
   Nome a sinistra, descrizione a destra. */
.elenco { border-top: var(--bordo); overflow: clip; }
.elenco__voce {
  display: grid;
  gap: .3rem;
  padding: 1.2rem 0;
  border-bottom: var(--bordo);
  transition: background .3s, padding-left .3s;
}
.elenco__voce:hover { background: rgba(227,144,47,.06); padding-left: .8rem; }
.elenco__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.05;
  text-transform: uppercase;
}
.elenco__testo { color: var(--fumo); font-size: .98rem; }

/* Lo stacco fra le due metà: un filetto e molta aria.
   Due titoli ravvicinati senza respiro sembrerebbero un errore. */
/* Su schermo stretto le due colonne si impilano e serve uno stacco:
   due titoli ravvicinati senza respiro sembrerebbero un errore.
   Da 900px lo stacco diventa un filetto verticale, vedi sotto. */
.asporto {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(231, 224, 210, .22);
}

@media (min-width: 900px) {
  /* Le due metà affiancate. align-items: start le tiene ancorate in alto
     anche quando un elenco è piu' lungo dell'altro: senza, la colonna
     corta si centrerebbe verticalmente e i due titoli non sarebbero
     piu' allineati. */
  .carta__griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  /* Lo stacco orizzontale diventa un filetto verticale fra le colonne */
  .asporto {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: 4rem;
    border-left: 1px solid rgba(231, 224, 210, .22);
  }

  /* Affiancate, le colonne sono metà larghe: il nome sopra e la
     descrizione sotto tornano a leggersi meglio di due colonne strette. */
  .elenco__voce { padding: 1.3rem 0; }
  .elenco__nome { font-size: 1.9rem; }
  .cifra { gap: 0 1.2rem; }
  .cifra__n { font-size: clamp(3.5rem, 7vw, 6rem); }
}

/* Molto larghi: si può dare piu' aria fra le colonne */
@media (min-width: 1280px) {
  .carta__griglia { gap: 5.5rem; }
  .asporto { padding-left: 5.5rem; }
  .elenco__nome { font-size: 2.1rem; }
}

/* Movimento: gli elenchi usano la stessa spinta del vecchio listino,
   le cifre entrano come card. Assegnati dal JS (registro attori). */

/* =========================================================
   21. SOCIAL E WHATSAPP
   ========================================================= */

/* ---------- 21.1 I PULSANTI SOCIAL ----------
   Icone SVG inline: niente file da scaricare, niente libreria di icone,
   e con fill: currentColor prendono da sole il colore del testo, quindi
   seguono il viraggio notte → travertino senza una riga in piu'. */
.social { display: inline-flex; gap: .55rem; align-items: center; }
.social__b {
  display: grid;
  place-items: center;
  /* Erano 32px con opacita' .75 e un bordo quasi invisibile: si vedevano
     a malapena. Ingranditi e portati a piena opacita', con il bordo piu'
     marcato. L'ambra resta per il passaggio del mouse: se fossero gia'
     arancioni a riposo, in testata ruberebbero l'occhio al logo. */
  width: 38px; height: 38px;
  border: 1px solid rgba(231, 224, 210, .42);
  border-radius: 50%;
  color: inherit;
  opacity: 1;
  transition: opacity .25s, border-color .25s, transform .25s, background .25s;
}
.social__b svg { width: 17px; height: 17px; fill: currentColor; }
.social__b:hover {
  opacity: 1;
  border-color: var(--ambra);
  color: var(--ambra);
  transform: translateY(-2px);
}

/* In testata staccano dalle voci di menu con un filetto verticale */
.testata__nav .social {
  margin-left: .7rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(231, 224, 210, .18);
}
/* Sotto i 560px il menu andrebbe a capo: lì i social restano solo nel
   piede, dove c'è spazio. Meglio nasconderli che spezzare la testata. */
@media (max-width: 559px) {
  .testata__nav .social { display: none; }
}

.social--piede { margin-top: .4rem; }
/* Nel piede c'e' piu' spazio e sono l'ultimo richiamo della pagina:
   li tengo ancora piu' grandi. */
.social--piede .social__b { width: 44px; height: 44px; }
.social--piede .social__b svg { width: 20px; height: 20px; }

/* ---------- 21.2 IL PULSANTE WHATSAPP ----------
   Fisso in basso a destra, sempre visibile. Usa l'ambra del sito e non
   il verde di WhatsApp: un bollino verde su questa palette sarebbe un
   corpo estraneo, e il gesto si riconosce lo stesso dall'icona. */
.wa {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + env(safe-area-inset-bottom, 0px));
  z-index: 930;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ambra);
  color: #14110C;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.wa svg { width: 28px; height: 28px; fill: currentColor; position: relative; z-index: 1; }
.wa:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(227, 144, 47, .45); }
.wa:active { transform: scale(.96); }

/* L'onda: un secondo cerchio che si espande e svanisce sotto il pulsante.
   È dietro (z-index -1) e non intercetta i click. */
.wa__onda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ambra);
  z-index: -1;
  animation: pulsazione 2.4s cubic-bezier(.24,.6,.4,1) infinite;
}
@keyframes pulsazione {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Sopra i 768px il pulsante convive con la bottiglia, che sta a destra
   a metà altezza: nessuna collisione. Sotto, la bottiglia diventa il
   filo sul bordo e il pulsante ha campo libero. */
@media (max-width: 480px) {
  .wa { width: 52px; height: 52px; }
  .wa svg { width: 26px; height: 26px; }
}

/* Il pulsante è un invito, non un lampeggiatore: chi ha chiesto meno
   animazioni lo vede fermo. */
@media (prefers-reduced-motion: reduce) {
  .wa__onda { animation: none; opacity: 0; }
}

/* Il cursore personalizzato lo tratta come cliccabile */
body.js-moto.cursore-attivo .wa,
body.js-moto.cursore-attivo .social__b { cursor: none; }

/* =========================================================
   22. MAPPA E COOKIE
   ========================================================= */

/* ---------- 22.1 LA MAPPA ----------
   Riquadro quadrato, terza colonna della sezione Dove. Prima del consenso
   è un'anteprima con l'invito a caricarla; dopo contiene l'iframe.

   Il filtro è la parte che conta: una mappa di Google è bianca e
   coloratissima, e in mezzo a questa palette sarebbe un buco di luce.
   invert + hue-rotate la portano a una mappa scura senza doverne
   disegnare una a mano con le API a pagamento. */
.mappa {
  position: relative;
  aspect-ratio: 1 / 1;      /* quadrata, a qualsiasi larghezza */
  border: var(--bordo);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2A322C 0%, #161B18 100%);
  display: grid;
  place-items: center;
}
.mappa iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: invert(.92) hue-rotate(185deg) saturate(.5) contrast(.92);
}
.mappa--viva .mappa__attesa,
.mappa--viva .mappa__velo { display: none; }

/* Velo sopra la mappa: la riporta nella luce del sito.
   pointer-events: none, altrimenti impedirebbe di trascinarla. */
.mappa__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 50%, transparent 40%, rgba(10,14,12,.5) 100%);
}
.mappa__attesa {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1.4rem;
  max-width: 26ch;
}
.mappa__testo {
  color: var(--travertino-2);
  font-size: .92rem;
  margin-bottom: 1rem;
}
.mappa__attesa .nota { margin-top: .9rem; }
.mappa__attesa .nota a { color: var(--verdeacqua); }

/* Versione compatta del bottone: nel riquadro quadrato quello
   a grandezza piena occuperebbe troppo. */
.bottone--mini {
  padding: .65rem 1.1rem;
  font-size: .62rem;
  letter-spacing: .12em;
}

/* ---------- 22.2 IL BANNER COOKIE ----------
   In basso a sinistra, non a tutta larghezza: un pannello che copre
   mezzo schermo è il motivo per cui la gente clicca "accetta" senza
   leggere. Lascia libero l'angolo destro, dov'è il WhatsApp. */
.cookie {
  position: fixed;
  left: clamp(12px, 3vw, 24px);
  bottom: calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-bottom, 0px));
  z-index: 960;
  width: min(420px, calc(100vw - 24px));
  padding: 1.3rem;
  background: rgba(19, 25, 22, .97);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(231, 224, 210, .18);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  animation: saleCookie .5s cubic-bezier(.16,1,.3,1) both;
}
.cookie[hidden] { display: none; }
@keyframes saleCookie {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.cookie__testo strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.cookie__testo p {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--travertino-2);
  margin-bottom: 1.1rem;
}
.cookie__testo a { color: var(--ambra); }
.cookie__tasti { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie .bottone { padding: .75rem 1.2rem; font-size: .66rem; }

/* Due varianti del bottone. I due tasti hanno peso visivo diverso ma
   restano entrambi leggibili: un "rifiuta" sbiadito al punto da non
   vedersi è una scelta finta. */
.bottone--pieno {
  background: var(--ambra);
  color: #14110C;
  border-color: var(--ambra);
}
.bottone--pieno:hover { background: #F0A044; border-color: #F0A044; }
.bottone--fantasma {
  border-color: rgba(231, 224, 210, .35);
  color: var(--travertino-2);
}
.bottone--fantasma:hover {
  background: transparent;
  border-color: var(--travertino);
  color: var(--travertino);
}

/* Sotto i 560px il banner copre la larghezza e i tasti si dividono
   lo spazio: su schermo stretto due bottoni affiancati stretti sono
   piu' difficili da centrare col pollice. */
@media (max-width: 559px) {
  .cookie { left: 12px; right: 12px; width: auto; }
  .cookie__tasti .bottone { flex: 1 1 auto; text-align: center; }
}

/* Il piede ha una voce in piu': quattro colonne invece di tre */
@media (min-width: 768px) {
  .piede__griglia { grid-template-columns: repeat(4, auto); gap: 1.5rem; }
}
.piede a { color: var(--travertino-2); }
.piede a:hover { color: var(--ambra); }

/* =========================================================
   23. PAGINA LEGALE
   Nessun JavaScript, nessuna animazione: una pagina che si deve
   leggere e basta. Larghezza limitata a 68 caratteri, che è la
   misura oltre la quale l'occhio fatica a ritrovare la riga dopo.
   ========================================================= */
.legale { background: var(--pece); }
.testo-legale {
  padding: 9rem 0 5rem;
  max-width: 68ch;
}
.testo-legale h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-transform: uppercase;
  margin: 2.8rem 0 .9rem;
  color: var(--travertino);
}
.testo-legale p { color: var(--travertino-2); }
.testo-legale strong { color: var(--travertino); font-weight: 400; }
.testo-legale a { color: var(--ambra); }
.testo-legale .titolo { margin-bottom: 2.5rem; }
.testo-legale .bottone { margin-top: 2.5rem; }

/* Il riquadro promemoria: deve essere impossibile da non vedere,
   perché va tolto prima di pubblicare. */
.avviso {
  border-left: 3px solid var(--ambra);
  background: rgba(227, 144, 47, .08);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.5rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--travertino-2);
}
.avviso strong { display: block; color: var(--ambra); margin-bottom: .3rem; }


/* La sezione Dove su schermi larghi: indirizzo, orari e mappa in fila.
   La mappa prende la colonna piu' stretta perché è quadrata: darle
   la stessa larghezza del testo la renderebbe sproporzionata in altezza. */
@media (min-width: 1100px) {
  .dove__griglia {
    grid-template-columns: 1.2fr .9fr minmax(240px, .85fr);
    gap: 3.5rem;
    align-items: start;
  }
  .dove__griglia .mappa { grid-column: auto; max-width: none; }
}


/* =========================================================
   24. RETE DI SICUREZZA
   -----------------------------------------------------------------
   Le animazioni di entrata portano gli elementi a opacità negativa
   finché il JavaScript non calcola il loro avanzamento. Se il motore
   non parte — errore, browser vecchio, script bloccato da un'estensione
   — quegli elementi resterebbero invisibili per sempre, e con loro
   mezzo sito.

   La classe .motore-vivo viene aggiunta SOLO dopo che il motore ha
   completato un giro riuscito. Fino a quel momento vale questo blocco:
   tutto visibile, tutto fermo, niente di nascosto.

   Regola generale: un contenuto non deve mai dipendere dal JavaScript
   per essere visibile. Il JavaScript aggiunge movimento, non esistenza.
   ========================================================= */
body:not(.motore-vivo) [data-moto] {
  opacity: 1 !important;
  transform: none !important;
}
body:not(.motore-vivo) .lettera,
body:not(.motore-vivo) .lettera > i {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Titoli di film e libri in corsivo: sul travertino chiaro il corsivo
   del Newsreader si legge bene e distingue le opere dal resto. */
.storia__testo em { font-style: italic; color: #4A4136; }

/* =========================================================
   25. LA CANTINA — pagina delle etichette (vini.html)
   -----------------------------------------------------------------
   Le schede le costruisce vini.js leggendo vini-dati.js. Qui c'è
   solo come si vedono. Mobile-first come tutto il resto.
   ========================================================= */

/* ---------- 25.1 APERTURA ----------
   Compatta e non a tutto schermo come la home: chi arriva su questa
   pagina vuole vedere i vini, non un'altra copertina. */
.cantina__apertura {
  position: relative;
  padding: 8rem 0 2.5rem;
  overflow: hidden;
}

/* La scena è facoltativa: senza il file img/vini-hero.webp questa
   sezione resta nera come prima. Non è una fascia a tutto schermo
   come in home — qui si deve arrivare presto alle bottiglie. */
.cantina__scena {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cantina__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(.4) contrast(1.15) brightness(var(--vini-luce)) blur(1px);
}
/* Il JS mette questa classe se il file non c'è: resta lo sfondo scuro */
.cantina__apertura.senza-foto .cantina__foto { display: none; }

/* Il velo. Il terzo gradiente è il piu' importante: scurisce la META'
   SINISTRA, cioè dove passa la scritta LE ETICHETTE. Senza, il titolo
   chiaro finirebbe sopra le etichette chiare delle bottiglie.
   In basso chiude quasi opaco, cosi' la foto non taglia di netto
   contro la barra dei filtri. */
.cantina__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,14,12, calc(.78 * var(--vini-velo))) 0%,
      rgba(10,14,12, calc(.50 * var(--vini-velo))) 40%,
      rgba(10,14,12, calc(.97 * var(--vini-velo))) 100%),
    linear-gradient(140deg,
      rgba(18,45,33, calc(.45 * var(--vini-velo))) 0%,
      rgba(10,14,12, calc(.30 * var(--vini-velo))) 100%),
    linear-gradient(90deg,
      rgba(10,14,12, calc(.85 * var(--vini-velo))) 0%,
      rgba(10,14,12, calc(.45 * var(--vini-velo))) 48%,
      transparent 85%);
}

/* Il testo sta sopra la scena */
.cantina__apertura .contenitore { position: relative; z-index: 1; }

/* Con la foto serve piu' respiro: il testo appoggiato sul bordo
   dell'immagine sembra schiacciato. */
.cantina__apertura:not(.senza-foto) { padding-bottom: 4rem; }
.cantina__guida {
  max-width: 52ch;
  color: var(--travertino-2);
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

/* ---------- 25.2 FILTRI E RICERCA ----------
   Restano appiccicati in alto mentre scorri: con molte etichette,
   dover risalire ogni volta per cambiare filtro è una penitenza.
   Il top è l'altezza della testata compatta. */
.filtri {
  position: sticky;
  top: 0;
  z-index: 650;
  padding: .9rem 0;
  background: rgba(10, 14, 12, .92);
  backdrop-filter: blur(12px);
  border-block: var(--bordo);
}
.filtri__dentro {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* I filtri scorrono di lato su telefono invece di andare a capo:
   due righe di pulsanti mangerebbero mezzo schermo. La sfumatura
   sul bordo destro dice che ce n'è dell'altro. */
.filtri__tipi {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.filtri__tipi::-webkit-scrollbar { display: none; }

.filtro {
  flex: 0 0 auto;
  font-family: var(--font-dati);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  background: transparent;
  border: 1px solid rgba(231, 224, 210, .22);
  color: var(--travertino-2);
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.filtro:hover { border-color: var(--ambra); color: var(--ambra); }
.filtro--attivo {
  background: var(--ambra);
  border-color: var(--ambra);
  color: #14110C;
}
/* Il conteggio in tono minore: è un'informazione di servizio,
   non deve competere col nome della categoria. */
.filtro__n { opacity: .55; margin-left: .35em; }
.filtro--attivo .filtro__n { opacity: .7; }

.cerca {
  position: relative;
  display: flex;
  align-items: center;
}
.cerca__lente {
  position: absolute;
  left: .85rem;
  width: 15px; height: 15px;
  fill: var(--fumo);
  pointer-events: none;
}
.cerca__campo {
  width: 100%;
  font-family: var(--font-dati);
  font-size: .78rem;
  padding: .75rem .9rem .75rem 2.4rem;
  background: rgba(231, 224, 210, .05);
  border: 1px solid rgba(231, 224, 210, .18);
  color: var(--travertino);
  border-radius: 0;
  -webkit-appearance: none;   /* iOS arrotonda i campi di ricerca da solo */
          appearance: none;
  transition: border-color .25s, background .25s;
}
.cerca__campo::placeholder { color: var(--fumo); }
.cerca__campo:focus {
  outline: none;
  border-color: var(--ambra);
  background: rgba(231, 224, 210, .08);
}

/* ---------- 25.3 LA GRIGLIA ---------- */
.cantina { padding: 2.5rem 0 5rem; }

.cantina__conteggio {
  font-family: var(--font-dati);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-bottom: 1.8rem;
}

.vini {
  display: grid;
  gap: 1px;                              /* i gap mostrano lo sfondo: */
  background: rgba(231, 224, 210, .13);  /* filetti sottili senza bordi */
}

/* ---------- 25.4 LA SCHEDA ----------
   Foto a sinistra, testo a destra: su telefono una griglia di schede
   verticali costringerebbe a scorrere all'infinito per quattro vini.
   Affiancate ne stanno il doppio nello stesso spazio. */
.vino {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1.1rem;
  padding: 1.3rem 1rem;
  background: var(--pece);
  transition: background .3s;
}
.vino[hidden] { display: none; }
.vino:hover { background: var(--pece-alto); }

.vino__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
    linear-gradient(165deg, #2A322C 0%, #141A16 100%);
  display: grid;
  place-items: center;
}
.vino__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* La bottiglia disegnata che sostituisce la foto mancante:
   non riempie il riquadro, ci sta dentro come un oggetto su un fondo. */
.vino__sagoma { height: 76%; width: auto; }

.vino__fascetta {
  position: absolute;
  left: 0; top: .6rem;
  font-family: var(--font-dati);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ambra);
  color: #14110C;
  padding: .25rem .5rem;
}

.vino__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.vino__cantina {
  font-size: .95rem;
  color: var(--travertino-2);
  margin-bottom: .5rem;
}

/* Annata, zona e tipologia: dati, quindi monospaziati e separati
   da filetti verticali invece che da virgole. */
.vino__dati {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  font-family: var(--font-dati);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verdeacqua);
  margin-bottom: .7rem;
}
.vino__dato + .vino__dato::before {
  content: '';
  display: inline-block;
  width: 1px; height: .8em;
  background: rgba(231, 224, 210, .25);
  margin-right: .7rem;
  vertical-align: -.1em;
}
.vino__dato--tipo { color: var(--fumo); }

.vino__note {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--fumo);
  margin-bottom: .9rem;
}

/* La chiamata all'azione di ogni scheda. Discreta a riposo, ambra
   al passaggio: con molte schede, tanti pulsanti pieni in colonna
   diventerebbero un muro arancione. */
.vino__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-dati);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .55rem .9rem;
  border: 1px solid rgba(231, 224, 210, .25);
  color: var(--travertino-2);
  transition: border-color .25s, color .25s, background .25s;
}
.vino__cta svg { width: 14px; height: 14px; fill: currentColor; }
.vino__cta:hover {
  border-color: var(--ambra);
  color: var(--ambra);
  background: rgba(227, 144, 47, .07);
}

/* I vini in evidenza: un filetto ambra sul bordo sinistro.
   Basta quello — una scheda con sfondo diverso romperebbe la griglia. */
.vino--evidenza { box-shadow: inset 3px 0 0 var(--ambra); }

/* ---------- 25.5 ENTRATA IN SCENA ----------
   Le schede partono VISIBILI. La classe .vini-pronti arriva solo
   quando vini.js ha costruito la griglia: se lo script non parte,
   questo blocco non si attiva e le schede restano semplicemente
   ferme al loro posto. Mai contenuto invisibile per colpa del JS. */
body.vini-pronti .vino {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--n, 0) * 50ms);
}
body.vini-pronti .vino--dentro {
  opacity: 1;
  transform: none;
}

/* ---------- 25.6 NESSUN RISULTATO ---------- */
.vuoto {
  padding: 3rem 1rem;
  text-align: center;
  border: var(--bordo);
}
.vuoto[hidden] { display: none; }
.vuoto__testo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.vuoto .nota { max-width: 44ch; margin: 0 auto 1.6rem; }

/* ---------- 25.7 L'INVITO FINALE ---------- */
.invito {
  padding: 4rem 0 6rem;
  border-top: var(--bordo);
}
.invito__testo {
  max-width: 46ch;
  color: var(--travertino-2);
  margin-bottom: 2rem;
}
.invito__tasti {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.8rem;
}

/* ---------- 25.8 BREAKPOINT ---------- */

/* 560px: filtri e ricerca stanno sulla stessa riga */
@media (min-width: 560px) {
  .filtri__dentro {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .filtri__tipi { flex: 1 1 auto; min-width: 0; }
  .cerca { flex: 0 0 240px; }
  .vino { grid-template-columns: 110px 1fr; padding: 1.5rem 1.2rem; }
  .vino__nome { font-size: 1.7rem; }
}

/* 900px: due colonne di schede.
   I gap a 1px formano la griglia di filetti anche in orizzontale. */
@media (min-width: 900px) {
  .cantina__apertura { padding: 10rem 0 3rem; }
  .vini { grid-template-columns: 1fr 1fr; }
  .vino { grid-template-columns: 120px 1fr; padding: 1.7rem 1.5rem; }
  .cerca { flex: 0 0 280px; }
}

/* 1280px: tre colonne. Oltre questa misura le schede diventerebbero
   troppo strette per il testo delle note. */
@media (min-width: 1280px) {
  .vini { grid-template-columns: repeat(3, 1fr); }
  .vino { grid-template-columns: 110px 1fr; gap: 1.2rem; }
  .vino__nome { font-size: 1.55rem; }
}

/* La pagina non ha la sezione Storia, quindi il viraggio non parte
   mai: il fondale resterebbe fermo sul suo valore iniziale, che è
   gia' quello giusto. Nessuna regola serve. */

/* Chi ha chiesto meno animazioni vede tutto fermo e tutto presente. */
@media (prefers-reduced-motion: reduce) {
  body.vini-pronti .vino {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 25.9 TESTO SOLO PER I LETTORI DI SCHERMO ----------
   Nasconde senza spostare. Serve per le etichette dei campi: il campo
   di ricerca ha gia' il suo invito scritto dentro, ma un <input> senza
   <label> collegata non viene annunciato da chi naviga ad ascolto.

   NON si puo' usare .salta per questo. Quella classe nasconde con
   position: fixed e top: -100px, e un elemento con backdrop-filter
   (la barra dei filtri) diventa il riferimento per i figli fixed:
   il -100px finisce calcolato dalla barra invece che dalla pagina,
   e l'etichetta ricompare in mezzo al testo.

   Qui invece: riquadro di un pixel, ritagliato a zero. Resta nel
   flusso, non si sposta, e nessun contenitore puo' spostarlo. */
.solo-voce {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   26. LA NOTA DEL WHATSAPP
   -----------------------------------------------------------------
   Serve a un problema concreto: il locale non prende prenotazioni,
   e senza avviso il pulsante le attira. Dirlo PRIMA che la persona
   scriva evita il messaggio inutile da una parte e la risposta
   dall'altra.

   Sta sopra il pulsante, non di lato: a destra non c'e' spazio e a
   sinistra finirebbe sopra il banner dei cookie su telefono.
   ========================================================= */
.wa__nota {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + env(safe-area-inset-bottom, 0px) + 68px);
  z-index: 929;
  width: min(252px, calc(100vw - 32px));
  padding: .85rem 2rem .85rem .95rem;
  background: rgba(19, 25, 22, .97);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 144, 47, .45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--travertino-2);
  animation: saleNota .45s cubic-bezier(.16,1,.3,1) both;
}
.wa__nota[hidden] { display: none; }
.wa__nota strong { color: var(--ambra); font-weight: 400; }

/* La codina che punta al pulsante: due triangoli sovrapposti, quello
   sotto fa da bordo. Senza, il riquadro sembra staccato dal pulsante. */
.wa__nota::before,
.wa__nota::after {
  content: '';
  position: absolute;
  right: 18px;
  border: 8px solid transparent;
  width: 0; height: 0;
}
.wa__nota::before {
  bottom: -17px;
  border-top-color: rgba(227, 144, 47, .45);
}
.wa__nota::after {
  bottom: -15px;
  border-top-color: rgba(19, 25, 22, .97);
}

@keyframes saleNota {
  from { transform: translateY(10px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* La crocetta: area di tocco da 32px, perche' un bersaglio piu' piccolo
   sul telefono si manca. */
.wa__chiudi {
  position: absolute;
  top: 2px; right: 2px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--fumo);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s;
}
.wa__chiudi:hover { color: var(--travertino); }

@media (prefers-reduced-motion: reduce) {
  .wa__nota { animation: none; }
}

body.js-moto.cursore-attivo .wa__chiudi { cursor: none; }


/* =========================================================
   27. LA GALLERIA SU TELEFONO — I SEGNALI
   Su schermo stretto le foto si trascinano col dito, e va detto.
   La scritta e i puntini li aggiunge script.js solo quando servono
   davvero: scriverli nell'HTML significherebbe mostrarli anche su
   desktop, dove non si trascina niente.
   ========================================================= */

/* La freccia che accompagna la scritta: un movimento piccolo e lento,
   quanto basta perche' l'occhio lo prenda senza esserne disturbato. */
.trascina__freccia {
  display: inline-block;
  animation: indicaLato 1.7s ease-in-out infinite;
}
@keyframes indicaLato {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* I puntini: dicono due cose in un colpo solo, quante foto ci sono
   e a che punto sei. Su un carosello e' il segnale che tutti leggono
   senza doverci pensare. */
.puntini {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: -.6rem;
  padding-bottom: 1.6rem;
}
.puntini span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(231, 224, 210, .28);
  transition: background .3s, transform .3s;
}
.puntini .puntini--ora {
  background: var(--ambra);
  transform: scale(1.4);
}

/* Da 900px la carrellata si ancora allo scroll verticale: li' i
   puntini non vogliono dire niente. */
@media (min-width: 900px) {
  .puntini { display: none; }
}

/* La scritta era verdeacqua, poco contrastata per essere un'istruzione.
   In ambra si legge, ed e' il colore che nel sito significa "qui si fa
   qualcosa". */
@media (max-width: 899px) {
  .trascina { color: var(--ambra); }
}

@media (prefers-reduced-motion: reduce) {
  .trascina__freccia { animation: none; }
}

/* Una nota che deve staccare dalle altre: il filetto ambra a sinistra
   la rende una cosa da leggere, non un dettaglio di servizio. */
.nota--punto {
  margin-top: 1.2rem;
  padding-left: .8rem;
  border-left: 2px solid var(--ambra);
  color: var(--travertino-2);
}

/* =========================================================
   28. SELETTORE DI LINGUA
   Un <details>: menu a tendina nativo del browser. Si apre col clic e
   col tasto Invio, senza una riga di JavaScript. Il poco codice che
   c'e' in script.js serve solo a chiuderlo quando si clicca altrove,
   cosa che il browser da solo non fa.
   ========================================================= */
.lingue {
  position: relative;
  margin-left: .7rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(231, 224, 210, .18);
}

.lingue > summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  list-style: none;          /* via il triangolino di serie: ne uso uno mio */
  color: inherit;
  opacity: .85;
  transition: opacity .25s, color .25s;
}
.lingue > summary::-webkit-details-marker { display: none; }
.lingue > summary:hover { opacity: 1; color: var(--ambra); }

/* Le bandiere sono SVG scritti nell'HTML, non emoji: su Windows le
   emoji bandiera non esistono e si vedrebbero due lettere al posto
   del disegno. Il filetto chiaro serve alla francese e all'italiana,
   che hanno una banda bianca e senza bordo si perderebbero sul fondo. */
.bandiera {
  width: 21px;
  height: auto;
  display: block;
  flex: 0 0 auto;
  border: 1px solid rgba(231, 224, 210, .3);
}

.lingue__freccia {
  font-size: .72em;
  line-height: 1;
  transition: transform .25s;
}
.lingue[open] .lingue__freccia { transform: rotate(180deg); }

.lingue__menu {
  position: absolute;
  top: calc(100% + .7rem);
  right: 0;
  min-width: 168px;
  padding: .3rem;
  background: rgba(19, 25, 22, .97);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(231, 224, 210, .18);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  z-index: 10;
  animation: apriLingue .2s ease both;
}
@keyframes apriLingue {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.lingue__menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .65rem;
  text-decoration: none;
  color: var(--travertino-2);
  /* La testata e' tutta maiuscola, ma i nomi delle lingue no:
     "Français" in maiuscolo perde gli accenti all'occhio. */
  text-transform: none;
  letter-spacing: .03em;
  font-size: .74rem;
  transition: background .2s, color .2s;
}
.lingue__menu a:hover { background: rgba(227, 144, 47, .12); color: var(--ambra); }

@media (prefers-reduced-motion: reduce) {
  .lingue__menu { animation: none; }
  .lingue__freccia { transition: none; }
}

/* Sotto i 560px i social spariscono dalla testata; il selettore resta,
   perche' e' proprio la cosa che serve a chi arriva da fuori. Adesso
   occupa poco (bandiera + sigla) e il menu si allinea a destra. */
@media (max-width: 559px) {
  .testata__nav {
    gap: .6rem;
    row-gap: .3rem;
    font-size: .62rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: .9rem;
  }
  .lingue { margin-left: .4rem; padding-left: .6rem; }
  .bandiera { width: 19px; }
}


/* =========================================================
   29. FLUIDITA' DELLO SCORRIMENTO
   Gli effetti restano tutti. Qui si tolgono solo i costi che il
   movimento non ripaga: un'animazione che gira fuori campo, e due
   sfocature che su un telefono costano piu' di quanto rendano.
   ========================================================= */

/* L'apertura e' uscita dallo schermo: la carrellata lenta sulla foto
   non si vede piu' e puo' smettere di far ridisegnare l'immagine. */
.apertura.fuori .apertura__foto { animation-play-state: paused; }

@media (max-width: 900px) {
  /* Sfocare in tempo reale mentre si scorre e' l'effetto piu' caro che
     esista: il telefono deve ricalcolare l'immagine a ogni fotogramma.
     L'insegna continua a sparire in dissolvenza, che e' il 90% di quello
     che si percepisce, ma senza il blur. */
  body.js-moto .insegna { filter: none; }

  /* Il micro-blur della foto d'apertura serve a dare profondita' di campo.
     Su uno schermo da cinque pollici non si vede, e intanto la foto viene
     ridisegnata sfocata a ogni passo del parallasse. */
  .apertura__foto { filter: saturate(.38) contrast(1.2) brightness(var(--home-luce)); }

  /* Il vetro smerigliato della testata e' ricalcolato a ogni fotogramma
     perche' sotto scorre la pagina. Un fondo quasi pieno costa zero e
     alla vista cambia poco. */
  .testata.compatta {
    backdrop-filter: none;
    background: rgba(10, 14, 12, .94);
  }

  /* La deformazione sotto accelerazione resta, meta' corsa: su schermo
     stretto l'area da ridisegnare e' tutta la larghezza. */
  body.js-moto .listino,
  body.js-moto .carrellata { transform: skewY(calc(var(--vel, 0) * .35deg)); }
}


/* =========================================================
   30. CURSORE DI SISTEMA
   Il cursore personalizzato e' spento (script.js, CURSORE_PERSONALIZZATO):
   l'anello ambra spariva sui fondi chiari, per esempio sui bottoni della
   privacy e del banner cookie.
   Tutto cio' che si clicca in questo sito e' un <a> o un <button>, quindi
   il browser sa gia' cosa mostrare. L'unica cosa che manca e' la manina
   sui <button>, che di serie prendono la freccia come se non fossero
   premibili: quella la mettiamo qui.
   ========================================================= */
.bottone,
button { cursor: pointer; }

button:disabled { cursor: default; }