@charset "UTF-8";
/* ==========================================================================
   Taverna Azzurra — Ristorante & Pizzeria, Rapallo
   Direzione: identità marittima ligure. Blu dell'insegna, calce, sabbia,
   nero di seppia. Signature: "la linea del mare", un filo azzurro continuo
   che lega barra di scorrimento, divisori e puntini di guida della carta.
   ========================================================================== */

/* ---------- Font self-hosted (nessuna richiesta a CDN esterni) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  /* colore */
  --blu-notte: #0E2740;
  --blu-notte-alto: #14344F;
  --azzurro: #2E6F95;
  --azzurro-chiaro: #7FA9C0;
  --calce: #FBF9F5;
  --calce-scuro: #F1ECE3;
  --sabbia: #E8DCC6;
  --sabbia-scura: #D3C3A5;
  --corallo: #B04A36;
  --corallo-alto: #C4573F;
  --seppia: #101820;
  --seppia-tenue: #4A5560;

  /* semantica */
  --sfondo: var(--calce);
  --testo: var(--seppia);
  --testo-tenue: var(--seppia-tenue);
  --bordo: var(--sabbia);
  --accento: var(--corallo);

  /* tipografia */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-testo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 0.9rem + 1.2vw, 1.6rem);
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-2xl: clamp(2.25rem, 1.3rem + 4vw, 4rem);
  --t-hero: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);

  /* spazio — scala standard 16→64 */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --sezione: clamp(4rem, 2rem + 7vw, 7.5rem);

  /* forma */
  --raggio: 2px;
  --raggio-lg: 4px;
  --contenitore: 1240px;
  --misura: 68ch;

  /* altezza della cromatura agganciata in cima: testata + barra del giorno.
     Il JS li rimisura a runtime, questi sono i valori di riserva. */
  --h-testata: 68px;
  --h-barra: 52px;

  /* ombre — morbide, mai dure */
  --ombra-1: 0 1px 2px rgba(16, 24, 32, 0.04), 0 2px 8px rgba(16, 24, 32, 0.04);
  --ombra-2: 0 2px 4px rgba(16, 24, 32, 0.05), 0 8px 24px rgba(16, 24, 32, 0.07);
  --ombra-3: 0 4px 8px rgba(16, 24, 32, 0.06), 0 18px 48px rgba(16, 24, 32, 0.10);

  /* moto */
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 460ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Scala di impilamento. Il pannello di navigazione vive DENTRO .testata,
     quindi il suo z-index vale solo dentro quel contesto: per stare sopra il
     pannello il velo dovrebbe superare la testata intera, e finirebbe per
     coprirlo. Il velo va quindi tenuto sotto la testata. */
  --z-rail: 80;
  --z-barra: 85;
  --z-velo: 90;
  --z-header: 100;
  --z-menu: 200;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-testata) + var(--h-barra) + 1rem);
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  overflow-wrap: break-word;
}
/* L'italiano ha parole lunghe ("Centotrentaquattro"): su schermi stretti
   una sillabazione corretta è meglio di un titolo che sfora la pagina.
   La regola segue l'attributo lang, quindi cambia con la lingua scelta. */
.sezione__titolo { -webkit-hyphens: auto; hyphens: auto; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* figure e blockquote portano un margine predefinito di 1em 40px: va azzerato,
   altrimenti sfondano l'allineamento con il resto della colonna. */
figure, blockquote, figcaption { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--azzurro);
  outline-offset: 3px;
  border-radius: var(--raggio);
}

::selection { background: var(--azzurro); color: var(--calce); }

/* ---------- Utilità ---------- */
.contenitore {
  width: 100%;
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.solo-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta-al-contenuto {
  position: absolute;
  top: -100px; left: var(--s-2);
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--blu-notte);
  color: var(--calce);
  transition: top var(--dur-1) var(--ease);
}
.salta-al-contenuto:focus { top: var(--s-2); }

/* occhiello — piccola etichetta in maiuscoletto spaziato */
.occhiello {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azzurro);
  margin: 0 0 var(--s-2);
}
.occhiello::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.occhiello--chiaro { color: var(--azzurro-chiaro); }

