/* Ristorante Zimino — anteprima non ufficiale. L'idea: il pesce che arriva la
   mattina dal porto; l'acqua accompagna la pagina. Il pesce sul ghiaccio in
   cima, il porto dove si muove solo l'acqua, le cassette del pescato, il
   cappon magro, l'onda che scorre con la storia, la galleria da far scorrere,
   il tabellone della banchina, la rosa dei venti, la chat. Newsreader per i
   titoli, Inter per leggere e per i prezzi (Newsreader non ha l'euro); il
   mare, l'abisso, la schiuma e il corallo. */
@font-face{font-family:Newsreader;src:url(../../font/newsreader-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url(../../font/inter-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --mare:#0F6B7D;           /* bianco sopra 6,1:1 */
  --abisso:#0D181C;
  --schiuma:#F4F8F8;
  --corallo:#E0795A;        /* abisso sopra 6,6:1 */
  --legno:#B98A5A;
  --f:var(--schiuma);--t:var(--abisso);--m:#4E6064;--l:#D5E2E4;--carta:#E5EEEF;
  --a:var(--mare);--a-btn:var(--mare);--a-su:#fff;
  --font-t:Newsreader,Georgia,serif;--font-b:Inter,system-ui,sans-serif;
  --bordo:clamp(1rem,4.5vw,4rem);--r:3px;--r-btn:3px;
}
h1,h2,h3{font-family:var(--font-t);font-weight:400;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);margin-bottom:1rem}
section{padding:clamp(3.5rem,8vw,7rem) var(--bordo)}

.testata{background:var(--abisso);color:var(--schiuma)}
.t-marchio{font:500 1.6rem/1 var(--font-t);font-style:italic}

/* ── 1. il pesce sul ghiaccio, e le parole a sinistra, a mezza altezza ────── */
.zimino .clip{--clip-h:calc(100svh - 5.4rem);align-items:center}
.zimino .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,28,.9) 0%,rgba(13,24,28,.6) 38%,rgba(13,24,28,0) 70%),
  linear-gradient(0deg,rgba(13,24,28,.55),transparent 25%)}
