/* Corner · landing — palette dal logo: #fcaf3b cheddar, #c28312 birra scura, nero, bianco */
@font-face{font-family:"Anton";src:url("assets/fonts/anton.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{--amber:#fcaf3b;--beer:#c28312;--ink:#000;--paper:#fff;--tilt:1.375deg}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:58px;-webkit-text-size-adjust:100%}
body{background:#000;color:#000;font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- impalcatura ---------- */
.app{--T:2.4cqw;container-type:inline-size;width:min(100%,460px);margin:0 auto;position:relative;background:#000;overflow-x:clip}

/* ---------- indice sticky ---------- */
.indice{position:sticky;top:0;z-index:60;display:flex;gap:6px;overflow-x:auto;padding:9px 14px;background:#000;border-bottom:1px solid rgba(252,175,59,.28);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%)}
.indice::-webkit-scrollbar{display:none}
.indice a{flex:none;text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--amber);padding:8px 12px;border-radius:99px;white-space:nowrap;transition:background-color .25s,color .25s}
.indice a[aria-current]{background:var(--amber);color:#000}
.indice a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- testata ---------- */
.hero{position:relative;background:#000;padding:10px 20px calc(var(--T) + 34px);text-align:center}
.logo{display:block;width:96%;max-width:420px;height:auto;margin:-15% auto -13%}
.mega{display:flex;align-items:center;gap:14px;margin:0 4px}
.mega::before,.mega::after{content:"";flex:1;height:7px;background:linear-gradient(#fcaf3b 0 2px,transparent 2px 3.5px,#c28312 3.5px 5px,transparent 5px 5.5px,#fcaf3b 5.5px 7px)}
.mega span{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(66px,24cqw,108px);line-height:1;letter-spacing:.035em;text-transform:uppercase;color:var(--amber);padding-top:2px}
.coperto{display:inline-block;margin-top:18px;font-size:13px;color:#fff;letter-spacing:.04em}
.coperto b{font-family:"Anton",sans-serif;font-weight:400;font-size:18px;color:var(--amber);margin-left:6px}

/* ---------- strati ---------- */
.layer{position:relative;isolation:isolate;margin-top:calc(var(--T) * -1)}
.layer .bg{position:absolute;inset:0;z-index:-1}
.layer.t1 .bg,.foot.t1 .bg{clip-path:polygon(0 var(--T),100% 0,100% 100%,0 100%)}
.layer.t2 .bg,.foot.t2 .bg{clip-path:polygon(0 0,100% var(--T),100% 100%,0 100%)}

/* bere: birra scura con perla finissima + riflesso morbido */
.bev{color:#000}
.bev .bg{background-color:var(--beer);
  background-image:linear-gradient(112deg,rgba(255,255,255,0) 0,rgba(255,255,255,.07) 38%,rgba(255,255,255,0) 66%),url("assets/tex-pearl.svg");
  background-size:100% 900px,20px 20px;background-repeat:repeat-y,repeat}
/* mangiare: pane/mollica con grana e pori, semi di sesamo solo nei margini */
.food{color:#000}
.food .bg{background-color:var(--amber);background-image:url("assets/tex-bun.svg");background-size:240px 240px}
.food .bg::before,.food .bg::after{content:"";position:absolute;top:0;bottom:0;width:18px;background:url("assets/tex-seeds.svg") 0 0/18px 140px repeat-y;opacity:.8}
.food .bg::before{left:2px}
.food .bg::after{right:2px;transform:scaleX(-1)}

/* ornamenti sul bordo inclinato: schiuma (bere) e salsa (mangiare) */
.orn{position:absolute;left:0;width:100%;height:0;transform-origin:0 0;pointer-events:none;z-index:1}
.t1 .orn{top:var(--T);transform:rotate(calc(var(--tilt) * -1))}
.t2 .orn{top:0;transform:rotate(var(--tilt))}
.orn svg{position:absolute;left:-2cqw;width:104cqw;height:auto;display:block;overflow:visible}
.orn.foam svg{top:-7.4cqw}
.orn.sauce svg{top:-1.3cqw}

.inner{position:relative;z-index:2;padding:0 20px calc(var(--T) + 34px)}
.bev .inner{padding-top:calc(var(--T) + 17cqw)}
.food .inner{padding-top:calc(var(--T) + 20cqw)}

/* gruppo: Da bere / Da mangiare */
.grp{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 26px}
.grp-t{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(52px,18.5cqw,84px);line-height:.92;text-transform:uppercase;letter-spacing:.015em;max-width:7ch}
.bev .grp-t{color:#fff}
.grp-i{flex:none;width:clamp(56px,17cqw,76px)}
.grp-i svg{display:block;width:100%;height:auto;overflow:visible}

/* birra che si riempie, una sola volta */
.pintsvg .beer{transform:translateY(0)}
.pintsvg.pre .beer{transform:translateY(86px)}
.pintsvg.fill .beer{transition:transform 3.2s cubic-bezier(.45,0,.2,1)}
.pintsvg .bub{fill:#fff;opacity:0}
.pintsvg.done .bub{opacity:.75;animation:sale 2.6s ease-in infinite}
.pintsvg.done .b2{animation-delay:.9s}
.pintsvg.done .b3{animation-delay:1.7s}
@keyframes sale{0%{transform:translateY(0);opacity:0}20%{opacity:.75}100%{transform:translateY(-34px);opacity:0}}

/* intestazione sezione */
.sec-row{display:flex;align-items:center;gap:12px}
.ico{flex:none;width:30px;height:30px}
.bev .ico,.bev h2{color:#fff}
.food .ico,.food h2{color:#000}
.sec-head h2{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(32px,10.4cqw,46px);line-height:1;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
.stack{display:block;width:46px;height:10px;margin:12px 0 0;background:linear-gradient(#000 0 3px,transparent 3px 4.5px,#fff 4.5px 6px,transparent 6px 7.5px,#000 7.5px 10px)}
.sec-nota{margin-top:10px;font-style:italic;font-size:14px;line-height:1.4;max-width:34ch}

/* prodotti */
.list{list-style:none;margin-top:10px}
.row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 0}
.row+.row{border-top:1px solid rgba(0,0,0,.2)}
.info{min-width:0;flex:1}
.info h3{font-size:16.5px;font-weight:650;line-height:1.28;letter-spacing:.015em;text-transform:uppercase;overflow-wrap:anywhere}
.al{font-size:.6rem;font-weight:500;letter-spacing:.08em;opacity:.62;margin-left:7px;vertical-align:.5em;line-height:0;white-space:nowrap}
.ing{margin-top:4px;font-size:14px;line-height:1.42;opacity:.82;text-transform:lowercase;overflow-wrap:anywhere}
.ing::first-letter{text-transform:uppercase}
.nota{margin-top:4px;font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.prices{flex:none;display:flex;align-items:flex-end;padding-top:1px}
.pr{display:grid;justify-items:end;align-content:end;padding-left:12px;margin-left:12px;white-space:nowrap}
.pr+.pr{border-left:1px solid rgba(0,0,0,.28)}
.prices .pr:first-child{margin-left:0;padding-left:0}
.pr i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.78;margin-bottom:3px;line-height:1.1}
.pr b{font-family:"Anton",sans-serif;font-weight:400;font-size:23px;line-height:1;letter-spacing:.01em}
.pr em{display:none}
.bev .pr b{color:#000}

/* piede */
.foot{position:relative;isolation:isolate;margin-top:calc(var(--T) * -1);color:#fff}
.foot .bg{position:absolute;inset:0;z-index:-1;background:#000}
.foot-in{padding:calc(var(--T) + 46px) 22px 54px}
.chiusura{font-family:"Anton",sans-serif;font-size:34px;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--amber);margin-bottom:30px}
.leg-t{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.leg{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:rgba(255,255,255,.85)}
.leg b{font-family:"Anton",sans-serif;font-weight:400;color:var(--amber);margin-right:3px}
.nb{margin-top:12px;font-size:13px;color:rgba(255,255,255,.78)}
.leg+.nb{margin-top:18px}
.contatti{font-style:normal;display:flex;flex-direction:column;gap:5px;margin-top:34px;padding-top:22px;border-top:1px solid rgba(252,175,59,.3);font-size:14px;color:rgba(255,255,255,.9)}
.contatti strong{font-family:"Anton",sans-serif;font-weight:400;font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.contatti a{text-decoration:none;border-bottom:1px solid rgba(252,175,59,.45);align-self:flex-start}
.contatti a:hover{color:var(--amber)}
.soc{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.soc a{color:var(--amber)}
a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* animazioni: poche e discrete (solo con JS) */
.anim .reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease-out,transform .7s ease-out}
.anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim .reveal{opacity:1;transform:none;transition:none}
  .pintsvg .beer,.pintsvg.fill .beer{transition:none;transform:none}
  .pintsvg.done .bub{animation:none;opacity:.6}
}
@media (min-width:520px){html{scroll-padding-top:62px}.indice{justify-content:flex-start}}