/* Trattoria Pizzeria San Giorgio — anteprima non ufficiale. L'idea: il forno
   al centro di tutto, a due passi dall'Acquario. La pizza che entra nel forno
   in cima, la pizza che gira nell'anello, il menu' a spicchi, le schede
   tonde, la focaccia sul basilico, le 24 ore, l'orologio del forno, il
   righello, l'interruttore tavolo/asporto, il nome tondo. Jost e Inter;
   pomodoro, basilico, farina e la notte. */
@font-face{font-family:Jost;src:url(../../font/jost-100-900.woff2) format("woff2");font-weight:100 900;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{
  --pomodoro:#D1442B;       /* bianco sopra 4,5:1 nei bottoni grandi; il testo usa il pomodoro scuro */
  --pomodoro-scuro:#A8311C; /* 5,9:1 sulla farina */
  --basilico:#3D6B35;       /* bianco sopra 6,4:1 */
  --farina:#FFFFFF;
  --notte:#1A1210;
  --f:var(--farina);--t:var(--notte);--m:#5F5652;--l:#EEE3DE;--carta:#FBF3EF;
  --a:var(--pomodoro-scuro);--a-btn:var(--pomodoro-scuro);--a-su:#fff;
  --font-t:Jost,system-ui,sans-serif;--font-b:Inter,system-ui,sans-serif;
  --bordo:clamp(1rem,4.5vw,4rem);--r:14px;--r-btn:99px;
}
h1,h2,h3{font-family:var(--font-t);font-weight:600;line-height:1;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(--farina);border-bottom:1px solid var(--l)}
.t-marchio{font:700 1.5rem/1 var(--font-t);color:var(--pomodoro-scuro);letter-spacing:-.02em}
#nav a{font-weight:500;font-size:.95rem}

/* ── 1. il forno, e le parole in alto al centro ───────────────────────────── */
.pizza .clip{--clip-h:calc(100svh - 5.2rem);align-items:start;justify-items:center;text-align:center}
.pizza .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,18,16,.88),rgba(26,18,16,.45) 38%,rgba(26,18,16,0) 62%)}
.pizza .clip-parole{padding:clamp(2rem,5vw,4rem) var(--bordo) 0;color:var(--farina);display:flex;flex-direction:column;align-items:center}
/* il velo sotto le parole (base.css): su computer la frase scende dove il velo
   dall'alto e' quasi aperto */
.pizza .clip{--velo-parole:rgba(26,18,16,.58)}
.clip-nome{font:500 clamp(2.6rem,1rem + 5.6vw,6.6rem)/.95 var(--font-t);letter-spacing:-.035em;max-width:14ch}
/* la frase e' un blocco piu' stretto del titolo: senza margini automatici
   restava a sinistra, col testo centrato dentro (voce Cowork 26/10 (1)) */
.clip-frase{font:400 clamp(1.05rem,.95rem + .5vw,1.35rem)/1.45 var(--font-b);margin-top:1rem;max-width:36ch;margin-inline:auto;color:#F6E9E2}
.clip-btn{margin-top:1.5rem;display:inline-block;background:var(--pomodoro);color:#fff;font:600 1.05rem var(--font-b);padding:1rem 1.7rem;
  border-radius:var(--r-btn);text-decoration:none}
.clip-btn:hover{background:var(--pomodoro-scuro)}

/* ── 2. la pizza che gira nell'anello ─────────────────────────────────────── */
.apertura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;overflow:hidden;
  background:radial-gradient(circle at 78% 50%,var(--carta) 0,var(--carta) 34%,var(--farina) 34.2%)}