/* ---------- LA LINEA DEL MARE (signature) ---------- */
/* Barra di avanzamento: il livello del mare che sale mentre si scorre. */
.linea-mare {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  z-index: calc(var(--z-header) + 5);
  background: linear-gradient(90deg, var(--azzurro), var(--azzurro-chiaro));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* Divisore di sezione: la stessa linea, che affiora e si dissolve. */
.divisore {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--sabbia-scura) 18%, var(--sabbia-scura) 82%, transparent);
}

/* ---------- Sistema di comparsa (rivelazione allo scorrimento) ---------- */
.js .rivela {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
  transition-delay: var(--ritardo, 0ms);
}
.rivela.visibile { opacity: 1; transform: none; }

/* ---------- Bottoni ---------- */
.btn {
  --btn-bg: var(--corallo);
  --btn-testo: var(--calce);
  --btn-bordo: var(--corallo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-testo);
  border: 1px solid var(--btn-bordo);
  border-radius: var(--raggio);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.btn:hover { background: var(--corallo-alto); border-color: var(--corallo-alto); transform: translateY(-2px); box-shadow: var(--ombra-2); }
.btn:active { transform: translateY(0); }

.btn--fantasma {
  --btn-bg: transparent;
  --btn-testo: var(--calce);
  --btn-bordo: rgba(251, 249, 245, 0.55);
}
.btn--fantasma:hover {
  background: var(--calce);
  border-color: var(--calce);
  color: var(--blu-notte);
}

.btn--scuro {
  --btn-bg: var(--blu-notte);
  --btn-testo: var(--calce);
  --btn-bordo: var(--blu-notte);
}
.btn--scuro:hover { background: var(--blu-notte-alto); border-color: var(--blu-notte-alto); }

.btn--contorno {
  --btn-bg: transparent;
  --btn-testo: var(--blu-notte);
  --btn-bordo: var(--sabbia-scura);
}
.btn--contorno:hover { background: var(--blu-notte); border-color: var(--blu-notte); color: var(--calce); }

.btn--piccolo { min-height: 44px; padding: 0.55rem 1.1rem; font-size: var(--t-xs); }
.btn .ico { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   INTESTAZIONE
   ========================================================================== */
.testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* Velo in cima: sopra l'eroe la facciata a righe è chiarissima e logo, voci
   e hamburger bianchi ci si perderebbero. Sparisce appena la testata si compatta. */
.testata::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(14, 39, 64, 0.62), rgba(14, 39, 64, 0));
  opacity: 1;
  transition: opacity var(--dur-2) var(--ease);
}
.testata.compatta::before { opacity: 0; }
.testata__interno {
  position: relative;
  z-index: 1; /* sopra il velo ::before */
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 84px;
  transition: min-height var(--dur-2) var(--ease);
}
/* Il fondo sfocato sta su uno pseudo-elemento, non su .testata: un
   backdrop-filter genera un blocco contenitore per i discendenti in
   position:fixed, e il pannello di navigazione finirebbe ancorato alla
   testata invece che al viewport, ritagliato all'altezza della barra. */
.testata.compatta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(251, 249, 245, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombra-1);
}
.testata.compatta .testata__interno { min-height: 68px; }

.marchio { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; }
.marchio__logo {
  width: 54px; height: 54px;
  transition: width var(--dur-2) var(--ease), height var(--dur-2) var(--ease);
}
.testata.compatta .marchio__logo { width: 44px; height: 44px; }
/* Il logo scuro compare solo quando la testata diventa chiara. */
.marchio__logo--scuro { display: none; }
.testata.compatta .marchio__logo--chiaro { display: none; }
.testata.compatta .marchio__logo--scuro { display: block; }

.marchio__testo {
  display: none;
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: 0.02em;
  color: var(--calce);
  transition: color var(--dur-2) var(--ease);
}
.testata.compatta .marchio__testo { color: var(--blu-notte); }

.navigazione { display: flex; align-items: center; gap: var(--s-3); }
.navigazione a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--calce);
  transition: color var(--dur-2) var(--ease);
}
.testata.compatta .navigazione a { color: var(--seppia); }
.navigazione a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--azzurro-chiaro);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease);
}
.testata.compatta .navigazione a::after { background: var(--azzurro); }
.navigazione a:hover::after,
.navigazione a.attivo::after { transform: scaleX(1); }