.zimino .clip-parole{padding:0 var(--bordo);color:#fff;max-width:44rem;border-left:3px solid var(--corallo);margin-left:var(--bordo);padding-left:clamp(1rem,3vw,2rem)}
/* il velo sotto le parole (base.css): a 1024 px il titolo arriva oltre il velo da
   sinistra, sopra il brodo chiaro */
.zimino .clip{--velo-parole:rgba(13,24,28,.45)}
.clip-nome{font:400 clamp(3rem,1.4rem + 5.6vw,7.2rem)/.95 var(--font-t);font-style:italic;letter-spacing:-.025em}
.clip-frase{font:400 clamp(1.1rem,1rem + .5vw,1.4rem)/1.4 var(--font-b);margin-top:1rem;max-width:30ch;color:#E2EEF0}
.clip-btn{display:inline-block;margin-top:1.5rem;background:var(--corallo);color:var(--abisso);font:600 1rem var(--font-b);padding:1rem 1.6rem;
  border-radius:var(--r-btn);text-decoration:none}
.clip-btn:hover{background:#ea8d71}

/* ── 2. il porto: si muove solo l'acqua ───────────────────────────────────── */
.apertura{position:relative;min-height:min(86svh,54rem);padding:0;display:grid;align-items:end;overflow:hidden;background:var(--abisso);color:#fff}
.ap-mare{position:absolute;inset:0}
.ap-mare picture,.ap-mare img{position:absolute;inset:0;width:100%;height:100%}
.ap-mare img{object-fit:cover;object-position:50% 50%}
/* sopra, il canvas con le righe dell'acqua che si muovono (ristorante-zimino.js) */
.zm-onde{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.apertura::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(13,24,28,.9) 0%,rgba(13,24,28,.55) 40%,rgba(13,24,28,0) 72%),
    linear-gradient(90deg,rgba(13,24,28,.55) 0%,transparent 60%)}
.ap-testo{position:relative;z-index:2;padding:0 var(--bordo) clamp(2.5rem,6vw,4.5rem);max-width:50rem}
.apertura h2{font-size:clamp(3rem,1.5rem + 6vw,7.2rem);line-height:.95;margin-bottom:1.2rem}
.riga{display:block}
.ap-sotto{font-size:1.1rem;max-width:44ch;color:#E2EEF0}
.ap-fonte{position:absolute;z-index:2;left:var(--bordo);top:1rem;font-size:.75rem;color:#fff;background:rgba(13,24,28,.65);padding:.3rem .7rem;border-radius:12px}

/* ── 3. il menu': le cassette del pescato ─────────────────────────────────── */
.cassette{background:var(--carta)}
.cs-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:2.2rem}
.cs-testa p{max-width:42ch;color:var(--m)}
.cs-pila{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 1rem}
.cs{position:relative;display:grid;align-content:center;gap:.3rem;min-height:9.5rem;padding:1.2rem 1rem;text-align:center;color:#2b1d10;
  background:linear-gradient(180deg,transparent 0 30%,rgba(60,35,15,.35) 30% 32%,transparent 32% 64%,rgba(60,35,15,.35) 64% 66%,transparent 66%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),var(--legno);
  border:6px solid #8d6238;border-top-width:10px;box-shadow:0 14px 18px -12px rgba(13,24,28,.6)}
.cs::before,.cs::after{content:"";position:absolute;top:44%;width:.8rem;height:1.6rem;border-radius:3px;background:#5a3c20}
.cs::before{left:-.2rem}.cs::after{right:-.2rem}
.cs-n{font:700 1.15rem/1.15 var(--font-b);text-transform:uppercase;letter-spacing:.06em;color:#1f1409;opacity:.92}
.cs-d{font-size:.85rem;color:#3a2814}
.cs-p{font:700 1.05rem var(--font-b);color:var(--abisso);background:rgba(244,248,248,.85);justify-self:center;padding:.1rem .6rem;border-radius:2px}
.cs:nth-child(even){transform:translateY(1rem)}
.mosso .cs{transition:transform .8s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.mosso .cs:not(.dentro){opacity:0;transform:translateX(-3rem) rotate(-3deg)}
.mosso .cs:nth-child(4n+2){transition-delay:.08s}.mosso .cs:nth-child(4n+3){transition-delay:.16s}.mosso .cs:nth-child(4n){transition-delay:.24s}
.cassette .nota{margin-top:2.4rem}

/* ── 4. il cappon magro, a tutta larghezza ────────────────────────────────── */
.cappon{position:relative;min-height:84svh;display:grid;align-items:center;justify-items:end;overflow:hidden;color:#fff;background:var(--abisso)}
.cp-foto{position:absolute;inset:-8% 0}
.cp-foto picture,.cp-foto img{width:100%;height:100%}
/* niente animazioni che muovono il cibo con lo scorrimento (voce Cowork 24/10 (3)): la foto sta ferma */
.cp-foto img{object-fit:cover}
.cappon::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(13,24,28,.92),rgba(13,24,28,.55) 50%,rgba(13,24,28,.1))}
.cp-testo{position:relative;z-index:1;max-width:36rem}
.cp-quando{display:inline-block;background:var(--corallo);color:var(--abisso);font-weight:700;padding:.35rem .8rem;margin-bottom:1rem}
.cappon h2{font-size:clamp(2.8rem,1.4rem + 4.4vw,5.6rem)}
.cappon p{max-width:42ch}
.cp-nota{font-size:.82rem;color:#CFE0E3;margin-top:1rem}
.mosso .cp-testo{opacity:0;transform:translateX(3rem);transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1)}
.mosso .cp-testo.dentro{opacity:1;transform:none}

/* ── 5. lo zimino: la storia con l'onda che scorre ────────────────────────── */
.zimino-s{position:relative;background:var(--mare);color:#fff;padding-top:0;overflow:hidden;--m:#D7ECEF}
/* l'onda e' uno sfondo che si ripete e scivola con lo scorrimento: nessun
   elemento piu' largo della pagina */
.onda{height:5rem;margin:0 calc(var(--bordo) * -1) 2rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q100 10 200 60 T400 60 V0 H0Z' fill='%23E5EEEF'/%3E%3C/svg%3E") repeat-x;
  background-size:25rem 100%;background-position:calc(var(--p,.5) * -50rem) 0}
.zs-testo{max-width:46rem}
.zs-motto{font:400 clamp(1.4rem,1.1rem + 1vw,1.9rem)/1.3 var(--font-t);font-style:italic;margin-bottom:1.2rem}
.zs-testo p+p{margin-top:.8rem}
.zs-voto b{font-weight:700}

/* ── 6. dalla cucina: la galleria da far scorrere ─────────────────────────── */
.gz-testa{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.6rem}
.gz-bottoni{display:flex;gap:.6rem}
.gz-bottoni button{width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--abisso);background:none;color:var(--abisso);font-size:1.2rem;cursor:pointer}
.gz-bottoni button:hover{background:var(--abisso);color:#fff}
.gz-fila{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,34rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;scrollbar-width:thin}
.gz-fila figure{scroll-snap-align:start}
.gz-fila img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.gz-fila figcaption{font-size:.88rem;color:var(--m);margin-top:.4rem}

/* ── 7. gli orari: il tabellone della banchina ────────────────────────────── */
.tabellone{background:var(--abisso);color:#fff;--m:#B9CDD1}
.tb-quadro{background:#060c0e;border:3px solid #2a3a3f;border-radius:6px;padding:1.2rem;max-width:52rem;margin-bottom:1.6rem;overflow-x:auto}
.tb-intesta,.tb-righe li{display:grid;grid-template-columns:8.5rem 1fr 1fr;gap:.6rem}
.tb-intesta{font:600 .75rem var(--font-b);letter-spacing:.12em;color:#7fa3aa;padding:0 .2rem .6rem}
.tb-righe{list-style:none;padding:0;display:grid;gap:.35rem}
.tb-righe span{font:600 .95rem/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;background:#1a2226;color:#F5C451;padding:.55rem .5rem;border-radius:2px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);white-space:nowrap;overflow:hidden}
.tb-righe .tb-g{color:#fff}

/* ── 8. dove: la rosa dei venti ───────────────────────────────────────────── */
.rosa{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--carta)}
.rs-voci{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.8rem}
.rs-voci li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:baseline;padding-left:1.4rem;position:relative}
.rs-voci li::before{content:"";position:absolute;left:0;top:.5rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--corallo)}
.rs-voci .rv-1::before{background:var(--mare)}.rs-voci .rv-2::before{background:var(--abisso)}
.rs-voci b{font:500 1.9rem/1 var(--font-t)}
.rs-voci span{grid-column:2;color:var(--m);font-size:.9rem}
.rs-maps .maps{display:inline-block;padding:.4rem 0;color:var(--mare)}
.gdpr{font-size:.82rem;color:var(--m);max-width:52ch}
.rs-rosa{width:min(100%,26rem);justify-self:center}
.rs-rosa svg{width:100%;height:auto;overflow:visible}
.rs-giro,.rs-giro2{fill:none;stroke:var(--mare);stroke-width:1.5}
.rs-giro2{stroke-dasharray:3 5}
.rs-stella{fill:var(--abisso)}
.rs-stella2{fill:var(--mare);opacity:.55}
.rs-rosa text{font:600 13px var(--font-b);fill:var(--abisso)}
.ag path{stroke-width:4;stroke-linecap:round;stroke:var(--corallo);stroke-dasharray:100;stroke-dashoffset:0}
.ag circle{fill:var(--corallo)}
.ag-1 path{stroke:#7ec8d4}.ag-1 circle{fill:#7ec8d4}
.ag-2 path{stroke:#F4F8F8}.ag-2 circle{fill:#F4F8F8;stroke:var(--abisso);stroke-width:2}
.rs-centro{fill:var(--corallo);stroke:var(--abisso);stroke-width:3}
.rs-rosa figcaption{text-align:center;font-size:.85rem;color:var(--m);margin-top:.6rem}
.mosso .rs-rosa .ag path{transition:stroke-dashoffset 1.2s ease-out}
.mosso .rs-rosa:not(.dentro) .ag path{stroke-dashoffset:100}
.mosso .rs-rosa .ag circle{transition:opacity .3s 1s}
.mosso .rs-rosa:not(.dentro) .ag circle{opacity:0}
.mosso .rs-rosa .rs-stella{transition:transform 1.2s cubic-bezier(.3,1.3,.4,1),opacity .6s;transform-origin:150px 150px}
.mosso .rs-rosa:not(.dentro) .rs-stella{transform:scale(.55);opacity:0}   /* non ruotata: una stella ruotata misura piu' della pagina */

/* ── 9. prenota o chiedi: la chat ─────────────────────────────────────────── */
.chat-s{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.ch-testo p{max-width:38ch}
.ch-tel{margin-top:1rem;font-weight:600}
.chat{background:var(--carta);border-radius:18px;padding:clamp(1.2rem,3vw,1.8rem);gap:.8rem}
.ch-loro{justify-self:start;max-width:85%;background:var(--mare);color:#fff;padding:.8rem 1rem;border-radius:16px 16px 16px 4px;font-size:.98rem}
.chat .ch-voi{justify-self:end;width:min(100%,26rem);background:#fff;border-radius:16px 16px 4px 16px;padding:.7rem .9rem;font-size:.8rem;color:var(--m);
  box-shadow:0 6px 14px -10px rgba(13,24,28,.5)}
.chat .bk-riga .ch-voi{width:100%}
.chat .ch-voi input,.chat .ch-voi textarea{border:0;border-bottom:1.5px solid var(--l);border-radius:0;padding:.4rem 0;min-height:2.4rem;background:transparent;color:var(--t)}
.chat .bk-ok{font-size:.85rem}
.chat button{justify-self:end;border-radius:99px}

/* ── il piede: la linea dell'onda, col nome sopra ─────────────────────────── */
.piede-zimino{background:var(--abisso);color:#CFE0E3;padding:clamp(2.5rem,6vw,4rem) var(--bordo) 2rem;--m:#9FB7BC}
.pz-nome{font:400 clamp(3.6rem,1.6rem + 8vw,9rem)/.9 var(--font-t);font-style:italic;color:#fff;letter-spacing:-.03em}
.pz-onda{display:block;width:100%;height:1.6rem;margin:.6rem 0 1.6rem}
.pz-onda path{fill:none;stroke:var(--corallo);stroke-width:3}
.pz-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin-bottom:1.4rem}
.pz-voci a{text-decoration:none;font:500 1.15rem var(--font-t);font-style:italic;color:#fff;padding:.35rem 0}
.piede-zimino .legale a{color:#fff}

@media(max-width:900px){
  .apertura::after{background:linear-gradient(0deg,rgba(13,24,28,.95) 0%,rgba(13,24,28,.78) 55%,rgba(13,24,28,.2) 85%)}
  .apertura .ferma-moto{top:2.6rem;bottom:auto}
  /* sul telefono le parole stanno in alto (25/10/2026): il pesto che si
     scioglie nel minestrone e' nella parte bassa del video, e resta scoperto */
  .zimino .clip::after{background:linear-gradient(180deg,rgba(13,24,28,.92) 0%,rgba(13,24,28,.66) 42%,rgba(13,24,28,.08) 72%)}
  .zimino .clip{align-items:start}
  .zimino .clip-parole{margin-top:2.2rem}
  .cs-pila{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* due cassette per riga: «MINESTRONE» e «STOCCAFISSO» a 320 px non ci stavano */
  .cs-n{font-size:.95rem;letter-spacing:.03em;hyphens:auto;overflow-wrap:anywhere}
  .rosa,.chat-s{grid-template-columns:1fr}
  .cappon{justify-items:start}
  .tb-intesta,.tb-righe li{grid-template-columns:5.5rem 1fr 1fr}
  .tb-righe span{font-size:.72rem;letter-spacing:.03em}
}