.apertura h2{font-size:clamp(2.8rem,1.4rem + 4.4vw,5.6rem);font-weight:500;margin-bottom:1.4rem}
.riga{display:block}
.ap-sotto{font-size:1.1rem;max-width:40ch}
.ap-tondo{position:relative;width:min(100%,36rem);aspect-ratio:1;justify-self:center}
.anello{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anello text{font:600 9.6px/1 var(--font-t);fill:var(--basilico);text-transform:uppercase}
.pizza-gira{position:absolute;inset:9%;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -30px rgba(26,18,16,.6);
  animation:gira 90s linear infinite}
.pizza-gira picture,.pizza-gira img{width:100%;height:100%}
.pizza-gira img{object-fit:cover;transform:scale(1.17)}
@keyframes gira{to{transform:rotate(360deg)}}
.ap-tondo .ferma-moto{right:0;bottom:0;background:var(--notte)}

/* ── 3. il menu' sulla pizza, a spicchi ───────────────────────────────────── */
.spicchi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"testa testa" "pizza scelte" "nota nota";
  gap:1.5rem clamp(2rem,5vw,5rem);align-items:center;background:var(--carta)}
.sp-testa{grid-area:testa;max-width:44rem}
.sp-testa p{color:var(--m)}
.sp-pizza{grid-area:pizza;position:relative;width:min(100%,32rem);aspect-ratio:1;justify-self:center}
.sp{position:absolute;inset:0;border-radius:50%;overflow:hidden;cursor:pointer;transition:transform .45s cubic-bezier(.3,1.4,.5,1),filter .3s;
  --dx:0;--dy:0}
.sp picture,.sp img{width:100%;height:100%}
.sp img{object-fit:cover;transform:scale(1.12)}
.sp-0{clip-path:polygon(50% 50%,50% -10%,110% -10%,110% 50%);--dx:1;--dy:-1}
.sp-1{clip-path:polygon(50% 50%,110% 50%,110% 110%,50% 110%);--dx:1;--dy:1}
.sp-2{clip-path:polygon(50% 50%,50% 110%,-10% 110%,-10% 50%);--dx:-1;--dy:1}
.sp-3{clip-path:polygon(50% 50%,-10% 50%,-10% -10%,50% -10%);--dx:-1;--dy:-1}
.sp.scelto{transform:translate(calc(var(--dx) * 5%),calc(var(--dy) * 5%))}
.sp-pizza.attiva .sp:not(.scelto){filter:saturate(.55) brightness(.92)}
.sp-scelte{grid-area:scelte;list-style:none;padding:0;display:grid;gap:.7rem;counter-reset:spicchio}
.sc{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:.15rem .9rem;align-items:baseline;text-align:left;cursor:pointer;font:inherit;color:var(--t);
  background:var(--farina);border:2px solid var(--l);border-radius:var(--r);padding:1rem 1.2rem;counter-increment:spicchio}
.sc::before{content:counter(spicchio);grid-row:span 2;font:700 1.6rem/1 var(--font-t);color:var(--pomodoro-scuro)}
.sc[aria-pressed="true"]{border-color:var(--pomodoro-scuro);box-shadow:0 10px 24px -14px rgba(168,49,28,.6)}
.sc-n{font:600 1.4rem/1.1 var(--font-t)}
.sc-p{font-weight:700;color:var(--pomodoro-scuro)}
.sc-d{grid-column:2/-1;color:var(--m);font-size:.95rem}
.spicchi .nota{grid-area:nota}

/* ── 4. dalla cucina: le schede tonde ─────────────────────────────────────── */
.tonde h2{text-align:center;margin-bottom:2.4rem}
.td-fila{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,2.4vw,2rem)}
.td{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:12%;
  background:var(--farina);border:2px solid var(--basilico);box-shadow:inset 0 0 0 8px var(--farina),inset 0 0 0 10px rgba(61,107,53,.25)}
.td:nth-child(even){background:var(--basilico);color:#fff;border-color:var(--basilico);box-shadow:inset 0 0 0 8px var(--basilico),inset 0 0 0 10px rgba(255,255,255,.4)}
.td-n{font:600 clamp(1.15rem,.9rem + .8vw,1.6rem)/1.1 var(--font-t)}
.td-d{font-size:.85rem;opacity:.9}
.td-p{font-weight:700}
.mosso .td{transition:transform .8s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.mosso .td:not(.dentro){opacity:0;transform:rotate(-90deg) scale(.6)}
.mosso .td-1{transition-delay:.1s}.mosso .td-2{transition-delay:.2s}.mosso .td-3{transition-delay:.3s}

/* ── 5. la focaccia col formaggio, sul verde basilico ─────────────────────── */
.focaccia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--basilico);color:#fff;
  --m:#DCE8D8}
/* ferma: niente animazioni che muovono il cibo con lo scorrimento (voce Cowork 24/10 (3)) */
.fc-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.fc-foto figcaption{font-size:.8rem;color:#DCE8D8;margin-top:.5rem}
.focaccia h2{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.6rem)}
.focaccia p{max-width:42ch;font-size:1.08rem}
.mosso .fc-testo{opacity:0;transform:translateX(-2rem);transition:opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1)}
.mosso .fc-testo.dentro{opacity:1;transform:none}

