:root {
  --cream: #F4ECD8;
  --paper: #EDE2C8;
  --ink: #2A1B10;
  --muted: #6E5A47;
  --rule: rgba(42,27,16,0.14);
  --senape: #C99746;
  --terra: #A14E2A;
  --rosa: #7A3A48;
  --cream-70: rgba(245,237,222,0.7);
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 20px;
  --space-5: 28px; --space-6: 36px; --space-7: 56px; --space-8: 80px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; margin: 0 0 var(--space-4); letter-spacing: -0.015em; }
p { margin: 0 0 var(--space-3); }
a { color: var(--terra); }
a:hover { color: var(--rosa); }
img { max-width: 100%; }
::selection { background: var(--senape); color: var(--cream); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--terra); text-transform: uppercase; }
.kicker::before { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--terra); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 36px; }
/* Pagine interne: barra sticky piena, colore del body. */
.nav--page { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--rule); }
/* Home: barra fissa che parte TRASPARENTE sulla hero (logo bianco) e diventa
   piena col logo scuro allo scroll. Lo stato è la classe `giu` sul BODY,
   messa da nav.js: il body sta fuori dall'albero React, quindi il meccanismo
   sopravvive a qualunque re-render (il vecchio aggancio al nodo nav no). */
.nav--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid rgba(245,237,222,0.18); transition: background .3s ease, border-color .3s ease; }
body.giu .nav--overlay { background: var(--cream); border-bottom-color: var(--rule); }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 46px; width: auto; display: block; }
.nav--overlay .logo-light { display: none; }
.nav--overlay .logo-dark { display: block; }
body.giu .nav--overlay .logo-light { display: block; }
body.giu .nav--overlay .logo-dark { display: none; }
.nav--page .logo-dark { display: none; }
.nav-links { display: flex; gap: 30px; align-items: center; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-links a { text-decoration: none; color: var(--ink); }
.nav-links a:hover { color: var(--terra); }
.nav-links a.active { color: var(--terra); }
.nav--overlay .nav-links a { color: rgba(245,237,222,0.92); }
.nav--overlay .nav-links a:hover { color: #fff; }
.nav--overlay .nav-links a.active { color: #fff; }
body.giu .nav--overlay .nav-links a { color: var(--ink); }
body.giu .nav--overlay .nav-links a:hover { color: var(--terra); }
body.giu .nav--overlay .nav-links a.active { color: var(--terra); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; background: var(--terra); color: var(--cream); border: 1px solid var(--terra); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 2px; transition: background .2s, color .2s; }
.btn:hover { background: var(--rosa); border-color: var(--rosa); color: var(--cream); }
.btn-primary { background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--terra); border-color: var(--terra); }
.btn-secondary { background: transparent; color: var(--ink); border: none; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 14px 4px; }
.btn-secondary:hover { background: transparent; color: var(--terra); border-bottom-color: var(--terra); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--terra); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { background: transparent; color: var(--rosa); }
.nav--overlay .btn { background: transparent; border: 1px solid rgba(245,237,222,0.7); color: #fff; }
.nav--overlay .btn:hover { background: rgba(245,237,222,0.14); }
body.giu .nav--overlay .btn { background: var(--terra); border-color: var(--terra); color: var(--cream); }
body.giu .nav--overlay .btn:hover { background: var(--rosa); border-color: var(--rosa); }

.mono-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--terra); text-transform: uppercase; }
.section-label { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.section-label h2 { font-size: clamp(44px, 5vw, 72px); margin: 0; line-height: 1; letter-spacing: -0.01em; }
.section-label .kick { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--muted); max-width: 480px; text-align: right; }

.card { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; background: var(--paper); border-top: 2px solid var(--terra); }
.card-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--terra); text-transform: uppercase; }
.card-title { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; }
.card-body { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.card-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { box-shadow: 0 18px 40px rgba(60,30,10,0.12); border-top-color: var(--rosa); }

.plate { background: var(--paper); border: 1px solid var(--rule); padding: 10px; }
.plate img { display: block; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table td, .table th { padding: 10px 4px; border-bottom: 1px solid var(--rule); text-align: left; }

.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.input { font-family: var(--font-body); font-size: 15px; letter-spacing: normal; text-transform: none; padding: 12px; border: 1px solid var(--rule); background: #FBF5E6; color: var(--ink); border-radius: 2px; }
.input:focus { border-color: var(--terra); outline: none; }

.seg { display: inline-flex; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; }
.seg-opt { position: relative; padding: 12px 28px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; color: var(--ink); transition: background .2s, color .2s; }
.seg-opt:hover { background: rgba(201,151,70,0.15); }
.seg-opt:has(input:checked) { background: var(--terra); color: var(--cream); }
.seg-opt + .seg-opt { border-left: 1px solid var(--rule); }

.ticker-wrap { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); overflow: hidden; }
.ticker { display: flex; gap: 48px; padding: 14px 0; white-space: nowrap; animation: tickerScroll 50s linear infinite; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink); text-transform: uppercase; }
.ticker span { display: flex; align-items: center; gap: 48px; }
.ticker .star { color: var(--terra); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ==========================================================================
   Livello responsive e rifiniture UX — aggiunto da noi, non fa parte del
   design originale di Claude Design.

   Le pagine .dc.html usano stili inline (è il formato che produce Claude
   Design): per non doverle riscrivere — e perderne le modifiche a ogni
   reimport — questo livello agisce per selettori d'attributo sugli stili
   inline stessi. Da qui l'uso di !important, che serve a battere l'inline.
   ========================================================================== */

/* La hero e i ticker escono di proposito dal viewport: `clip` evita lo scroll
   orizzontale senza rompere il position:sticky dell'header (hidden lo rompe). */
html, body { overflow-x: clip; }
/* Il runtime dc inietta al boot `#dc-root,#dc-root>.sc-host{height:100%}`:
   il contenitore della barra sticky diventerebbe alto UN solo viewport e la
   barra sparirebbe dopo la prima schermata. !important perché lo stile del
   runtime arriva in <head> dopo questo foglio. */
#dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100%; }
html { scroll-behavior: smooth; }
/* Gli anchor (#prenota) altrimenti finiscono sotto l'header sticky. */
[id] { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Il segmento pranzo/cena nasconde le radio: senza questo la selezione da
   tastiera è invisibile. */
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: -2px; }

/* La foto della hero è chiara (parete gialla) e il gradiente inline non basta
   a reggere il testo crema: rinforziamo sopra e sotto, dove stanno occhiello,
   titolo e pulsanti. */
[data-screen-label="Hero"] { position: relative; }
[data-screen-label="Hero"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(26,18,11,0.55), rgba(26,18,11,0.28) 40%, rgba(26,18,11,0.80));
}
[data-screen-label="Hero"] > div { position: relative; z-index: 1; }

/* --- Navigazione mobile (il markup lo inietta assets/nav.js) ------------- */
.menu-toggle { display: none; }
.menu-mobile { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav > .btn { display: none; }
  .nav { padding: 12px 22px; gap: 16px; }
  .nav-logo img { height: 40px; }

  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; right: 14px; z-index: 210;
    width: 48px; height: 48px; padding: 0;
    background: transparent; border: 0; cursor: pointer; color: var(--ink);
  }
  .menu-toggle.su-scuro { color: var(--cream); }
  .menu-toggle-barre, .menu-toggle-barre::before, .menu-toggle-barre::after {
    content: ''; display: block; width: 24px; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle-barre::before { transform: translateY(-7px); }
  .menu-toggle-barre::after  { transform: translateY(5px); }
  .menu-aperto .menu-toggle { color: var(--ink); }
  .menu-aperto .menu-toggle-barre { background: transparent; }
  .menu-aperto .menu-toggle-barre::before { transform: rotate(45deg); }
  .menu-aperto .menu-toggle-barre::after  { transform: rotate(-45deg) translateY(-1px); }

  .menu-mobile {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 0; z-index: 200;
    padding: 20px 28px calc(40px + env(safe-area-inset-bottom)); background: var(--cream);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .menu-aperto { overflow: hidden; }
  .menu-aperto .menu-mobile { opacity: 1; visibility: visible; transform: none; }

  .menu-mobile-marchio { display: block; margin-bottom: 40px; }
  .menu-mobile-marchio img { height: 40px; width: auto; display: block; }
  .menu-mobile-voci { display: flex; flex-direction: column; }
  .menu-mobile-voci a {
    padding: 16px 0; border-bottom: 1px solid var(--rule);
    font-family: var(--font-display); font-size: 30px; line-height: 1.1;
    color: var(--ink); text-decoration: none;
  }
  .menu-mobile-voci a[aria-current="page"] { color: var(--terra); }
  .menu-mobile-cta { margin-top: 28px; align-self: flex-start; }
  .menu-mobile-recapiti {
    margin-top: auto; padding-top: 32px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .menu-mobile-note { color: var(--muted); font-size: 10px; margin-bottom: 14px; }
  .menu-mobile-linee { display: flex; gap: 24px; }
}

/* --- Griglie: il design le fissa a 2/3/4 colonne con stili inline --------- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Eccezioni (dopo la regola generica, così vincono per ordine): restano a
     più colonne le griglie che a una colonna diventerebbero solo più lunghe. */
  /* riga piatto ↔ prezzo del menù */
  [style*="1fr) auto"][style*="align-items: baseline"] { grid-template-columns: minmax(0, 1fr) auto !important; }
  /* i tre numeri 50 / 70 / 2 in home */
  [style*="repeat(3, minmax(0, 1fr)); border-top"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* mosaico foto "A tavola" */
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* schede recapiti/orari in home e caratteristiche della squadra */
  [style*="minmax(0, 1fr) minmax(0, 1fr); gap: 24px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* i gap pensati per due colonne, in colonna singola diventano voragini */
  [style*="gap: 64px"] { gap: 36px !important; }
  [style*="gap: 80px"] { gap: 40px !important; }
  [style*="gap: 72px 80px"] { gap: 48px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }
  [style*="gap: 40px"] { gap: 24px !important; }

  .section-label { gap: 12px; }
  .section-label .kick { text-align: left; font-size: 18px; }
}

/* --- Respiro verticale e margini laterali sui telefoni ------------------- */
@media (max-width: 640px) {
  [style*="padding: 100px 36px;"]      { padding: 64px 22px !important; }
  [style*="padding: 100px 36px 72px;"] { padding: 64px 22px 48px !important; }
  [style*="padding: 100px 36px 56px;"] { padding: 64px 22px 40px !important; }
  [style*="padding: 0 36px 100px;"]    { padding: 0 22px 64px !important; }
  [style*="padding: 0 36px 80px;"]     { padding: 0 22px 56px !important; }
  [style*="padding: 80px 36px;"]       { padding: 56px 22px !important; }
  [style*="padding: 64px 36px 40px;"]  { padding: 48px 22px 32px !important; }

  /* hero: 720px fissi lasciano il titolo schiacciato in alto e i pulsanti fuori */
  [data-screen-label="Hero"] { min-height: calc(100svh - 96px) !important; }
  [data-screen-label="Hero"] > div { padding: 104px 22px 48px !important; }
  [data-screen-label="Hero"] .btn { width: 100%; }
  [data-screen-label="Hero"] > div > div:last-child { flex-direction: column; align-items: stretch !important; gap: 12px !important; }

  .card { padding: 26px 22px; }
  .plate { padding: 6px; }
  [style*="padding: 40px 36px;"] { padding: 28px 22px !important; }
  [style*="padding: 36px 32px;"] { padding: 26px 22px !important; }
  [style*="padding: 28px 32px;"] { padding: 22px 20px !important; }
}

/* Sui tablet una colonna sola sprecherebbe metà schermo: le griglie di schede
   restano a due. (Selettore su "; gap" per non toccare i tre numeri della home,
   che hanno "; border-top" e devono restare a tre.) */
@media (min-width: 641px) and (max-width: 900px) {
  [style*="repeat(3, minmax(0, 1fr)); gap"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* --- Barra azioni fissa (solo telefoni): Chiama / WhatsApp ---------------- */
.barra-azioni { display: none; }
@media (max-width: 640px) {
  .barra-azioni { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom); }
  .barra-azioni a { display: flex; align-items: center; justify-content: center; padding: 15px 8px;
    background: var(--ink); color: var(--cream); font-family: var(--font-body); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
  .barra-azioni .wa { background: var(--terra); }
  body { padding-bottom: 52px; }          /* la barra non copre il footer */
  .menu-aperto .barra-azioni { display: none; }
}

/* --- Contrasto: la senape usata come colore di testo su fondi chiari ------
   #C99746 su paper è ~2.2:1. Dentro card e articoli (fondi chiari) la
   scuriamo; nel footer (fondo ink) resta quella di design. */
.card [style*="color: var(--senape)"],
article [style*="color: var(--senape)"] { color: #8A6420 !important; }
/* etichette quasi trasparenti sul blocco terra della home */
[data-screen-label="Prenota"] [style*="rgba(245,237,222,0.55)"] { color: rgba(245,237,222,0.78) !important; }

/* --- Testo solo per screen reader ----------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Livello motion — reveal-on-scroll, hero, micro-interazioni, foto-slot.
   Tutto ciò che NASCONDE vive sotto html.js-anim, aggiunta da assets/anim.js
   solo con prefers-reduced-motion: no-preference e IntersectionObserver
   disponibile: senza script niente è mai invisibile. Gli hover con movimento
   stanno sotto media query dedicate; i soli cambi di colore restano liberi.
   ========================================================================== */

/* --- 1. Reveal-on-scroll -------------------------------------------------- */
html.js-anim .anim {
  opacity: 0; transform: translateY(18px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--anim-d, 0ms);
}
html.js-anim .anim.anim-in { opacity: 1; transform: none; }

/* Contenitori a cascata: i figli sfalsano di 70ms l'uno dall'altro. */
html.js-anim .anim-list > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}
html.js-anim .anim-list.anim-in > * { opacity: 1; transform: none; }
html.js-anim .anim-list.anim-in > :nth-child(1) { transition-delay: var(--anim-d, 0ms); }
html.js-anim .anim-list.anim-in > :nth-child(2) { transition-delay: calc(var(--anim-d, 0ms) + 70ms); }
html.js-anim .anim-list.anim-in > :nth-child(3) { transition-delay: calc(var(--anim-d, 0ms) + 140ms); }
html.js-anim .anim-list.anim-in > :nth-child(4) { transition-delay: calc(var(--anim-d, 0ms) + 210ms); }
html.js-anim .anim-list.anim-in > :nth-child(5) { transition-delay: calc(var(--anim-d, 0ms) + 280ms); }
html.js-anim .anim-list.anim-in > :nth-child(6) { transition-delay: calc(var(--anim-d, 0ms) + 350ms); }
html.js-anim .anim-list.anim-in > :nth-child(7) { transition-delay: calc(var(--anim-d, 0ms) + 420ms); }
html.js-anim .anim-list.anim-in > :nth-child(8) { transition-delay: calc(var(--anim-d, 0ms) + 490ms); }
html.js-anim .anim-list.anim-in > :nth-child(n+9) { transition-delay: calc(var(--anim-d, 0ms) + 540ms); }

/* Rivelazione istantanea dopo un re-render: nessuna transizione, nessun flash.
   (Solo transition: le animation — es. menu-enter — devono poter partire.) */
html.js-anim .anim-instant,
html.js-anim .anim-instant > * { transition: none !important; }

/* --- 2. Hero (Home): entrata al caricamento + respirazione della foto ----- */
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html.js-anim.pronto [data-screen-label="Hero"] .kicker            { animation: heroRise .9s cubic-bezier(.22,.61,.36,1) .15s both; }
html.js-anim.pronto [data-screen-label="Hero"] h1                 { animation: heroRise 1s  cubic-bezier(.22,.61,.36,1) .30s both; }
html.js-anim.pronto [data-screen-label="Hero"] > div > p          { animation: heroRise .9s cubic-bezier(.22,.61,.36,1) .50s both; }
html.js-anim.pronto [data-screen-label="Hero"] > div > div:last-child { animation: heroRise .9s cubic-bezier(.22,.61,.36,1) .68s both; }

/* Slideshow della hero: 4 slide in dissolvenza, CSS puro (niente JS, niente
   nodi iniettati nell'albero React). Due livelli: il fondo della SEZIONE
   mostra le slide dispari (1,3) — l'animazione da stylesheet vince sullo
   sfondo inline — e il ::after mostra le pari (2,4) dissolvendosi con
   l'opacità. I background cambiano solo quando il livello è nascosto: l'unica
   transizione visibile è la dissolvenza. Impilamento: slide (0) < scurimento
   ::before (1) < testi (2). Con «riduci movimento»: slide 1 fissa. */
[data-screen-label="Hero"] { overflow: clip; }
[data-screen-label="Hero"]::before { z-index: 1; }
[data-screen-label="Hero"] > div   { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  [data-screen-label="Hero"] { animation: heroSlideDispari 28s linear infinite; }
  [data-screen-label="Hero"]::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)),
                url('../uploads/hero-2.webp') center/cover;
    opacity: 0;
    animation: heroSlidePari 28s linear infinite;
  }
}
/* Livello pari (::after): visibile nelle finestre della slide 2 e 4. */
@keyframes heroSlidePari {
  0%   { opacity: 0; background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-2.webp'); }
  25%  { opacity: 0; }
  31%  { opacity: 1; }
  50%  { opacity: 1; }
  56%  { opacity: 0; }
  62%  { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-2.webp'); }
  63%  { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-4.webp'); }
  75%  { opacity: 0; }
  81%  { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-4.webp'); }
}
/* Livello dispari (la sezione): scambia 1<->3 mentre il livello pari copre. */
@keyframes heroSlideDispari {
  0%   { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-1.webp'); }
  37%  { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-1.webp'); }
  38%  { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-3.webp'); }
  87%  { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-3.webp'); }
  88%  { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-1.webp'); }
  100% { background-image: linear-gradient(rgba(26,18,11,0.35), rgba(26,18,11,0.72)), url('../uploads/hero-1.webp'); }
}

/* --- 3. Cambio pranzo/cena (pagina Menù) ---------------------------------- */
@keyframes menuIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.js-anim .menu-enter {
  animation: menuIn .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--menu-d, 0ms);
}

/* --- 4. Micro-interazioni -------------------------------------------------- */

/* Link nav: sottolineatura che si disegna da sinistra (lo stato attivo la
   tiene piena). */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after { transform: scaleX(1); }

/* Bottoni: colore sempre; sollevamento e ombra solo se il movimento è gradito.
   I bottoni "di testo" (secondary/ghost) non si sollevano: cambiano solo colore. */
.btn { transition: background .25s ease, color .25s ease, border-color .25s ease,
                   box-shadow .3s ease, transform .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.btn-secondary):not(.btn-ghost):hover  { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(60,30,10,0.16); }
  .btn:not(.btn-secondary):not(.btn-ghost):active { transform: translateY(0);   box-shadow: 0 4px 10px rgba(60,30,10,0.14); transition-duration: .12s; }
}

/* Card: sollevamento discreto, ombra più morbida, freccia che avanza. */
a.card { transition: box-shadow .4s ease, transform .4s ease, border-top-color .4s ease; }
a.card:hover { box-shadow: 0 22px 44px rgba(60,30,10,0.13); }
.card .card-meta { transition: transform .35s cubic-bezier(.22,.61,.36,1), color .25s ease; }
a.card:hover .card-meta { color: var(--terra); }
@media (prefers-reduced-motion: no-preference) {
  a.card:hover { transform: translateY(-4px); }
  a.card:hover .card-meta { transform: translateX(4px); }
}

/* Foto .plate: la foto si "gonfia" appena dentro il passe-partout (1.02 resta
   dentro i 10px di margine interno), con un'ombra che accompagna. */
.plate { overflow: hidden; transition: box-shadow .45s ease; }
.plate img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.plate:hover { box-shadow: 0 16px 36px rgba(60,30,10,0.10); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plate:hover img { transform: scale(1.02); }
}

/* Selettore pranzo/cena: il passaggio di colore si distende un filo. */
.seg-opt { transition: background .3s ease, color .3s ease; }

/* --- 5. Ticker: dissolvenza ai bordi e pausa sotto il mouse --------------- */
.ticker-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-wrap:hover .ticker,
.ticker-wrap:focus-within .ticker { animation-play-state: paused; }

/* --- 6. Placeholder foto: .foto-slot --------------------------------------
   Slot elegante per le foto che ancora mancano: fondo paper con tramatura,
   filo tratteggiato interno come un passe-partout vuoto, stella senape e
   didascalia mono. Uso:
     <div class="foto-slot foto-slot--340"></div>
     <div class="foto-slot foto-slot--260" data-label="La sala — foto in arrivo"></div>
   ------------------------------------------------------------------------- */
.foto-slot {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  min-height: 220px; padding: 24px;
  background:
    repeating-linear-gradient(-45deg, rgba(42,27,16,0.03) 0 1px, transparent 1px 8px),
    var(--paper);
  border: 1px solid var(--rule);
  outline: 1px dashed rgba(42,27,16,0.25); outline-offset: -12px;
}
.foto-slot::before {
  content: ''; width: 46px; height: 49px;
  background: url('icona-light.png') center/contain no-repeat;
  opacity: .5;
}
.foto-slot::after {
  content: 'Foto in arrivo'; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  text-align: center;
}
.foto-slot[data-label]::after { content: attr(data-label); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes fotoStar { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
  .foto-slot::before { animation: fotoStar 7s ease-in-out infinite; }
}
/* Varianti d'altezza, allineate agli slot foto reali del sito. */
.foto-slot--220 { min-height: 220px; } /* mosaico "A tavola" (Home) */
.foto-slot--260 { min-height: 260px; } /* Le sale (Storia) */
.foto-slot--300 { min-height: 300px; } /* modulo prenotazione (Contatti) */
.foto-slot--340 { min-height: 340px; } /* post del Diario, racconto Storia */
.foto-slot--380 { min-height: 380px; } /* teaser storia (Home) */
.foto-slot--460 { min-height: 460px; } /* La squadra (Storia) */
@media (max-width: 640px) {
  .foto-slot--340, .foto-slot--380, .foto-slot--460 { min-height: 260px; }
}

/* --- Diario: post in evidenza, righe dell'elenco, card con foto ----------- */
.post-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
  padding: 30px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.post-riga-titolo { font-family: var(--font-display); font-size: 28px; line-height: 1.15;
  margin-bottom: 8px; transition: color .25s ease; }
.post-riga:hover .post-riga-titolo { color: var(--terra); }
.post-riga .card-meta { transition: transform .35s cubic-bezier(.22,.61,.36,1), color .25s ease; }
.post-riga:hover .card-meta { color: var(--terra); }
@media (prefers-reduced-motion: no-preference) {
  .post-riga:hover .card-meta { transform: translateX(4px); }
}
.post-evidenza h2 { transition: color .25s ease; }
.post-evidenza:hover h2 { color: var(--terra); }

/* Card con la foto a filo dei bordi (anteprime del diario in home). */
.card--foto { padding-top: 0; }
.card-foto { margin: 0 -28px 8px; height: 190px; overflow: hidden; }
.card-foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.card--foto:hover .card-foto img { transform: scale(1.03); }
}
@media (max-width: 640px) {
  .card-foto { margin: 0 -22px 8px; height: 170px; }
}

/* --- Il timbro di casa: il monogramma come decorazione ------------------- */

/* Filigrana sulle sezioni scure (Prenota in home, La squadra nella storia,
   il modulo dei contatti): sigillo crema appena accennato nell'angolo. */
[data-screen-label="Prenota"],
[data-screen-label="La squadra"],
[data-screen-label="Modulo prenotazione"] { position: relative; overflow: clip; }
[data-screen-label="Prenota"]::after,
[data-screen-label="La squadra"]::after,
[data-screen-label="Modulo prenotazione"]::after {
  content: ''; position: absolute; right: -70px; bottom: -90px;
  width: 400px; height: 422px; pointer-events: none;
  background: url('icona-dark.png') center/contain no-repeat;
  opacity: 0.06; transform: rotate(-8deg);
}
[data-screen-label="Prenota"] > div,
[data-screen-label="La squadra"] > div,
[data-screen-label="Modulo prenotazione"] > div { position: relative; z-index: 1; }
@media (max-width: 640px) {
  [data-screen-label="Prenota"]::after,
  [data-screen-label="La squadra"]::after,
  [data-screen-label="Modulo prenotazione"]::after {
    width: 240px; height: 253px; right: -50px; bottom: -60px;
  }
}

/* La poesia si apre col monogramma, come un frontespizio. */
[data-screen-label="Poesia"] > div::before {
  content: ''; display: block; width: 54px; height: 57px; margin: 0 auto 26px;
  background: url('icona-light.png') center/contain no-repeat;
  opacity: .85;
}

/* Sigillo di chiusura in fondo agli articoli del diario. */
.sigillo { display: block; width: 44px; height: auto; margin: 44px auto 0; opacity: .75; }

/* --- Velo di benvenuto (solo Home) ----------------------------------------
   Copre il primo render del runtime: monogramma che pulsa su fondo crema,
   dissolvenza quando hero e React sono pronti (classe .via dal piccolo script
   in pagina). Autodissolvenza CSS a 3,2s come rete di sicurezza. */
#benvenuto {
  position: fixed; inset: 0; z-index: 300; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
  animation: benvenutoAuto .6s ease 3.2s forwards;
}
#benvenuto img { width: 64px; height: auto; }
#benvenuto.via { opacity: 0; pointer-events: none; }
@keyframes benvenutoAuto { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes benvenutoPulsa { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .95; transform: scale(1.05); } }
  #benvenuto img { animation: benvenutoPulsa 1.5s ease-in-out infinite; }
}

/* Mini-carosello dentro una card (3 foto in dissolvenza, CSS puro). I ritardi
   negativi fanno partire il ciclo gia' "in quadro": niente lampo iniziale.
   Con «riduci movimento» resta la prima foto. */
.card-foto--carosello { position: relative; }
.card-foto--carosello img { position: absolute; inset: 0; }
.card-foto--carosello img:not(:first-child) { opacity: 0; }
.carosello-punti { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .card-foto--carosello img { animation: caroselloCard 9s linear infinite; }
  .card-foto--carosello img:nth-child(1) { animation-delay: 0s; }
  .card-foto--carosello img:nth-child(2) { animation-delay: -6s; }
  .card-foto--carosello img:nth-child(3) { animation-delay: -3s; }
  /* i tre puntini si accendono in sincrono con la foto in quadro */
  .carosello-punti { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1;
    display: flex; gap: 7px; justify-content: center; }
  .carosello-punti i { width: 7px; height: 7px; border-radius: 50%;
    background: var(--cream); box-shadow: 0 0 4px rgba(26,18,11,0.35);
    animation: caroselloPunto 9s linear infinite; }
  .carosello-punti i:nth-child(1) { animation-delay: 0s; }
  .carosello-punti i:nth-child(2) { animation-delay: -6s; }
  .carosello-punti i:nth-child(3) { animation-delay: -3s; }
}
@keyframes caroselloPunto {
  0%   { opacity: 1; transform: scale(1.15); }
  30%  { opacity: 1; transform: scale(1.15); }
  36%  { opacity: .4; transform: scale(1); }
  96%  { opacity: .4; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.15); }
}
@keyframes caroselloCard {
  0%   { opacity: 1; }
  29%  { opacity: 1; }
  33%  { opacity: 0; }
  96%  { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Toast del sito (esiti del modulo): crema, filo terra/senape/rosa ----- */
#toast-sito {
  position: fixed; left: 50%; bottom: 28px; z-index: 400;
  transform: translate(-50%, 16px);
  max-width: min(92vw, 480px);
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--rule); border-left: 4px solid var(--terra);
  box-shadow: 0 18px 44px rgba(42, 27, 16, 0.24);
  padding: 16px 22px; font-size: 15px; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
#toast-sito.toast-visibile { opacity: 1; transform: translate(-50%, 0); }
#toast-sito.toast-errore { border-left-color: var(--rosa); }
#toast-sito.toast-avviso { border-left-color: var(--senape); }
@media (max-width: 640px) {
  #toast-sito { bottom: 68px; } /* sopra la barra azioni Chiama/WhatsApp */
}

/* --- Avviso cookie (solo tecnici): card crema in basso a sinistra --------- */
#avviso-cookie {
  position: fixed; left: 24px; bottom: 24px; z-index: 350;
  max-width: 420px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--rule); border-left: 4px solid var(--senape);
  box-shadow: 0 18px 44px rgba(42, 27, 16, 0.24);
  padding: 18px 22px; font-size: 14px; line-height: 1.55;
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
#avviso-cookie.visibile { opacity: 1; transform: none; }
#avviso-cookie p { margin: 0 0 14px; }
#avviso-cookie a { color: var(--terra); }
#avviso-cookie .btn { font-size: 12px; padding: 10px 20px; }
@media (max-width: 640px) {
  #avviso-cookie { left: 12px; right: 12px; bottom: 68px; max-width: none; }
}