/* selettore lingua */
.lingua { display: flex; align-items: center; border: 1px solid rgba(251, 249, 245, 0.4); border-radius: var(--raggio); overflow: hidden; }
.testata.compatta .lingua { border-color: var(--sabbia-scura); }
.lingua__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.3rem 0.55rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--calce);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.testata.compatta .lingua__btn { color: var(--seppia-tenue); }
.lingua__btn[aria-pressed="true"] { background: var(--calce); color: var(--blu-notte); }
.testata.compatta .lingua__btn[aria-pressed="true"] { background: var(--blu-notte); color: var(--calce); }

.apri-menu {
  display: none;
  position: relative;
  /* sopra il pannello, altrimenti la X di chiusura ci finisce sotto
     e su mobile non resta modo visibile di richiudere il menu */
  z-index: calc(var(--z-menu) + 1);
  width: 48px; height: 48px;
  padding: 12px;
  border: 1px solid rgba(251, 249, 245, 0.4);
  border-radius: var(--raggio);
}
.testata.compatta .apri-menu { border-color: var(--sabbia-scura); }
.apri-menu span {
  display: block;
  height: 1.5px;
  background: var(--calce);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
.testata.compatta .apri-menu span { background: var(--seppia); }
.apri-menu span + span { margin-top: 5px; }
.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* A menu aperto la X sta sempre sul pannello blu, anche se la pagina è
   scorsa e la testata è in versione chiara: va tenuta bianca. */
.testata.compatta .apri-menu[aria-expanded="true"] span { background: var(--calce); }
.testata.compatta .apri-menu[aria-expanded="true"] { border-color: rgba(251, 249, 245, 0.4); }

/* ==========================================================================
   EROE
   ========================================================================== */
.eroe {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: 160px var(--s-6);
  overflow: hidden;
}
/* Il riquadro sporge di 10vh sopra il bordo: e' il margine entro cui la
   foto puo' derivare in parallasse senza mai scoprire un bordo vuoto. */
.eroe__sfondo { position: absolute; inset: -10vh 0 0 0; z-index: 0; }
.eroe__sfondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(1.08);
  animation: eroe-respiro 1600ms var(--ease-out) forwards;
}
@keyframes eroe-respiro { to { transform: scale(1); } }

/* Il velo deve garantire contrasto al testo bianco anche dove la foto è
   chiarissima (le tovaglie). Due strati: uno verticale che porta il peso,
   uno orizzontale che scurisce il lato del testo lasciando respirare la foto. */
.eroe__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(14, 39, 64, 0.45) 0%, rgba(14, 39, 64, 0.18) 45%, rgba(14, 39, 64, 0) 72%),
    linear-gradient(to top, rgba(14, 39, 64, 0.94) 0%, rgba(14, 39, 64, 0.74) 42%, rgba(14, 39, 64, 0.38) 74%, rgba(14, 39, 64, 0.52) 100%);
}
/* strato aggiuntivo: cala la sera sul lungomare man mano che si scende */
.eroe__velo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blu-notte);
  opacity: 0;
}
.eroe__contenuto { position: relative; z-index: 1; width: 100%; color: var(--calce); }