/* ── 6. le 24 ore dell'impasto ────────────────────────────────────────────── */
.impasto{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.im-anello{position:relative;aspect-ratio:1;width:min(100%,20rem);justify-self:center}
.im-anello svg{width:100%;height:100%;transform:rotate(-90deg)}
.im-fondo,.im-pieno{fill:none;stroke-width:14}
.im-fondo{stroke:var(--l)}
.im-pieno{stroke:var(--pomodoro);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--p,1) - .15) * 2.2),1))}
.im-ore{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.im-ore span:first-child{font:600 clamp(4rem,2.4rem + 4vw,6.4rem)/.9 var(--font-t);color:var(--pomodoro-scuro)}
.im-ore span+span{font-weight:600;color:var(--m)}
.im-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:50% 50% var(--r) var(--r)}
.im-foto figcaption{font-size:.78rem;color:var(--m);margin-top:.4rem}
.mosso .im-foto{clip-path:circle(0 at 50% 50%);transition:clip-path 1.2s cubic-bezier(.6,0,.2,1)}
.mosso .im-foto.dentro{clip-path:circle(75% at 50% 50%)}

/* ── 7. gli orari: l'orologio del forno ───────────────────────────────────── */
.orologio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--notte);color:#fff;
  --m:#D8CBC5}
