/* ============================================================
   LA CARTA DEL RISTORANTE — «La sala» (27/09/2026, scelta di Carlo) — solo /ristorante/
   In apertura titolo e motto; la barra dei capitoli resta incollata sotto la testata per tutta la carta. Poi due metà: a sinistra il PALCO, fermo mentre si scorre, con il mosaico di
   foto del capitolo che si sta leggendo (le tessere del mosaico nuovo entrano una dopo l'altra, quelle del vecchio escono) e il grande
   numero romano; a destra i CAPITOLI su fondo scuro, con i piatti che salgono uno dopo l'altro quando il capitolo arriva.
   Sul telefono il palco sta in alto, sotto la barra, e i capitoli scorrono sotto.
   Si muovono solo transform e opacity (la scheda grafica fa da sola: vedi DIARIO del 27/09 sera sugli scatti).
   Contenuto e posti delle tessere li scrive strumenti/genera_carta.py; il comportamento sta in carta.js.
   ============================================================ */

.carta-sezione { background: var(--rosette-oro), var(--notte); color: var(--avorio-su-notte); }

/* ---------- Apertura ---------- */
.carta-apertura {
  text-align: center; padding: var(--sez-pad) 0 clamp(3rem, 6vw, 4.5rem);
  background: radial-gradient(900px 480px at 50% 30%, rgba(192,138,62,.16), transparent 68%);
}
.carta-apertura .occhiello { color: var(--oro-chiaro); }
.carta-apertura .titolo-sezione { font-size: clamp(3.2rem, 8vw, 6.2rem); line-height: 1; margin: .1em 0 .15em; color: #fff; }
.carta-apertura .corsivo { font-style: italic; font-weight: 400; color: var(--oro-chiaro); }
.carta-motto { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.55rem); color: rgba(242,233,216,.85); margin-bottom: 1rem; }
/* ---------- La sala: palco a sinistra, capitoli a destra ---------- */
.sala { --nav-h: 54px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* la barra dei capitoli: sempre raggiungibile sotto la testata finché si è dentro la carta (Carlo, 27/09/2026) */
.sala-nav {
  grid-column: 1 / -1; position: sticky; top: 72px; z-index: 4; height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--notte) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid rgba(226,195,136,.22);
}
.sala-nav-voci { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); max-width: 100%; }
.sala-nav-voci::-webkit-scrollbar { display: none; }
.sala-nav a { flex: none; position: relative; display: inline-flex; align-items: baseline; gap: .4rem; padding: .5rem 0;
  font-family: var(--f-display); font-size: 1.08rem; color: rgba(242,233,216,.78); white-space: nowrap; transition: color var(--transizione); }
.sala-nav a span { font-style: italic; font-size: .8em; color: var(--oro-chiaro); }
.sala-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: .15rem; height: 1px; background: var(--oro-chiaro); transition: left .45s cubic-bezier(.2,.8,.2,1), right .45s cubic-bezier(.2,.8,.2,1); }
.sala-nav a:hover, .sala-nav a.attivo { color: #fff; }
.sala-nav a.attivo::after, .sala-nav a:hover::after { left: 0; right: 0; }
.sala-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--notte); }
.sala-mosaico {
  position: absolute; inset: calc(72px + var(--nav-h)) 0 0; padding: 6px; /* sotto la barra dei menù e quella dei capitoli */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 6px;
  pointer-events: none;
  /* niente visibility: hidden sui mosaici spenti: ridisegnarli al ritorno costava fino a 0,14 s per fotogramma (misurato) */
}
.sala-mosaico figure { grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); margin: 0; overflow: hidden; position: relative; background: var(--notte-2);
  opacity: 0; transform: scale(.96);
  transition: opacity .55s ease calc(var(--k) * 60ms), transform .7s cubic-bezier(.4,0,.2,1) calc(var(--k) * 60ms); }