.eroe__titolo {
  max-width: 16ch;
  margin: 0 0 var(--s-3);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
/* rivelazione riga per riga: ogni riga sale da dietro la propria maschera */
.riga { display: block; overflow: hidden; }
.riga > span {
  display: block;
  transform: translateY(105%);
  animation: riga-sale 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 180ms);
}
@keyframes riga-sale { to { transform: translateY(0); } }
.eroe__titolo em {
  font-style: italic;
  color: var(--azzurro-chiaro);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

.eroe__sottotitolo {
  max-width: 46ch;
  margin: 0 0 var(--s-4);
  font-size: var(--t-md);
  line-height: 1.6;
  color: rgba(251, 249, 245, 0.9);
  opacity: 0;
  animation: sfuma-su 900ms var(--ease-out) 620ms forwards;
}
.eroe__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  opacity: 0;
  animation: sfuma-su 900ms var(--ease-out) 760ms forwards;
}
@keyframes sfuma-su { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* indicatore di scorrimento */
.eroe__scorri {
  position: absolute;
  left: 50%; bottom: var(--s-3);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.7);
  opacity: 0;
  animation: sfuma-su 900ms var(--ease-out) 1000ms forwards;
}
.eroe__scorri i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, rgba(251, 249, 245, 0.75), transparent);
  animation: filo-scende 2400ms var(--ease) infinite;
  transform-origin: 50% 0;
}
@keyframes filo-scende {
  0%, 100% { transform: scaleY(0.3); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ==========================================================================
   BARRA DEL GIORNO — stato di apertura calcolato dal vivo
   ========================================================================== */
/* Agganciata sotto la testata: mentre si scorrono 134 piatti lo stato di
   apertura e il numero di telefono restano sempre a un tocco. */
.barra-giorno {
  position: sticky;
  top: var(--h-testata);
  z-index: var(--z-barra);
  background: var(--blu-notte);
  color: var(--calce);
}
.barra-giorno__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-4);
  padding-block: 4px;
}
.stato { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; }
.stato__spia {
  position: relative;
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--sabbia-scura);
}
.stato--aperto .stato__spia { background: #4ADE80; }
.stato--chiuso .stato__spia { background: var(--corallo-alto); }
.stato--aperto .stato__spia::after {
  content: '';
  position: absolute; inset: -5px;
  border: 1px solid #4ADE80;
  border-radius: 50%;
  animation: pulsa 2600ms var(--ease) infinite;
}
@keyframes pulsa {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.barra-giorno__voce {
  display: flex; align-items: center; gap: 0.55rem;
  min-height: 44px;
  font-size: var(--t-sm);
  color: rgba(251, 249, 245, 0.82);
}
.barra-giorno__voce .ico { width: 16px; height: 16px; flex: none; opacity: 0.75; }
.barra-giorno a.barra-giorno__voce { transition: color var(--dur-1) var(--ease); }
.barra-giorno a.barra-giorno__voce:hover { color: var(--calce); }
.barra-giorno__spinta { margin-left: auto; }

/* ==========================================================================
   SEZIONI generiche
   ========================================================================== */
.sezione { padding-block: var(--sezione); }
.sezione--calce { background: var(--calce-scuro); }
.sezione--notte { background: var(--blu-notte); color: var(--calce); }

.sezione__titolo {
  max-width: 20ch;
  margin: 0 0 var(--s-3);
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.sezione__testo { max-width: var(--misura); font-size: var(--t-md); color: var(--testo-tenue); }
.sezione--notte .sezione__testo { color: rgba(251, 249, 245, 0.8); }
.sezione__testo + .sezione__testo { margin-top: var(--s-2); }

/* ==========================================================================
   LA CASA — filosofia
   ========================================================================== */
.casa__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}
.casa__figura { position: relative; }
/* cornice a righe: eco delle facciate a fasce genovesi.
   Sta dietro l'angolo in alto a sinistra: in basso finirebbe sotto la
   didascalia e le due cose si accavallerebbero. */
.casa__figura::before {
  content: '';
  position: absolute;
  inset: -20px auto auto -20px;
  width: 46%;
  height: 55%;
  background: repeating-linear-gradient(
    -45deg,
    var(--sabbia) 0 6px,
    transparent 6px 12px
  );
  opacity: 0.85;
  z-index: 0;
}
.casa__figura img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-3);
}
.casa__didascalia {
  position: relative;
  z-index: 1;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.pilastri {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--bordo);
}
.pilastro__chiave {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--azzurro);
  margin-bottom: 0.35rem;
}
.pilastro p { font-size: var(--t-sm); color: var(--testo-tenue); }

/* ==========================================================================
   LA CARTA — il momento firma
   ========================================================================== */
.carta__intestazione { max-width: var(--misura); margin-bottom: var(--s-4); }

/* binario di categorie appiccicoso */
.carta__rail {
  position: sticky;
  top: calc(var(--h-testata) + var(--h-barra));
  z-index: var(--z-rail);
  margin-bottom: var(--s-4);
  background: rgba(251, 249, 245, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--bordo);
}
.carta__rail-track {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.6rem;
  scroll-snap-type: x proximity;
}
.carta__rail-track::-webkit-scrollbar { display: none; }
.carta__rail-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  scroll-snap-align: start;
  padding: 0.5rem 0.9rem;
  border-radius: var(--raggio);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--testo-tenue);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.carta__rail-link:hover { background: var(--sabbia); color: var(--seppia); }
.carta__rail-link.attivo { background: var(--blu-notte); color: var(--calce); }

