/* MR·88 · pagina provvisoria «presto online». Colori e caratteri del marchio (dal sito in lavorazione). */
@font-face{font-family:"Playfair Display";src:url("fonts/PlayfairDisplay-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/PlayfairDisplay-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
:root{--marrone:#3F2C25;--oro:#C19E6B;--oro-testo:#86683A;--bianco:#fff;--avorio:#FAF6F0;--crema:#F6F0E6;--r-box:8px;
  --voce:"Playfair Display",Georgia,serif;--testo:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bianco);color:var(--marrone);font:400 1rem/1.6 var(--testo);text-align:center}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,p{margin:0}
.pal{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--oro);vertical-align:middle;margin:0 .7em}

/* apertura */
.apre{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center}
.centro{position:relative;z-index:2;display:grid;justify-items:center;padding:0 16px;pointer-events:none}
.centro>*{pointer-events:auto}
/* bolle della prima schermata (come la home); al posto delle foto, dischi pieni appena dorati */
.cielo{position:absolute;inset:0}
.bolla{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  transform:translate3d(var(--px,0),var(--py,0),0) scale(var(--k,0));transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.bolla.f{border:1px solid var(--oro)}
.bolla.p{background:var(--oro)}
.bolla.v{background:rgba(193,158,107,.14)}
.pronto .bolla{--k:1}
.pronto .bolla.seguo{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
html:not(.js) .bolla{--k:1}
/* testi della prima schermata: arrivano uno dopo l'altro, dopo le bolle */
.entra{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.pronto .entra{opacity:1;transform:none}
.pronto .entra.d1{transition-delay:.5s}.pronto .entra.d2{transition-delay:.8s}.pronto .entra.d3{transition-delay:1.1s}.pronto .entra.d4{transition-delay:1.4s}
html:not(.js) .entra{opacity:1;transform:none}
/* Scorri: la pillola con il pallino che scende come la rotellina; sparisce appena si scorre */
.scorri{position:absolute;bottom:22px;left:0;right:0;margin:0 auto;width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;z-index:2}
.scorri i{width:22px;height:36px;border:1.4px solid var(--oro);border-radius:999px;position:relative}
.scorri i::after{content:"";position:absolute;left:50%;top:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--oro);animation:rotella 2s cubic-bezier(.45,.05,.35,1) infinite}
.scorso .scorri{opacity:0!important;pointer-events:none;transition:opacity .6s ease 0s!important}
@keyframes rotella{0%{transform:translateY(0);opacity:0}15%{opacity:1}65%{transform:translateY(14px);opacity:1}85%,100%{transform:translateY(16px);opacity:0}}
.sopra{font-size:.72rem;letter-spacing:.32em;margin-bottom:clamp(1rem,3vw,2rem);text-transform:uppercase;color:var(--oro-testo)}
.sopra span{white-space:nowrap}
.apre h1 .logo-grande{width:min(84vw,980px);height:auto;display:block;margin:0 auto;overflow:visible}
/* logo · Messa a fuoco (come la home, scelta C): da sfocato a nitido, i pezzi si stringono al loro posto */
.logo-fuoco .pz{transform-box:fill-box;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.logo-fuoco .m{transform:translateX(-14px)}.logo-fuoco .r{transform:translateX(-5px)}.logo-fuoco .otto1{transform:translateX(7px)}.logo-fuoco .otto2{transform:translateX(14px)}
.pronto .logo-fuoco .pz{transform:none}
.apre h1.entra{transform:none;filter:blur(8px);transition:opacity 1.2s ease,filter 1.4s ease .1s}
.pronto .apre h1.entra{filter:none}
html:not(.js) .logo-fuoco .pz{transform:none}html:not(.js) .apre h1.entra{filter:none}
.payoff{font-family:var(--voce);font-style:italic;font-size:clamp(1.3rem,2.7vw,1.95rem);line-height:1.3;margin-top:clamp(1.2rem,3vw,2.2rem)}
.anno{color:var(--oro-testo)}
.presto{justify-self:center;display:inline-flex;align-items:center;margin-top:clamp(24px,4vw,40px);padding:.7em 1.4em;border-radius:999px;background:var(--avorio);font-size:.85rem;letter-spacing:.06em}
.presto .pal{margin:0 .7em 0 0;animation:respiro 2.4s ease-in-out infinite}
@keyframes respiro{50%{transform:scale(1.8);opacity:.5}}

/* sezioni */
.sez{padding:clamp(72px,12vw,140px) 20px}
.avorio{background:var(--avorio)}
.occhiello{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro-testo);margin-bottom:1rem}
.sez h2{font-family:var(--voce);font-style:italic;font-weight:400;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.1}
.griglia{list-style:none;padding:0;margin:clamp(48px,7vw,80px) auto 0;display:grid;gap:clamp(36px,5vw,56px) clamp(20px,4vw,48px);max-width:1000px}
.sei{grid-template-columns:repeat(2,1fr)}.quattro{grid-template-columns:repeat(2,1fr);max-width:760px}
@media(min-width:760px){.sei{grid-template-columns:repeat(3,1fr)}.quattro{grid-template-columns:repeat(4,1fr);max-width:1000px}}
.griglia li{display:grid;justify-items:center;gap:.5rem}
.ico{width:clamp(56px,7vw,72px);height:auto;color:var(--oro);overflow:visible}
.ico *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ico .fondo{fill:rgba(193,158,107,.16);stroke:none}
.ico .pieno{fill:currentColor;stroke:none}
.nome{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro-testo);margin-top:.4rem}
.emo{font-family:var(--voce);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.25;max-width:16ch;margin-top:.2rem}
.nome-s{font-family:var(--voce);font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.25;max-width:14ch}

/* per ordinare */
.riga{max-width:40ch;margin:1.2rem auto 0}
/* le frasi sotto i titoli: su due righe, a capo dopo i due punti (sul telefono vanno a capo da sole) */
@media(min-width:760px){.riga{max-width:none}.riga .a-capo{display:block}}
.vie{display:grid;gap:12px;max-width:680px;margin:clamp(32px,5vw,48px) auto 0}
@media(min-width:640px){.vie{grid-template-columns:1fr 1fr}}
.via{display:grid;justify-items:center;gap:.4rem;padding:26px 16px;border-radius:var(--r-box);background:var(--avorio);text-decoration:none;transition:background .3s ease,color .3s ease}
.via svg{width:26px;height:26px;color:var(--oro-testo);transition:color .3s ease}
.via .eti{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-testo);transition:color .3s ease}
.via .val{font-family:var(--voce);font-size:clamp(1.1rem,2vw,1.35rem);overflow-wrap:anywhere}
@media(hover:hover){.via:hover{background:var(--marrone);color:var(--bianco)}.via:hover svg,.via:hover .eti{color:var(--oro)}}
.indirizzo{font-style:normal;font-family:var(--voce);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.35;margin:clamp(40px,6vw,64px) auto 0}
.mappe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px clamp(24px,4vw,40px);margin-top:1.4rem}
.cta-c{display:inline-flex;align-items:center;gap:18px;text-decoration:none;min-height:52px;font-family:var(--voce);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.cta-c .t{border-bottom:1px solid var(--oro);padding-bottom:.1em}
.cta-c .cer{width:52px;height:52px;border-radius:50%;border:1px solid var(--oro);display:grid;place-items:center;flex:none;transition:background .3s ease,color .3s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.cta-c .cer svg{width:18px;height:18px}
@media(hover:hover){.cta-c:hover .cer{background:var(--oro);color:#fff;transform:rotate(-45deg)}}
.apple{color:var(--oro-testo);font-size:.9rem;min-height:44px;line-height:44px}
.social{margin-top:clamp(28px,4vw,40px)}
.social a{display:inline-flex;align-items:center;gap:.5em;min-height:44px;text-decoration:none;transition:color .3s ease}
.social svg{width:22px;height:22px;color:var(--oro-testo)}
@media(hover:hover){.social a:hover{color:var(--oro-testo)}}
.firma{display:block;width:min(260px,62vw);margin:clamp(48px,7vw,72px) auto 0}

/* mappa disegnata (strade vere di OpenStreetMap, Via Bresso in oro): è un disegno, nessun servizio esterno */
.mappa{margin:clamp(28px,4vw,40px) auto 0;display:grid;justify-items:center}
.mappa-tondo{width:min(420px,86vw);aspect-ratio:1;border-radius:50%;overflow:hidden}
.mappa-svg{display:block;width:100%;height:auto}
.mappa .fondo-mappa *{fill:var(--avorio)}
.mappa .strade polyline{stroke:rgba(63,44,37,.16)}
.mappa .bresso polyline{stroke:var(--oro);stroke-width:5}
.mappa .pin{fill:var(--oro)}.mappa .buco{fill:var(--avorio)}
.mappa .onda{fill:var(--oro);opacity:.5;transform-box:fill-box;transform-origin:center;animation:onda 2.6s ease-out infinite}
@keyframes onda{0%{transform:scale(1);opacity:.45}100%{transform:scale(4.2);opacity:0}}
.mappa .nome-via{font-family:var(--voce);font-style:italic;font-size:22px;fill:var(--marrone)}
.fonte-mappa{font-size:.72rem;color:#8a7a70;margin-top:.6rem}.fonte-mappa a{color:inherit}
@media(prefers-reduced-motion:reduce){.mappa .onda{animation:none;opacity:0}}

/* Contatti: «Indicazioni» apre la scelta della mappa (come alla Pizzeria Giorgione, ma con un tocco in meno):
   Google Maps o Mappe di Apple, e parte subito il navigatore. Fondo avorio, angoli da 8 px, entrata morbida. */
.scelta-mappa{border:0;border-radius:var(--r-box);background:var(--avorio);color:var(--marrone);padding:clamp(28px,5vw,44px) clamp(20px,5vw,44px) clamp(22px,4vw,32px);width:min(440px,calc(100vw - 32px));text-align:center;box-shadow:0 30px 80px -20px rgba(63,44,37,.45);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),overlay .35s allow-discrete,display .35s allow-discrete}
.scelta-mappa[open]{opacity:1;transform:none}
@starting-style{.scelta-mappa[open]{opacity:0;transform:translateY(12px) scale(.98)}}
.scelta-mappa::backdrop{background:rgba(63,44,37,.45);backdrop-filter:blur(3px)}
.scelta-mappa h2{font-family:var(--voce);font-style:italic;font-weight:400;font-size:clamp(1.7rem,4vw,2.2rem);margin:.1em 0 0}
.scelte{display:grid;gap:12px;margin:clamp(20px,4vw,28px) 0 0}
.pillola-mappa{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--bianco);color:var(--marrone);text-decoration:none;font-size:1rem;letter-spacing:.02em;transition:background .3s ease,color .3s ease}
@media(hover:hover){.pillola-mappa:hover{background:var(--marrone);color:var(--bianco)}}
.dove-scelta{display:flex;align-items:center;justify-content:center;gap:.5em;margin:18px 0 0;font-size:.85rem;color:#6f5f57}
.dove-scelta svg{width:18px;height:18px;color:var(--oro)}
.chiudi-scelta{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;outline-offset:-2px;border:0;background:none;color:var(--marrone);cursor:pointer;border-radius:50%;transition:background .3s ease}
.chiudi-scelta svg{width:20px;height:20px}
@media(hover:hover){.chiudi-scelta:hover{background:rgba(63,44,37,.08)}}
@media(prefers-reduced-motion:reduce){.scelta-mappa{transition:none}}
.chiudi-scelta{position:absolute;top:16px;right:16px;display:grid;place-items:center;outline-offset:-2px}
.chiudi-scelta:focus-visible{outline:none;background:rgba(63,44,37,.1)}
.occhiello{display:block}

.senza-anello:focus,.senza-anello:focus-visible{outline:none}

/* Effetti d'entrata (come nel sito): partono quando si vedono; con «meno animazioni» o senza JavaScript tutto fermo */
@media(prefers-reduced-motion:no-preference){
  .js .tit{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;transform:translateX(-14px);filter:blur(5px);
    transition:-webkit-mask-position 1.5s cubic-bezier(.45,0,.2,1),mask-position 1.5s cubic-bezier(.45,0,.2,1),transform 1.5s cubic-bezier(.2,.7,.2,1),filter 1.1s ease .15s}
  .js .tit.vista{-webkit-mask-position:0 0;mask-position:0 0;transform:none;filter:none}
  .js .tit.svelato{-webkit-mask-image:none;mask-image:none}
  .js .comp{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .js .comp.vista{opacity:1;transform:none}
  .js .griglia li.comp{transform:translateY(40px);transition:opacity 1.1s ease var(--r),transform 1.4s cubic-bezier(.2,.7,.2,1) var(--r)}
  .js .griglia li.comp.vista{transform:none}
  .js .griglia .ico *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.25,1) calc(var(--r) + .2s)}
  .js .griglia .vista .ico :nth-child(3){transition-delay:calc(var(--r) + .35s)}.js .griglia .vista .ico :nth-child(4){transition-delay:calc(var(--r) + .5s)}.js .griglia .vista .ico :nth-child(n+5){transition-delay:calc(var(--r) + .65s)}
  .js .griglia .ico .fondo,.js .griglia .ico .pieno{stroke-dasharray:none;opacity:0;transition:opacity .9s ease calc(var(--r) + .8s)}
  .js .griglia .ico .pieno{transition:opacity .5s ease calc(var(--r) + 1.4s)}
  .js .griglia .vista .ico *{stroke-dashoffset:0}
  .js .griglia .vista .ico .fondo,.js .griglia .vista .ico .pieno{opacity:1}
  .js .griglia .emo,.js .griglia .nome-s{opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .9s ease calc(var(--r) + .45s),transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--r) + .45s),filter .9s ease calc(var(--r) + .45s)}
  .js .griglia .vista .emo,.js .griglia .vista .nome-s{opacity:1;transform:none;filter:none}
  .js .disegna polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.45,.05,.25,1)}
  .js .disegna .bresso polyline{transition-delay:1.5s}
  .js .disegna .cade{transform:translateY(-50px);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1) 2.2s,opacity .3s ease 2.2s}
  .js .disegna .nome-via{opacity:0;transition:opacity .6s ease 2.6s}
  .js .disegna .onda{animation-delay:2.8s}
  .js .disegna.vista polyline{stroke-dashoffset:0}
  .js .disegna.vista .cade,.js .disegna.vista .nome-via{transform:none;opacity:1}
}