.sala-mosaico img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--k) * 110ms); }
.sala-mosaico.acceso figure { opacity: 1; transform: none; transition: opacity .8s ease calc(.25s + var(--k) * 110ms), transform 1.1s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--k) * 110ms); }
.sala-mosaico.acceso img { transform: none; }
/* velo verso i capitoli e sotto il numero */
.sala-palco::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 70%, rgba(34,22,16,.55)), linear-gradient(0deg, rgba(34,22,16,.7), transparent 32%); }
.sala-numero { position: absolute; left: clamp(1.4rem, 3vw, 2.6rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 2; margin: 0; overflow: hidden;
  font-family: var(--f-display); font-style: italic; font-size: clamp(4.5rem, 10vw, 8.5rem); line-height: 1.05; color: rgba(242,233,216,.92);
  text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.sala-numero span { display: inline-block; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.sala-numero.cambia span { transform: translateY(70%); opacity: 0; transition-duration: .3s; }

.sala-capitoli { padding-inline: clamp(2rem, 6vw, 6rem); }
main .carta-capitolo[id] { scroll-margin-top: 30px; } /* dalla barra dei capitoli il capitolo arriva sotto le due barre */
.carta-capitolo { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4rem, 9vh, 6rem); border-bottom: 1px solid rgba(226,195,136,.14); }
.carta-num { margin: 0 0 .2rem; font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--oro-chiaro); }
.carta-capitolo h3 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.02; margin: 0 0 .5rem; color: #fff; }
.carta-capitolo h3 em { font-weight: 400; color: var(--oro-chiaro); }
.carta-sotto { margin: 0 0 .5rem; font-size: var(--t-etichetta); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-chiaro); }
.carta-piatti { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0; }
.carta-piatti li { display: flex; flex-direction: column; padding: .95rem 0 1rem; border-bottom: 1px solid rgba(226,195,136,.14); }
.carta-piatto { font-family: var(--f-display); font-weight: 500; font-size: 1.42rem; line-height: 1.2; color: #F4E8D2; }
.carta-dettaglio { margin-top: .2rem; font-family: var(--f-display); font-style: italic; font-size: 1.08rem; line-height: 1.4; color: rgba(226,195,136,.88); }
.carta-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; } /* nome a sinistra, prezzo a destra */
.carta-prezzo { flex: none; font-family: var(--f-display); font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--oro-chiaro); }
/* gruppi dentro un capitolo (le pizze: speciali e classiche) */
.carta-gruppo { margin: 3rem 0 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.75rem; color: var(--oro-chiaro); }
.carta-capitolo h3 + .carta-gruppo, .carta-sotto + .carta-gruppo { margin-top: 1.4rem; }
.carta-gruppo + .carta-piatti { margin-top: .6rem; }
.carta-allergeni { margin-left: .45rem; font-family: var(--f-testo); font-size: .72rem; font-weight: 700; letter-spacing: .05em; vertical-align: .45em; color: var(--oro-chiaro); white-space: nowrap; }
/* foglie: una = vegetariano, due = vegano (06/10/2026) */
.carta-dieta { display: inline-flex; gap: .08em; margin-left: .4rem; vertical-align: .05em; color: #a9bb78; }
.carta-dieta .foglia { width: .78em; height: .78em; fill: currentColor; }
.carta-dieta .va, .carta-allergeni .va { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* legenda degli allergeni nel piede della carta */
.carta-legenda { max-width: 46rem; margin: 0 auto 2rem; text-align: left; }
.carta-piede .carta-legenda-titolo { margin: 0 0 .9rem; font-family: var(--f-testo); font-style: normal; text-align: center; font-size: var(--t-etichetta); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
.carta-piede .carta-legenda-titolo span { display: block; margin: .35rem 0 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: rgba(242,233,216,.72); }
.carta-legenda ol { columns: 2; column-gap: 2.4rem; margin: 0; padding-left: 1.6rem; font-size: .9rem; line-height: 1.6; color: rgba(242,233,216,.8); }
.carta-legenda li { break-inside: avoid; }
.carta-legenda-dieta { margin: 1rem 0 0; text-align: center; font-size: .9rem; color: rgba(242,233,216,.8); }
.carta-legenda-dieta .carta-dieta { margin-left: 0; }
/* testo sotto il titolo di un capitolo (French tacos: com'è fatto) */
.carta-intro { margin: .4rem 0 0; max-width: 52ch; font-family: var(--f-display); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: rgba(242,233,216,.82); }
.carta-legenda li::marker { color: var(--oro-chiaro); font-weight: 700; }
.carta-nota-capitolo { margin: 1.4rem 0 0; font-size: .95rem; color: rgba(242,233,216,.72); max-width: 56ch; }
.carta-nota-capitolo b { margin-right: .5rem; font-size: var(--t-etichetta); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
.carta-evidenza { position: relative; min-height: 0; padding-block: clamp(6rem, 14vh, 8rem); }
.carta-evidenza::before { content: ""; position: absolute; inset: clamp(3rem, 7vh, 4rem) -1.6rem; border: 1px solid rgba(226,195,136,.3); background: rgba(192,138,62,.06); pointer-events: none; } /* la cornice abbraccia il capitolo */
.carta-piede { padding: 4rem 0 5rem; text-align: center; }
.carta-piede p { font-family: var(--f-display); font-style: italic; font-size: var(--t-didascalia); color: rgba(242,233,216,.72); margin-bottom: 1.6rem; }

/* i piatti salgono uno dopo l'altro quando il capitolo arriva (solo se carta.js c'è: senza, la carta è ferma e completa) */
@media (prefers-reduced-motion: no-preference) {
  .carta-js .carta-piatti li { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(min(var(--i, 0), 12) * 55ms); }
  .carta-js .carta-capitolo.vista .carta-piatti li { opacity: 1; transform: none; }
  .carta-js .carta-capitolo h3, .carta-js .carta-num, .carta-js .carta-sotto { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
  .carta-js .carta-capitolo.vista h3, .carta-js .carta-capitolo.vista .carta-num, .carta-js .carta-capitolo.vista .carta-sotto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sala-mosaico figure, .sala-mosaico img, .sala-numero span { transition: none; }
}

/* ---------- Telefono e tablet: palco in alto sotto la barra, capitoli sotto ---------- */
@media (max-width: 800px) {
  .sala { grid-template-columns: minmax(0, 1fr); }
  .sala { --nav-h: 48px; }
  .sala-nav { justify-content: flex-start; }
  .sala-nav a { font-size: 1rem; }
  .sala-palco { top: calc(72px + var(--nav-h)); height: 32svh; z-index: 3; box-shadow: 0 16px 24px -16px rgba(0,0,0,.8); }
  .sala-mosaico { inset: 0; padding: 4px; gap: 4px; }
  .sala-palco::after { background: linear-gradient(0deg, rgba(34,22,16,.8), transparent 45%); }
  .sala-numero { font-size: 3.6rem; left: 1rem; bottom: .4rem; }
  .sala-capitoli { padding-inline: var(--gutter); }
  .carta-capitolo { min-height: 0; padding-block: 2.6rem 2.2rem; }
  main .carta-capitolo[id] { scroll-margin-top: calc(32svh + var(--nav-h) - 24px); } /* il capitolo arriva sotto il palco, non dietro */
  .carta-capitolo h3 { font-size: 2.5rem; }
  .carta-piatto { font-size: 1.24rem; }
  .carta-dettaglio { font-size: 1rem; }
  .carta-prezzo { font-size: 1.15rem; }
  .carta-gruppo { font-size: 1.5rem; margin-top: 2.2rem; }
  .carta-legenda ol { columns: 1; }
  .carta-evidenza { padding-block: 3.4rem; }
  .carta-evidenza::before { inset: 1.6rem -.8rem; }
  /* dentro la carta il bottone fisso «Prenota» coprirebbe i piatti: si ritira (la carta ha il suo in fondo) */
  .cta-mobile { transition: opacity .3s ease, transform .3s ease; }
  body.in-carta .cta-mobile { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }
}