.or-quadrante{width:min(100%,24rem);justify-self:center}
.or-quadrante svg{width:100%;height:auto;overflow:visible}
.or-cassa{fill:#2A1E1A;stroke:var(--pomodoro);stroke-width:4}
.or-tacche line{stroke:#F6E9E2;stroke-width:2.5;stroke-linecap:round}
.or-arco{fill:none;stroke:#F2A65A;stroke-width:9;stroke-dasharray:.35 .25;opacity:.85}
.or-lancette line{stroke:#fff;stroke-linecap:round}
.or-ore{stroke-width:5}.or-min{stroke-width:3}
.or-quadrante svg>circle:last-of-type{fill:var(--pomodoro)}
.or-quadrante text{font:600 11px var(--font-b);fill:#F6E9E2}
.or-lancette{transform-origin:100px 100px}
.mosso .or-quadrante.dentro .or-lancette{animation:lancette 2.4s cubic-bezier(.3,.8,.3,1)}
@keyframes lancette{from{transform:rotate(-360deg)}}
.or-giorni{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.or-giorni li{border:1.5px solid rgba(255,255,255,.3);border-radius:99px;padding:.45rem .9rem;font-size:.9rem;color:var(--m)}
.or-giorni b{color:#fff;margin-right:.3rem}

/* ── 8. dove: il righello ─────────────────────────────────────────────────── */
.righello{background:var(--carta)}
.rg-testo{max-width:52ch;margin-bottom:2.6rem}
.rg-asta{position:relative;padding:5.2rem 0 4.6rem}
.rg-tacche{position:relative;display:flex;justify-content:space-between;height:2.6rem;background:#F2D9A8;border:2px solid var(--notte);border-radius:4px;padding:0}
.rg-t{position:relative;width:2px;height:40%;background:var(--notte)}
.rg-t:first-child,.rg-t:last-child{opacity:0}
.rg-cento{height:70%}
.rg-cento::after{content:attr(data-m);position:absolute;top:110%;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:600}
.rg-zero{position:absolute;left:0;bottom:2.2rem;font-weight:700;color:var(--pomodoro-scuro);font-size:.9rem}
.rg-punti{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.rg-punti b{font:600 1.6rem/1 var(--font-t);color:var(--pomodoro-scuro);display:block}
.rg-pronto .rg-punti{margin:0;position:absolute;inset:0}
.rg-pronto .rg-p{position:absolute;left:calc(var(--x) * 100%);top:0;transform:translateX(-50%);text-align:center;font-size:.9rem;
  padding-bottom:.9rem;white-space:nowrap}
.rg-pronto .rg-p::after{content:"";position:absolute;left:50%;bottom:-1.1rem;width:2px;height:2rem;background:var(--pomodoro-scuro)}
.rg-pronto .rg-p1{top:auto;bottom:0;padding:.9rem 0 0}
.rg-pronto .rg-p1::after{bottom:auto;top:-1.1rem}
.mosso.rg-x .rg-p,.mosso .rg-pronto .rg-p{transition:opacity .5s,translate .7s cubic-bezier(.3,1.4,.5,1)}
.mosso .rg-pronto .rg-p:not(.dentro){opacity:0;translate:0 -1rem}
.rg-maps .maps{display:inline-block;padding:.4rem 0;color:var(--pomodoro-scuro)}
.gdpr{font-size:.82rem;color:var(--m);max-width:52ch}

/* ── 9. prenota o ordina: l'interruttore ──────────────────────────────────── */
.prenota{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.pr-testo p{max-width:38ch}
.pr-tel{margin-top:1rem;font-weight:600}
.in-modo{border:0;margin:0;padding:.35rem;display:inline-flex;justify-self:start;background:var(--carta);border-radius:99px;border:2px solid var(--l)}
.in-modo label{display:block;font-weight:600}
.in-modo input{position:absolute;opacity:0;width:1px;height:1px}
.in-modo span{display:block;padding:.75rem 1.3rem;border-radius:99px;cursor:pointer;transition:background .25s,color .25s}
.in-modo input:checked+span{background:var(--pomodoro-scuro);color:#fff}
.in-modo input:focus-visible+span{outline:3px solid var(--pomodoro-scuro);outline-offset:2px}
.in-f{border:0;margin:0;padding:0;display:grid;gap:1rem}
.in-f[hidden]{display:none}

/* ── il piede: il nome tondo sulla fascia basilico ────────────────────────── */
.piede-pizza{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem 3rem;align-items:center;background:var(--basilico);color:#fff;
  padding:clamp(2.5rem,6vw,4rem) var(--bordo) 2rem;--m:#DCE8D8}
.pp-tondo{width:clamp(8rem,13vw,10.5rem);height:auto}
.pp-tondo circle{fill:var(--farina)}
.pp-tondo text{font:600 12px var(--font-t);fill:var(--basilico);text-transform:uppercase}
.pp-tondo .pp-sg{font:700 44px var(--font-t);fill:var(--pomodoro-scuro);text-transform:none}
.pp-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin-bottom:1.2rem}
.pp-voci a{text-decoration:none;font:600 1.1rem var(--font-t);color:#fff;padding:.35rem 0}
.piede-pizza .legale a{color:#fff}

@media(max-width:900px){
  .apertura,.focaccia,.orologio,.prenota{grid-template-columns:1fr}
  .apertura{background:var(--farina)}
  .ap-tondo{width:min(88vw,26rem)}
  .spicchi{grid-template-columns:1fr;grid-template-areas:"testa" "pizza" "scelte" "nota"}
  .td-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .impasto{grid-template-columns:1fr}
  .im-foto{width:min(100%,22rem);justify-self:center}
  .piede-pizza{grid-template-columns:1fr}
}
@media(max-width:520px){
  .rg-pronto .rg-p{font-size:.78rem;white-space:normal;width:6.5rem}
  .rg-pronto .rg-p b{font-size:1.25rem}
}
/* lo spicchio scelto si sposta del 5% verso l'esterno: a 320-390 usciva di 1 px
   (controllo totale del 23/10) */
.spicchi{overflow-x:clip}
@media (max-width:40rem){.sp-pizza{width:min(88%,32rem)}}
/* i piatti tondi entrano con un rimbalzo (scale oltre 1): a 320 l'ultimo usciva
   di mezzo pixel mentre rimbalzava (controllo totale del 23/10) */
.tonde{overflow-x:clip}