/* sezioni a fisarmonica */
.carta__section { border-bottom: 1px solid var(--bordo); }
.carta__section:first-of-type { border-top: 1px solid var(--bordo); }
.carta__section-head { margin: 0; font-size: inherit; font-weight: inherit; }

.carta__toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 72px;
  padding: var(--s-2) 0;
  text-align: left;
  transition: color var(--dur-2) var(--ease);
}
.carta__toggle:hover { color: var(--azzurro); }

.carta__num {
  flex: none;
  width: 2.25rem;
  font-family: var(--font-testo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--azzurro);
  opacity: 0.7;
}
.carta__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.carta__count {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--testo-tenue);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
}
.carta__chevron {
  flex: none;
  width: 12px; height: 12px;
  margin-left: 0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease);
}
.carta__toggle[aria-expanded="true"] .carta__chevron { transform: rotate(-135deg) translate(-3px, -3px); }

/* pannello: animazione di altezza senza calcoli in JS.
   Lo stato sta sulla sezione, non sul bottone: il bottone è dentro un <h3>,
   quindi il pannello non è un suo fratello e nessun selettore di adiacenza
   potrebbe raggiungerlo. */
.carta__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out);
}
.carta__section.aperta .carta__panel { grid-template-rows: 1fr; }
.carta__panel-inner { overflow: hidden; }

.carta__section-desc {
  max-width: 56ch;
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--testo-tenue);
}

/* elenco piatti — doppia colonna su schermi ampi */
.dish-list {
  columns: 1;
  column-gap: var(--s-6);
  padding-bottom: var(--s-4);
}
.dish {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.55rem;
  break-inside: avoid;
}
.dish__name { font-size: var(--t-base); }
/* i puntini di guida: la linea del mare che riaffiora nella carta */
.dish__leader {
  flex: 1;
  min-width: 1.5rem;
  height: 1px;
  transform: translateY(-3px);
  background-image: radial-gradient(circle, var(--sabbia-scura) 1px, transparent 1.2px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
.dish__price {
  flex: none;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--azzurro);
  font-variant-numeric: tabular-nums;
}

.carta__nota {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--testo-tenue);
}

/* ==========================================================================
   RECENSIONI
   ========================================================================== */
.voti {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.voto {
  padding: var(--s-3);
  border: 1px solid rgba(251, 249, 245, 0.16);
  border-radius: var(--raggio-lg);
  background: rgba(251, 249, 245, 0.04);
}
.voto__cifra {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--calce);
}
.voto__cifra small { font-size: 0.45em; color: var(--azzurro-chiaro); margin-left: 0.15em; }
.voto__fonte {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azzurro-chiaro);
}
.voto__conteggio { display: block; margin-top: 0.15rem; font-size: var(--t-xs); color: rgba(251, 249, 245, 0.6); }

.citazioni { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.citazione {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-left: 2px solid var(--azzurro);
  background: rgba(251, 249, 245, 0.03);
}
.citazione blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--calce);
}
.citazione figcaption {
  margin-top: auto;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: rgba(251, 249, 245, 0.62);
}
.citazione__voto { color: var(--azzurro-chiaro); font-weight: 700; }

/* ==========================================================================
   CONTATTI
   ========================================================================== */
.contatti__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.scheda { display: grid; gap: var(--s-3); }
.dato { display: grid; gap: 0.2rem; }
.dato__etichetta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azzurro);
}
.dato__valore { font-size: var(--t-md); }
.dato a.dato__valore {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--dur-1) var(--ease);
}
.dato a.dato__valore:hover { color: var(--corallo); }

/* tabella orari con oggi in evidenza */
.orari { border-top: 1px solid var(--bordo); }
.orari__riga {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--bordo);
  font-size: var(--t-sm);
}
.orari__riga.oggi { font-weight: 700; color: var(--azzurro); }
.orari__riga.oggi .orari__giorno::after {
  content: '·';
  margin-inline: 0.4rem;
  color: var(--corallo);
}
.orari__giorno { text-transform: capitalize; }

.azioni-prenota { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

.mappa {
  position: relative;
  min-height: 340px;
  height: 100%;
  border-radius: var(--raggio-lg);
  overflow: hidden;
  box-shadow: var(--ombra-2);
  background: var(--calce-scuro);
}
.mappa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: saturate(0.85); }
/* Scorciatoia sempre presente: utile con la mappa caricata, indispensabile
   se il riquadro non parte (blocco cookie, rete lenta, browser restrittivo). */