/* ritardo per colonna: le voci della stessa riga partono una dopo l'altra (come le famiglie della home) */
.griglia li{--r:0s}
.sei li:nth-child(2n),.quattro li:nth-child(2n){--r:.15s}
@media(min-width:760px){.sei li:nth-child(2n){--r:0s}.sei li:nth-child(3n+2){--r:.15s}.sei li:nth-child(3n){--r:.3s}
  .quattro li:nth-child(4n+2){--r:.15s}.quattro li:nth-child(4n+3){--r:.3s}.quattro li:nth-child(4n){--r:.45s}}

/* Sipario (come il sito, da 900 px): il contenuto si alza come il coperchio della scatola e scopre il piè di pagina */
@media(min-width:900px){
  .sipario{position:relative;z-index:1;background:var(--bianco);border-radius:0 0 var(--r-box) var(--r-box)}
  .piede{position:sticky;bottom:0;z-index:0}
}

/* Passi a destra, a metà altezza (dal Paleolab, nei colori di MR·88): pallino a filetto d'oro, quello della sezione
   in cui sei pieno e un po' più grande, con il nome accanto; il nome degli altri compare al passaggio del mouse.
   Solo da 900 px: sul telefono la pagina è breve e c'è «Scorri». */
.passi{display:none}
@media(min-width:900px){
  .passi{position:fixed;right:clamp(16px,2.4vw,36px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;
    opacity:0;pointer-events:none;transition:opacity .6s ease}
  .passi.on{opacity:1;pointer-events:auto}
  .passi a{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:44px;padding-left:12px;text-decoration:none;color:var(--oro-testo)}
  .passi .dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--oro);flex:none;transition:background .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
  .passi .lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(8px);
    transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),color .3s ease}
  .passi a[aria-current] .dot{background:var(--oro);transform:scale(1.25)}
  .passi a[aria-current] .lbl{opacity:1;transform:none;color:var(--marrone)}
}
@media(min-width:900px) and (hover:hover){.passi a:hover .lbl{opacity:1;transform:none}.passi a:hover .dot{background:var(--oro)}}

/* piè di pagina ad arco leggero */
.piede{background:var(--marrone);color:var(--crema);border-radius:50% 50% 0 0 / clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;padding:clamp(70px,8vw,110px) 20px 32px}
.piede img{width:min(380px,82%);display:block;margin:0 auto}
.claim{font-family:var(--voce);font-style:italic;color:var(--oro);margin-top:1rem}
.legale{margin-top:clamp(36px,5vw,56px);font-size:.75rem;color:rgba(246,240,230,.72)}

@media(prefers-reduced-motion:reduce){.presto .pal,.scorri i::after{animation:none;opacity:1}.entra,.bolla{opacity:1;transform:none;--k:1;transition:none}.logo-fuoco .pz{transform:none;transition:none}.apre h1.entra{filter:none}}
.svelato{-webkit-mask-image:none!important;mask-image:none!important}