.mappa__link {
  position: absolute;
  right: var(--s-2);
  bottom: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--calce);
  color: var(--blu-notte);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mappa__link:hover { background: var(--blu-notte); color: var(--calce); }
.mappa__link .ico { width: 16px; height: 16px; }

.servizi { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.servizio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: var(--t-sm);
  color: var(--testo-tenue);
}
.servizio .ico { width: 15px; height: 15px; color: var(--azzurro); }

/* ==========================================================================
   PIÈ DI PAGINA
   ========================================================================== */
.pie { background: var(--blu-notte); color: rgba(251, 249, 245, 0.72); padding-block: var(--s-5) var(--s-4); }
.pie__alto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(251, 249, 245, 0.14);
}
.pie__logo { width: 68px; height: 68px; margin-bottom: var(--s-2); }
.pie__titolo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azzurro-chiaro);
  margin-bottom: var(--s-2);
}
.pie a { transition: color var(--dur-1) var(--ease); }
.pie a:hover { color: var(--calce); }
.pie__lista { display: grid; gap: 0.15rem; font-size: var(--t-sm); }
.pie__lista > * { display: inline-flex; align-items: center; min-height: 40px; }
.pie__basso {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: rgba(251, 249, 245, 0.55);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 600px) {
  .voti { grid-template-columns: repeat(2, 1fr); }
  .pilastri { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .marchio__testo { display: block; }
}

@media (min-width: 860px) {
  .dish-list { columns: 2; }
  .citazioni { grid-template-columns: repeat(3, 1fr); }
  .casa__griglia { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); }
  .contatti__griglia { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .pie__alto { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); }
  .voti { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
  .carta__interno { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* --- navigazione mobile --- */
@media (max-width: 959px) {
  .apri-menu { display: block; }

  .pannello-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-4);
    width: min(86vw, 380px);
    padding: var(--s-6) var(--s-4);
    background: var(--blu-notte);
    box-shadow: -20px 0 60px rgba(16, 24, 32, 0.35);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
  }
  .pannello-nav.aperto { transform: none; visibility: visible; }

  .navigazione { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .navigazione a,
  .testata.compatta .navigazione a { color: var(--calce); font-size: var(--t-lg); font-family: var(--font-display); }
  .navigazione a::after,
  .testata.compatta .navigazione a::after { background: var(--azzurro-chiaro); }

  .lingua,
  .testata.compatta .lingua { border-color: rgba(251, 249, 245, 0.4); align-self: flex-start; }
  .lingua__btn,
  .testata.compatta .lingua__btn { color: var(--calce); }
  .lingua__btn[aria-pressed="true"],
  .testata.compatta .lingua__btn[aria-pressed="true"] { background: var(--calce); color: var(--blu-notte); }

  .pannello-nav .btn { width: 100%; }

  .velo-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-velo);
    background: rgba(16, 24, 32, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
  }
  .velo-nav.aperto { opacity: 1; visibility: visible; }

  .carta__rail { top: calc(var(--h-testata) + var(--h-barra)); }
  .barra-giorno__spinta { margin-left: 0; width: 100%; }
  /* più aria in fondo: i bottoni non devono toccare l'indicatore di scorrimento */
  .eroe { padding-block: 140px 6.5rem; }
}

@media (min-width: 960px) {
  .pannello-nav { display: flex; align-items: center; gap: var(--s-4); }
  .velo-nav { display: none; }
}


/* ==========================================================================
   DINAMISMO
   Quattro interventi: l'arrivo orchestrato, la carta viva, il mare che si
   muove, la barra agganciata. Tutto in transform/opacity, nessuna libreria.
   Le regole stanno sotto .js: se lo script non parte, il contenuto resta
   visibile invece di sparire.
   ========================================================================== */

@keyframes entra-su   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes entra-giu  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sfuma-solo { from { opacity: 0; } to { opacity: 1; } }
@keyframes linea-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* -------------------------------------------------------------------------
   1. L'ARRIVO ORCHESTRATO
   Una sola cascata dall'alto verso il basso, non cinque effetti scollegati.
   Attenzione: sulla testata si anima SOLO l'opacita'. Un transform su
   .testata creerebbe un blocco contenitore per il pannello di navigazione,
   che e' in position:fixed al suo interno, e lo ritaglierebbe.
   ------------------------------------------------------------------------- */
/* fill-mode "backwards", non "both": l'animazione tiene il valore iniziale
   durante il ritardo ma si RILASCIA alla fine. Con "both" resterebbe attiva
   per sempre, e un'animazione viva sulla testata le crea un contesto di
   impilamento che annulla il backdrop-filter: il testo della carta tornava
   a trasparire leggibile da sotto la barra. */
.js .testata          { animation: sfuma-solo 400ms var(--ease-out) 120ms backwards; }
.js .marchio          { animation: entra-giu 450ms var(--ease-out) 220ms backwards; }
.js .navigazione a    { animation: entra-giu 380ms var(--ease-out) backwards; }
.js .navigazione a:nth-child(1) { animation-delay: 300ms; }
.js .navigazione a:nth-child(2) { animation-delay: 345ms; }
.js .navigazione a:nth-child(3) { animation-delay: 390ms; }
.js .navigazione a:nth-child(4) { animation-delay: 435ms; }
.js .lingua           { animation: entra-giu 380ms var(--ease-out) 480ms backwards; }
.js .pannello-nav > .btn { animation: entra-giu 380ms var(--ease-out) 525ms backwards; }
.js .eroe .occhiello  { animation: entra-su 460ms var(--ease-out) 260ms backwards; }

/* il titolo sale gia' riga per riga: qui si allinea alla nuova cascata */
.js .riga > span { animation-delay: calc(var(--i, 0) * 95ms + 360ms); }
/* Le durate di coda si accorciano: a 900ms l'ultimo elemento arrivava a
   1,7s dall'apertura, troppo lento per un'animazione che deve accompagnare
   e non farsi aspettare. Cosi' la sequenza si chiude intorno a 1,4s. */
.js .eroe__sottotitolo { animation-duration: 620ms; animation-delay: 700ms; }
.js .eroe__azioni      { animation-duration: 620ms; animation-delay: 820ms; }
.js .eroe__scorri      { animation-duration: 500ms; animation-delay: 1000ms; }

/* Sul telefono il pannello e' fuori schermo: le sue voci non si vedono
   entrare, quindi l'animazione e' solo lavoro sprecato. */
@media (max-width: 959px) {
  .js .navigazione a,
  .js .lingua,
  .js .pannello-nav > .btn { animation: none; }
}

/* -------------------------------------------------------------------------
   2. LA CARTA VIVA
   ------------------------------------------------------------------------- */
/* I piatti entrano scalati. Il ritardo si ferma a 420ms: con 46 pizze una
   scalatura piena durerebbe piu' di un secondo, e le ultime voci sono
   comunque fuori schermo mentre il pannello si apre. */
.js .dish { opacity: 0; transform: translateY(6px); }
.js .carta__section.aperta .dish {
  animation: entra-su 300ms var(--ease-out) forwards;
  animation-delay: min(calc(var(--i, 0) * 22ms), 420ms);
}

/* La riga sotto il puntatore: non e' decorazione, su due colonne larghe
   aiuta a non perdere il filo tra il piatto e il suo prezzo. */
@media (hover: hover) {
  .dish__name, .dish__price, .dish__leader { transition: color var(--dur-1) var(--ease), background-image var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
  .dish:hover .dish__name  { color: var(--azzurro); }
  .dish:hover .dish__price { color: var(--corallo); transform: translateX(-2px); }
  .dish:hover .dish__leader {
    background-image: radial-gradient(circle, var(--azzurro-chiaro) 1px, transparent 1.2px);
  }
}

/* -------------------------------------------------------------------------
   3. IL MARE CHE SI MUOVE
   Dove il browser supporta animation-timeline, la parallasse gira sul
   compositore: nessun lavoro sul thread principale, fluida anche su
   telefoni vecchi. Altrove il JS scrive --p-eroe e il risultato e' identico.
   ------------------------------------------------------------------------- */
.js .eroe__sfondo   { transform: translateY(calc(var(--p-eroe, 0) * 10vh)); }
.js .eroe__velo::after { opacity: calc(var(--p-eroe, 0) * 0.42); }

@keyframes eroe-deriva { from { transform: translateY(0); }  to { transform: translateY(10vh); } }
@keyframes eroe-sera   { from { opacity: 0; }                to { opacity: 0.42; } }

@supports (animation-timeline: scroll()) {
  .js .eroe__sfondo {
    animation: eroe-deriva linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  .js .eroe__velo::after {
    animation: eroe-sera linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
}

/* I divisori e i trattini degli occhielli si disegnano da sinistra:
   e' la linea del mare che riaffiora a ogni sezione. */
.js .divisore { transform: scaleX(0); transform-origin: 0 50%; }
.js .divisore.visibile { animation: linea-cresce 700ms var(--ease-out) forwards; }
.js .rivela .occhiello::before,
.js .occhiello.rivela::before { transform: scaleX(0); transform-origin: 0 50%; }
.js .rivela.visibile .occhiello::before,
.js .occhiello.rivela.visibile::before { animation: linea-cresce 520ms var(--ease-out) 120ms forwards; }

/* -------------------------------------------------------------------------
   4. LA BARRA DEL GIORNO AGGANCIATA
   ------------------------------------------------------------------------- */
.barra-giorno { transition: box-shadow var(--dur-2) var(--ease); }
.barra-giorno.agganciata { box-shadow: 0 6px 18px rgba(16, 24, 32, 0.16); }
.barra-giorno__voce { transition: opacity var(--dur-2) var(--ease); }

/* Agganciata su schermo stretto resta solo l'essenziale: stato e telefono,
   su una riga sola. Andando a capo la barra saliva a 75px, e sommata a
   testata e binario mangiava un quarto dello schermo del telefono. */
@media (max-width: 760px) {
  .barra-giorno.agganciata .barra-giorno__voce--orario,
  .barra-giorno.agganciata .barra-giorno__voce--indirizzo { display: none; }
  .barra-giorno.agganciata .barra-giorno__interno {
    flex-wrap: nowrap;
    gap: var(--s-2);
    padding-block: 2px;
  }
  .barra-giorno.agganciata .stato { min-width: 0; }
  .barra-giorno.agganciata .stato__testo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .barra-giorno.agganciata .barra-giorno__voce { flex: none; min-height: 40px; }
  .barra-giorno.agganciata .barra-giorno__spinta { margin-left: auto; width: auto; }
}

/* Il binario si stringe: il bersaglio tattile resta 44px, si toglie solo
   il respiro attorno. */
@media (max-width: 760px) {
  .carta__rail-track { padding-block: 0.25rem; }
}

/* -------------------------------------------------------------------------
   5. IL CAMBIO LINGUA IN DISSOLVENZA
   ------------------------------------------------------------------------- */
.js [data-en] { transition: opacity 170ms var(--ease); }
.js.cambio-lingua [data-en] { opacity: 0; }

/* ==========================================================================
   MOVIMENTO RIDOTTO — si rispetta la preferenza di sistema
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .rivela, .rivela { opacity: 1; transform: none; }
  .riga > span { transform: none; }
  .eroe__sfondo img { transform: none; }
  .eroe__sottotitolo, .eroe__azioni, .eroe__scorri { opacity: 1; }
  .linea-mare { display: none; }
  /* niente parallasse, niente sera che cala, niente linee che si disegnano */
  .js .eroe__sfondo { transform: none !important; animation: none !important; }
  .js .eroe__velo::after { opacity: 0 !important; animation: none !important; }
  .js .divisore, .js .rivela .occhiello::before, .js .occhiello.rivela::before { transform: none !important; }
  .js .dish { opacity: 1 !important; transform: none !important; }
  .js .testata, .js .marchio, .js .navigazione a, .js .lingua,
  .js .pannello-nav > .btn, .js .eroe .occhiello { opacity: 1 !important; transform: none !important; }
  .dish:hover .dish__price { transform: none; }
}

/* ---------- Stampa: la carta deve poter finire su carta ---------- */
@media print {
  .testata, .barra-giorno, .eroe, .linea-mare, .carta__rail, .mappa, .pie, .eroe__scorri { display: none !important; }
  body { background: #fff; color: #000; }
  .carta__panel { grid-template-rows: 1fr !important; }
  .carta__panel-inner { overflow: visible !important; }
  .carta__chevron, .carta__count { display: none; }
  .dish-list { columns: 2; }
  .js .dish, .dish { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .rivela, .rivela { opacity: 1 !important; transform: none !important; }
  .sezione { padding-block: 1rem; }
}