/* ============================================================
   ARNOLD'S — Hamburgheria · Wine Bar — Firenze
   Design DNA: "Happy Days a Porta al Prato"
   Navy notte americana · Panna diner · Rosso ketchup · Cheddar
   Alfa Slab One + Archivo + Yellowtail
   ============================================================ */

:root {
  --navy: #141F3C;
  --navy-deep: #0B1226;
  --navy-card: #1C2A4E;
  --cream: #F7F0DE;
  --cream-dim: #EDE3C8;
  --paper: #FCF8EC;
  --red: #D8262C;
  --red-dark: #A31418;
  --red-neon: #FF3B41;
  --cheddar: #F2A93B;
  --ink: #10182B;
  --ink-soft: #3A4560;
  --cream-soft: rgba(247, 240, 222, .72);
  --line-dark: rgba(20, 31, 60, .16);
  --line-light: rgba(247, 240, 222, .18);

  --font-display: 'Alfa Slab One', 'Archivo', serif;
  --font-text: 'Archivo', system-ui, sans-serif;
  --font-script: 'Yellowtail', cursive;

  --shadow-pop: 6px 6px 0 rgba(11, 18, 38, .9);
  --shadow-pop-sm: 4px 4px 0 rgba(11, 18, 38, .9);
  --shadow-soft: 0 24px 60px -24px rgba(11, 18, 38, .45);
  --radius: 18px;
  --header-h: 76px;
  --wrap: 1180px;
  --ease-pop: cubic-bezier(.22, 1.4, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--red); color: var(--cream); }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--navy-deep); color: var(--cream);
  padding: 10px 18px; border-radius: 10px; transition: top .2s;
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Typography helpers ---------- */
.display { font-family: var(--font-display); font-weight: 400; line-height: .96; letter-spacing: .01em; text-transform: uppercase; }
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; }
.overline {
  font-size: 13.5px; font-weight: 700; letter-spacing: .32em;
  text-transform: uppercase;
}
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }

/* ---------- Checkerboard motif ---------- */
.checker, .checker-thin {
  --sq: 22px;
  background:
    repeating-conic-gradient(#0B1226 0% 25%, var(--cream) 0% 50%)
    0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}
.checker-thin { --sq: 12px; height: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 16px; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1;
  padding: 18px 30px 16px; border-radius: 14px;
  border: 3px solid var(--navy-deep);
  transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background .18s;
  white-space: nowrap;
}
.btn-primary { background: var(--red); color: var(--cream); box-shadow: var(--shadow-pop); }
.btn-primary:hover { background: var(--red-dark); transform: translate(3px, 3px); box-shadow: 3px 3px 0 rgba(11,18,38,.9); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: none; }
.btn-ghost-light:hover { background: var(--cream); color: var(--navy-deep); }
.btn-ghost-dark { background: transparent; color: var(--navy-deep); border-color: var(--navy-deep); }
.btn-ghost-dark:hover { background: var(--navy-deep); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--navy-deep); box-shadow: var(--shadow-pop); }
.btn-cream:hover { background: var(--cheddar); transform: translate(3px, 3px); box-shadow: 3px 3px 0 rgba(11,18,38,.9); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 120;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.header--solid { background: var(--navy-deep); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.header__in { width: min(1320px, calc(100% - 40px)); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.header__logo { font-family: var(--font-script); font-size: 34px; color: var(--cream); line-height: 1; padding-top: 4px; }
.header__logo em { color: var(--red-neon); font-style: normal; }
.header__nav { display: flex; gap: 26px; margin-left: auto; }
.header__nav a {
  font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-soft); padding: 8px 2px; position: relative; transition: color .2s;
}
.header__nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 3px;
  background: var(--red-neon); border-radius: 2px; transition: right .25s var(--ease-out);
}
.header__nav a:hover { color: var(--cream); }
.header__nav a:hover::after { right: 0; }
.header__cta { display: inline-flex; }
.header__cta.btn { padding: 13px 20px 11px; font-size: 13.5px; border-width: 2px; box-shadow: var(--shadow-pop-sm); }

.lang-toggle {
  display: inline-flex; border: 2px solid var(--cream-soft); border-radius: 999px; overflow: hidden;
}
.lang-toggle button {
  font-size: 12px; font-weight: 900; letter-spacing: .08em; padding: 8px 13px 7px;
  color: var(--cream-soft); transition: background .2s, color .2s;
}
.lang-toggle button[aria-pressed="true"] { background: var(--cream); color: var(--navy-deep); }

.burger-btn { display: none; position: relative; z-index: 130; width: 46px; height: 46px; border: 2px solid var(--cream-soft); border-radius: 12px; }
.burger-btn span, .burger-btn::before, .burger-btn::after {
  content: ''; position: absolute; left: 11px; right: 11px; height: 3px; border-radius: 2px;
  background: var(--cream); transition: transform .3s var(--ease-out), opacity .2s, top .3s var(--ease-out);
}
.burger-btn::before { top: 14px; }
.burger-btn span { top: 21px; }
.burger-btn::after { top: 28px; }
.burger-btn[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
.burger-btn[aria-expanded="true"] span { opacity: 0; }
.burger-btn[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }

/* Mobile nav overlay */
.mnav {
  position: fixed; inset: 0; z-index: 125; background: var(--navy-deep);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 90px 34px 40px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mnav.open { opacity: 1; visibility: visible; }
.mnav a.mnav__link {
  font-family: var(--font-display); font-size: clamp(30px, 9vw, 44px); text-transform: uppercase;
  color: var(--cream); padding: 8px 0; border-bottom: 1px solid var(--line-light);
  display: flex; align-items: baseline; gap: 14px;
  transform: translateY(18px); opacity: 0; transition: transform .4s var(--ease-out), opacity .4s;
}
.mnav a.mnav__link small { font-family: var(--font-text); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--red-neon); }
.mnav.open a.mnav__link { transform: none; opacity: 1; }
.mnav.open a.mnav__link:nth-child(2) { transition-delay: .05s; }
.mnav.open a.mnav__link:nth-child(3) { transition-delay: .1s; }
.mnav.open a.mnav__link:nth-child(4) { transition-delay: .15s; }
.mnav.open a.mnav__link:nth-child(5) { transition-delay: .2s; }
.mnav.open a.mnav__link:nth-child(6) { transition-delay: .25s; }
.mnav__foot { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 400; background: var(--navy-deep);
  display: grid; place-items: center; text-align: center;
  transition: opacity .45s, visibility .45s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader__sign { font-family: var(--font-script); font-size: clamp(56px, 12vw, 110px); color: var(--red-neon);
  text-shadow: 0 0 18px rgba(255,59,65,.65), 0 0 60px rgba(255,59,65,.4);
  animation: neonIn 1s steps(1) both;
}
.loader__sub { margin-top: 4px; color: var(--cream-soft); font-size: 12px; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; }
@keyframes neonIn {
  0%, 12%, 22% { opacity: .15; text-shadow: none; }
  8%, 18%, 30%, 100% { opacity: 1; }
}

/* ---------- Hero: insegna drive-in ---------- */
.hero {
  position: relative; min-height: 100svh;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(216, 38, 44, .44), transparent 64%),
    radial-gradient(760px 560px at 74% 58%, rgba(242, 169, 59, .14), transparent 62%),
    radial-gradient(900px 620px at 12% 112%, rgba(242, 169, 59, .18), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 58%, #0E1730 100%);
  color: var(--cream);
  display: flex; flex-direction: column;
  overflow: clip;
}
.hero__stars { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(247,240,222,.8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 33% 9%, rgba(247,240,222,.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 55% 16%, rgba(247,240,222,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 71% 7%, rgba(247,240,222,.55) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 88% 26%, rgba(247,240,222,.8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 44% 30%, rgba(247,240,222,.45) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 48%, rgba(247,240,222,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 6% 52%, rgba(247,240,222,.5) 50%, transparent 51%);
}
.hero__in {
  width: min(1320px, calc(100% - 48px)); margin-inline: auto;
  flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px;
  padding: calc(var(--header-h) + 40px) 0 90px;
  position: relative;
}
.hero__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hero__kicker .overline { color: var(--cheddar); }
.hero__kicker::before { content: ''; width: 34px; height: 3px; background: var(--red-neon); border-radius: 2px; }
.hero__script {
  font-family: var(--font-script); font-size: clamp(62px, 8.8vw, 132px); line-height: .9;
  color: #FF6B6F;
  text-shadow:
    0 0 3px rgba(255, 236, 236, .9),
    0 0 10px rgba(255, 59, 65, .95),
    0 0 26px rgba(255, 59, 65, .75),
    0 0 62px rgba(255, 59, 65, .55),
    0 0 120px rgba(216, 38, 44, .45);
}
@keyframes neonHum {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.18); }
}
.flicker { animation: flicker 4.2s linear infinite; }
/* insegna che si accende e si spegne da sola, come un neon vero */
@keyframes neonCycle {
  0%, 40% { opacity: 1; filter: brightness(1.06); }
  47% { opacity: .38; filter: brightness(.55); }   /* si affievolisce */
  52% { opacity: .3; filter: brightness(.48); }    /* quasi spenta */
  54% { opacity: .95; filter: brightness(1.1); }   /* prova a riaccendersi */
  56% { opacity: .35; filter: brightness(.5); }    /* sfarfallio */
  58.5% { opacity: 1; filter: brightness(1.18); }  /* riaccesa! */
  61% { opacity: .55; filter: brightness(.7); }
  63%, 100% { opacity: 1; filter: brightness(1.06); }
}
.hero__script.flicker { animation: neonCycle 7.5s linear infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  3% { opacity: .55; } 4% { opacity: 1; }
  42% { opacity: 1; } 43% { opacity: .7; } 44.5% { opacity: 1; }
  71% { opacity: 1; } 71.6% { opacity: .5; } 72.4% { opacity: 1; }
}
.hero__title { font-size: clamp(44px, 6vw, 92px); margin-top: 2px; }
.hero__title .line { display: block; }
.hero__title .accent { color: var(--cheddar); }
.hero__lead { max-width: 46ch; margin-top: 22px; font-size: clamp(17.5px, 1.5vw, 20px); color: var(--cream-soft); }
.hero__lead strong { color: var(--cream); font-weight: 700; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 15px; color: var(--cream-soft); }
.hero__meta li { display: flex; align-items: center; gap: 9px; }
.hero__meta svg { width: 17px; height: 17px; color: var(--cheddar); flex: none; }

.ta-chip {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 26px; padding: 11px 18px 10px;
  border: 2px solid rgba(242, 169, 59, .55); border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .03em; color: var(--cream);
  background: rgba(242, 169, 59, .08);
}
.ta-chip svg { width: 18px; height: 18px; color: var(--cheddar); flex: none; }
.ta-chip strong { color: var(--cheddar); font-weight: 900; }

/* Jukebox ring with burger cutout */
.hero__stage { position: relative; display: grid; place-items: center; }
.jukebox {
  --size: min(30vw, 470px);
  position: relative; width: var(--size); height: var(--size); border-radius: 50%;
  background:
    conic-gradient(#f4f4f2 0deg, #9ba3ad 40deg, #e9eaec 90deg, #7e8794 140deg, #f6f7f8 190deg, #99a1ab 245deg, #e6e8ea 300deg, #8f97a2 340deg, #f4f4f2 360deg);
  padding: 12px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), inset 0 0 0 2px rgba(255,255,255,.5);
}
.jukebox::before {
  content: ''; position: absolute; inset: 12px; border-radius: 50%;
  border: 6px solid var(--red); z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(11,18,38,.85);
}
.jukebox__img { position: absolute; inset: 18px; border-radius: 50%; overflow: hidden; background: var(--navy-card); }
.jukebox__img img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 46%; transform: scale(1.02); }
.jukebox__glow { position: absolute; inset: -16%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,59,65,.5), rgba(242,169,59,.18) 55%, transparent 74%);
  animation: glowPulse 4.5s ease-in-out infinite; }
@keyframes glowPulse { 50% { transform: scale(1.07); opacity: .85; } }
.jukebox__steam { position: absolute; top: -7%; left: 50%; translate: -50% 0; display: flex; gap: 22px; z-index: 4; }
.jukebox__steam i { width: 5px; height: 42px; border-radius: 4px;
  background: linear-gradient(transparent, rgba(247,240,222,.55));
  animation: steamUp 2.6s ease-in-out infinite; }
.jukebox__steam i:nth-child(2) { animation-delay: .6s; height: 56px; }
.jukebox__steam i:nth-child(3) { animation-delay: 1.2s; height: 38px; }
@keyframes steamUp {
  0% { transform: translateY(10px) scaleY(.6); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translateY(-16px) scaleY(1.15); opacity: 0; }
}

/* floating stickers */
.sticker {
  position: absolute; z-index: 5;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 16px 10px; border-radius: 12px; border: 3px solid var(--navy-deep);
  box-shadow: var(--shadow-pop-sm); line-height: 1.15; text-align: center;
  animation: floaty 5.5s ease-in-out infinite;
}
.sticker--cheddar { background: var(--cheddar); color: var(--navy-deep); }
.sticker--red { background: var(--red); color: var(--cream); }
.sticker--cream { background: var(--cream); color: var(--navy-deep); }
.sticker small { display: block; font-family: var(--font-text); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; }
.sticker--tl { top: 4%; left: -6%; rotate: -8deg; }
.sticker--tr { top: -3%; right: 2%; rotate: 6deg; animation-delay: 1.2s; }
.sticker--br { bottom: 5%; right: -4%; rotate: -5deg; animation-delay: 2.1s; }
@keyframes floaty { 50% { transform: translateY(-9px); } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--cream-soft); font-size: 11px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
}
.hero__scroll::after { content: ''; width: 2px; height: 34px; background: linear-gradient(var(--red-neon), transparent); animation: drip 1.6s var(--ease-out) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Ticker marquee ---------- */
.ticker { background: var(--red); color: var(--cream); border-block: 4px solid var(--navy-deep); overflow: clip; }
.ticker__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__seq { display: flex; align-items: center; flex: none; }
.ticker__seq span {
  font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: .06em;
  padding: 13px 22px 11px; display: inline-flex; align-items: center; gap: 22px; white-space: nowrap;
}
.ticker__seq span::after { content: '★'; color: var(--cheddar); font-size: 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   SIGNATURE — Il panino si monta da solo (sticky, native scroll)
   ============================================================ */
.build { position: relative; height: 340vh; background: var(--paper); }
.build__stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  background:
    radial-gradient(900px 480px at 50% 118%, rgba(242,169,59,.22), transparent 60%),
    var(--paper);
}
.build__head { text-align: center; padding: calc(var(--header-h) + 8px) 24px 0; }
.build__head .overline { color: var(--red); }
.build__title { font-size: clamp(28px, 4.2vw, 54px); color: var(--navy-deep); margin-top: 6px; }
.build__title em { font-style: normal; color: var(--red); }
/* La scena è dimensionata sull'ALTEZZA del viewport (non su una larghezza fissa):
   così il panino completo + lo stamp entrano sempre nello stage sticky (100svh)
   senza essere tagliati da overflow:clip. La larghezza deriva dall'aspect-ratio. */
.build__scene {
  position: relative;
  aspect-ratio: 420 / 460;
  height: min(540px, calc(100svh - 250px), calc(90vw * 460 / 420));
  width: auto;
  align-self: center;
  margin-bottom: 0;
}
.build__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.build__svg .layer { will-change: transform; transform-box: fill-box; transform-origin: center; }

.build__label {
  position: absolute; width: 210px;
  font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-soft);
  opacity: 0; transform: translateX(var(--lx, -14px));
  transition: opacity .22s ease, transform .28s var(--ease-out);
  padding-top: 8px;
}
.build__label::before {
  content: ''; display: block; width: 46px; height: 3px; border-radius: 2px;
  background: var(--red); margin-bottom: 12px;
}
.build__label strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--navy-deep); margin-bottom: 5px; line-height: 1.2; }
.build__label.on { opacity: 1; transform: none; }
.build__label--l { right: calc(100% + 18px); text-align: right; --lx: 14px; }
.build__label--l::before { margin-left: auto; }
.build__label--r { left: calc(100% + 18px); --lx: -14px; }

.build__stamp {
  position: absolute; left: 50%; bottom: 6%; z-index: 6;
  translate: -50% 0; rotate: -6deg;
  font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 24px); text-transform: uppercase;
  text-align: center; line-height: 1.1;
  color: var(--cream); background: var(--navy-deep); border: 3px solid var(--navy-deep);
  padding: 15px 24px 13px; border-radius: 14px; box-shadow: 6px 6px 0 rgba(216,38,44,.9);
  opacity: 0; scale: .6; transition: opacity .3s, scale .45s var(--ease-pop);
}
.build__stamp small {
  display: block; margin-top: 5px;
  font-family: var(--font-text); font-size: 12.5px; font-weight: 800;
  letter-spacing: .16em; color: var(--cheddar);
}
.build__stamp.on { opacity: 1; scale: 1; }
.build__hint {
  position: absolute; left: 50%; bottom: 2.5svh; translate: -50% 0;
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
  opacity: .75; transition: opacity .3s;
}
.build__hint.off { opacity: 0; }

/* Reduced-motion / no-JS fallback: burger assembled, labels visible */
.build--static { height: auto; }
.build--static .build__stage { position: static; height: auto; padding-bottom: 60px; }
.build--static .build__label { opacity: 1; transform: none; }
.build--static .build__stamp { opacity: 1; scale: 1; }
.build--static .build__hint { display: none; }

/* ---------- Sections base ---------- */
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.section__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__head .overline { color: var(--red); display: inline-block; margin-bottom: 12px; }
.section__title { font-size: clamp(34px, 4.6vw, 62px); }
.section__title em { font-style: normal; color: var(--red); }
.section__sub { margin-top: 16px; color: var(--ink-soft); max-width: 56ch; }
.on-dark .section__sub { color: var(--cream-soft); }
.on-dark .section__head .overline { color: var(--cheddar); }

/* ---------- Panini di Happy Days (navy, card + foto segui-cursore) ---------- */
.panini { background: var(--navy); color: var(--cream); }
.panini__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dish-card {
  position: relative; background: var(--cream); color: var(--ink);
  border: 3px solid var(--navy-deep); border-radius: var(--radius);
  padding: 26px 24px 22px; box-shadow: var(--shadow-pop);
  transition: transform .25s var(--ease-pop), box-shadow .25s var(--ease-pop);
}
@media (hover: hover) and (pointer: fine) {
  .dish-card:hover { transform: translateY(-7px); box-shadow: 9px 11px 0 rgba(11, 18, 38, .9); }
}
.dish-card__num { font-size: 12.5px; font-weight: 900; letter-spacing: .26em; color: var(--red); }
.dish-card__name { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; margin-top: 8px; line-height: 1.05; }
.dish-card__quip { font-family: var(--font-script); font-size: 22px; color: var(--red); margin-top: 2px; }
.dish-card__desc { font-size: 15px; color: var(--ink-soft); margin-top: 10px; min-height: 3.2em; line-height: 1.5; }
.dish-card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
.dish-card__price {
  font-family: var(--font-display); font-size: 22px;
  background: var(--red); color: var(--cream); border: 3px solid var(--navy-deep);
  border-radius: 999px; padding: 8px 16px 6px; box-shadow: 3px 3px 0 rgba(11,18,38,.9);
  white-space: nowrap;
}
.dish-card__tag { font-size: 11.5px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.dish-card--hot::after {
  content: 'BEST'; position: absolute; top: -14px; right: 18px; rotate: 7deg;
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .1em;
  background: var(--cheddar); color: var(--navy-deep); border: 3px solid var(--navy-deep);
  padding: 7px 12px 5px; border-radius: 10px; box-shadow: 3px 3px 0 rgba(11,18,38,.9);
}
.dish-card__thumb { display: none; }

/* foto che segue il cursore (solo desktop con mouse) */
.hoverpic {
  position: fixed; top: 0; left: 0; z-index: 85;
  /* dimensione reale impostata da JS = quella della card sorvolata (fallback qui sotto) */
  width: 300px; height: 220px;
  border-radius: var(--radius); overflow: hidden;
  border: 3px solid var(--navy-deep);
  box-shadow: 0 34px 80px -22px rgba(0, 0, 0, .65), 8px 10px 0 rgba(216, 38, 44, .55);
  pointer-events: none; opacity: 0; will-change: transform;
  transition: opacity .16s ease;
}
.hoverpic.show { opacity: 1; }
.hoverpic img { width: 100%; height: 100%; object-fit: cover; }
/* comparsa "a iride": la foto si apre dal centro e riempie tutta la card */
.hoverpic.show img { animation: irisIn .44s var(--ease-out) both; }
@keyframes irisIn {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(140% at 50% 50%); }
}
@media (hover: none), (max-width: 820px) { .hoverpic { display: none; } }

.panini__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 44px; justify-content: center; }
.panini__foot p { font-family: var(--font-script); font-size: 26px; color: var(--cheddar); }

/* ---------- Storia (cream, broken grid) ---------- */
.storia { background: var(--cream); overflow: clip; }
.storia__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.storia__copy p + p { margin-top: 16px; }
.storia__copy .lead { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; color: var(--ink); }
.storia__copy p { color: var(--ink-soft); }
.storia__copy strong { color: var(--ink); }
.storia__sign { margin-top: 26px; font-family: var(--font-script); font-size: 34px; color: var(--red); rotate: -2deg; display: inline-block; }
.polaroid { position: relative; rotate: 2.4deg; }
.polaroid__frame {
  background: #fff; padding: 14px 14px 52px; border-radius: 8px;
  box-shadow: var(--shadow-soft), 0 2px 0 rgba(11,18,38,.08);
  border: 1px solid rgba(11,18,38,.08);
}
.polaroid__frame img { border-radius: 4px; aspect-ratio: 4 / 3.4; object-fit: cover; }
.polaroid__caption {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-family: var(--font-script); font-size: 24px; color: var(--ink);
}
.polaroid .sticker { animation: none; }
.polaroid .sticker--fix { top: -20px; right: -14px; rotate: 8deg; }
.storia__checker { height: 26px; margin-top: clamp(48px, 6vw, 80px); border-block: 3px solid var(--navy-deep); }

/* fun-fact chips */
.factline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.factline li {
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  border: 2px solid var(--navy-deep); border-radius: 999px; padding: 9px 16px 8px;
  background: var(--paper); box-shadow: 3px 3px 0 rgba(11,18,38,.16);
}

/* ---------- Qualità / filiera (paper) ---------- */
.quality { background: var(--paper); }
.quality__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.q-card {
  border: 3px solid var(--navy-deep); border-radius: var(--radius);
  padding: 24px 22px; background: var(--cream);
  transition: transform .25s var(--ease-pop), box-shadow .25s var(--ease-pop);
  box-shadow: 4px 4px 0 rgba(11,18,38,.14);
}
.q-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop-sm); }
.q-card__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  border: 3px solid var(--navy-deep); margin-bottom: 16px;
}
.q-card:nth-child(1) .q-card__icon { background: var(--red); color: var(--cream); }
.q-card:nth-child(2) .q-card__icon { background: var(--cheddar); color: var(--navy-deep); }
.q-card:nth-child(3) .q-card__icon { background: var(--navy); color: var(--cream); }
.q-card:nth-child(4) .q-card__icon { background: var(--cream-dim); color: var(--navy-deep); }
.q-card__icon svg { width: 26px; height: 26px; }
.q-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.q-card p { font-size: 15.5px; color: var(--ink-soft); margin-top: 9px; line-height: 1.55; }
.quality__strip { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.quality__photo { position: relative; border-radius: var(--radius); overflow: hidden; border: 3px solid var(--navy-deep); box-shadow: var(--shadow-pop); min-height: 300px; }
.quality__photo img { width: 100%; height: 100%; object-fit: cover; }
.quality__photo figcaption {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--navy-deep); color: var(--cream);
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 14px 8px; border-radius: 10px;
}

/* ---------- Delivery (navy-deep) — scena packaging sticky, scroll nativo ---------- */
.delivery { background: var(--navy-deep); color: var(--cream); overflow: clip; }
.dscene { position: relative; height: 240vh; }
.dscene__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: clip; }
.dscene__grid {
  display: grid; grid-template-columns: 1fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: center;
  width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto;
}
.delivery__title { font-size: clamp(32px, 4.4vw, 62px); }
.delivery__title em { font-style: normal; color: var(--red-neon); }
.delivery__copy { margin-top: 16px; color: var(--cream-soft); max-width: 46ch; }
.delivery__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.delivery__note { margin-top: 16px; font-size: 14.5px; color: var(--cream-soft); display: flex; gap: 8px; align-items: center; }
.delivery__note svg { width: 15px; height: 15px; color: var(--cheddar); flex: none; }
.dscene__hint {
  position: absolute; left: 50%; bottom: 2.5svh; translate: -50% 0;
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(247, 240, 222, .55); transition: opacity .3s;
}
.dscene__hint.off { opacity: 0; }

/* il pacco: la box si riempie e si chiude */
.dpack { position: relative; width: min(500px, 92vw); aspect-ratio: 520 / 460; margin-inline: auto; perspective: 1100px; }
.dpack__back, .dpack__front { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.dpack__back { z-index: 1; }
.dpack__front { z-index: 3; }
.dpack__item { position: absolute; z-index: 2; will-change: transform; }
.dpack__item--fries { left: 8%; bottom: 26%; width: 23%; }
.dpack__item--burger { left: 34%; bottom: 23%; width: 33%; }
.dpack__item--can { right: 8%; bottom: 26%; width: 16%; }
.dpack__item--sauce1 { left: 28%; bottom: 55%; width: 12%; }
.dpack__item--sauce2 { left: 57%; bottom: 57%; width: 11%; }
.dpack__brand {
  position: absolute; z-index: 3; left: 50%; bottom: 12.5%; translate: -50% 0;
  text-align: center; line-height: 1; pointer-events: none;
}
.dpack__brand .script { display: block; font-size: clamp(28px, 3.6vw, 40px); color: var(--cream); rotate: -2deg; text-shadow: 2px 2px 0 rgba(11, 18, 38, .55); }
.dpack__brand small { font-size: 10px; font-weight: 900; letter-spacing: .42em; text-transform: uppercase; color: rgba(247, 240, 222, .85); }
.dpack__lid {
  position: absolute; left: 3.5%; right: 3.5%; top: 11%; height: 54%; z-index: 4;
  background: linear-gradient(165deg, #EFC68F, #D8A868);
  border: 4px solid var(--navy-deep); border-radius: 16px;
  display: grid; place-content: center; text-align: center; gap: 2px;
  transform-origin: top center; transform: rotateX(-104deg);
  backface-visibility: hidden;
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .55);
}
.dpack__lid .script { font-family: var(--font-script); font-size: clamp(38px, 5vw, 56px); color: var(--red-dark); rotate: -3deg; line-height: 1; }
.dpack__lid small { font-size: 11px; font-weight: 900; letter-spacing: .4em; text-transform: uppercase; color: var(--navy-deep); }
.dpack__stamp {
  position: absolute; right: -3%; bottom: 3%; z-index: 5; rotate: -8deg;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--red); color: var(--cream); border: 3px solid var(--navy-deep);
  padding: 10px 14px 8px; border-radius: 10px; box-shadow: var(--shadow-pop-sm);
  opacity: 0; scale: .5; transition: opacity .3s, scale .4s var(--ease-pop);
}
.dpack.done .dpack__stamp { opacity: 1; scale: 1; }
.dpack__steam { position: absolute; top: 1%; left: 50%; translate: -50% 0; z-index: 5; display: flex; gap: 16px; opacity: 0; transition: opacity .5s; }
.dpack.done .dpack__steam { opacity: 1; }
.dpack__steam i { width: 4px; height: 30px; border-radius: 3px; background: linear-gradient(transparent, rgba(247,240,222,.7)); animation: steam 1.8s ease-in-out infinite; }
.dpack__steam i:nth-child(2) { animation-delay: .4s; height: 38px; }
.dpack__steam i:nth-child(3) { animation-delay: .8s; }
@keyframes steam { 0% { transform: translateY(6px) scaleY(.7); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateY(-12px) scaleY(1.1); opacity: 0; } }

/* fallback statico (reduced-motion / no-JS): box aperta e piena, timbro visibile */
.dscene--static { height: auto; }
.dscene--static .dscene__stage { position: static; height: auto; padding: clamp(64px, 9vw, 110px) 0; }
.dscene--static .dpack__lid { display: none; }
.dscene--static .dpack__stamp { opacity: 1; scale: 1; }
.dscene--static .dpack__steam { opacity: 1; }
.dscene--static .dscene__hint { display: none; }

/* MOBILE: comparsa "one-shot" a scaglioni (box statica, pacco sempre intero) */
.dscene--reveal .dpack__item {
  opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.dscene--reveal.in .dpack__item { opacity: 1; transform: none; }
.dscene--reveal .dpack__item--fries  { transition-delay: .06s; }
.dscene--reveal .dpack__item--burger { transition-delay: .16s; }
.dscene--reveal .dpack__item--can     { transition-delay: .26s; }
.dscene--reveal .dpack__item--sauce1  { transition-delay: .36s; }
.dscene--reveal .dpack__item--sauce2  { transition-delay: .44s; }
.dscene--reveal .dpack__stamp {
  opacity: 0; scale: .5; transition: opacity .4s ease, scale .5s var(--ease-pop);
  transition-delay: .52s;
}
.dscene--reveal.in .dpack__stamp { opacity: 1; scale: 1; }

/* ---------- Wall of fame (cream) ---------- */
.wall { background: var(--cream); }
.wall__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.wall__item {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 3px solid var(--navy-deep); cursor: zoom-in; padding: 0;
  box-shadow: 4px 4px 0 rgba(11,18,38,.16);
  transition: transform .22s var(--ease-pop), box-shadow .22s var(--ease-pop);
}
.wall__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.wall__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop-sm); }
.wall__item:hover img { transform: scale(1.05); }
.wall__item--tall { grid-row: span 2; }
.wall__item--wide { grid-column: span 2; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(11, 18, 38, .92);
  display: grid; place-items: center; padding: 30px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1000px, 92vw); max-height: 82svh; object-fit: contain;
  border-radius: 12px; border: 3px solid var(--cream); box-shadow: 0 40px 90px rgba(0,0,0,.6);
}
.lightbox__caption { margin-top: 14px; color: var(--cream-soft); font-size: 15px; text-align: center; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream); color: var(--navy-deep); border: 3px solid var(--navy-deep);
  box-shadow: var(--shadow-pop-sm); transition: transform .15s var(--ease-pop);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { transform: scale(1.06); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__prev { left: 22px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 22px; top: 50%; translate: 0 -50%; }
.lightbox svg { width: 22px; height: 22px; }

/* ---------- Reviews (navy) ---------- */
.reviews { background: var(--navy); color: var(--cream); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
  background: var(--cream); color: var(--ink); border: 3px solid var(--navy-deep);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 14px;
}
.review-card:nth-child(odd) { rotate: -1deg; }
.review-card:nth-child(even) { rotate: 1.2deg; }
.review-card__stars { color: var(--cheddar); font-size: 18px; letter-spacing: 4px; text-shadow: 0 1px 0 rgba(11,18,38,.4); }
.review-card__text { font-size: 17.5px; font-weight: 500; line-height: 1.55; }
.review-card__meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; }
.review-card__src { background: var(--navy-deep); color: var(--cream); border-radius: 999px; padding: 6px 12px 5px; font-size: 11px; letter-spacing: .12em; }
.reviews__foot { text-align: center; margin-top: 40px; }

/* Travellers' Choice strip (recensioni) */
.ta-award {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0 auto clamp(30px, 4vw, 46px); max-width: 720px; text-align: center;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--navy-deep); border-radius: 999px;
  padding: 15px 26px 13px; box-shadow: var(--shadow-pop-sm); rotate: -1deg;
}
.ta-award svg { width: 24px; height: 24px; color: var(--cheddar); flex: none; }
.ta-award p { font-size: 15.5px; font-weight: 700; }
.ta-award strong { color: var(--red-dark); }

/* ---------- Contatti (paper) ---------- */
.contatti { background: var(--paper); }
.contatti__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.hours { border: 3px solid var(--navy-deep); border-radius: var(--radius); overflow: hidden; background: var(--cream); box-shadow: var(--shadow-pop); }
.hours__head { background: var(--navy-deep); color: var(--cream); padding: 18px 22px 14px; display: flex; justify-content: space-between; align-items: baseline; }
.hours__head h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.hours__badge { font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--cheddar); }
.hours ul { padding: 10px 22px 16px; }
.hours li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line-dark); font-size: 15.5px; }
.hours li:last-child { border-bottom: 0; }
.hours li span:last-child { font-weight: 700; white-space: nowrap; }
.hours li.today { font-weight: 900; color: var(--red-dark); }
.hours li.today span:first-child::after { content: ' · oggi'; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
html[lang="en"] .hours li.today span:first-child::after { content: ' · today'; }
.hours__note { padding: 0 22px 18px; font-size: 14px; color: var(--ink-soft); }

.cinfo { display: grid; gap: 14px; }
.cinfo__row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 2px solid var(--navy-deep); border-radius: 14px; background: var(--cream); box-shadow: 3px 3px 0 rgba(11,18,38,.14); }
.cinfo__row svg { width: 21px; height: 21px; color: var(--red); flex: none; margin-top: 2px; }
.cinfo__row strong { display: block; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; }
.cinfo__row p, .cinfo__row a.link { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
a.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--red); }
a.link:hover { color: var(--red-dark); }
.contatti__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.map { position: relative; margin-top: clamp(40px, 5vw, 60px); border: 3px solid var(--navy-deep); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-pop); }
.map iframe { display: block; width: 100%; height: 250px; border: 0; pointer-events: none; }
.map.on iframe { pointer-events: auto; }
.map__unlock {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: linear-gradient(rgba(11, 18, 38, .12), rgba(11, 18, 38, .3));
  transition: background .25s;
}
.map__unlock span {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-text); font-size: 14.5px; font-weight: 800; letter-spacing: .05em;
  background: var(--cream); color: var(--navy-deep);
  border: 2.5px solid var(--navy-deep); border-radius: 999px;
  padding: 12px 20px 11px; box-shadow: var(--shadow-pop-sm);
  transition: transform .2s var(--ease-pop);
}
.map__unlock:hover span { transform: translateY(-2px); }
.map__unlock svg { width: 17px; height: 17px; color: var(--red); }

/* ---------- FAQ (cream) ---------- */
.faq { background: var(--cream); }
.faq__list { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item { border: 3px solid var(--navy-deep); border-radius: 14px; background: var(--paper); overflow: hidden; box-shadow: 4px 4px 0 rgba(11,18,38,.14); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left; padding: 18px 20px; font-size: 17.5px; font-weight: 700;
}
.faq__q::after {
  content: '+'; font-family: var(--font-display); font-size: 22px; color: var(--red);
  transition: rotate .3s var(--ease-out); flex: none; line-height: 1;
}
.faq__item.open .faq__q::after { rotate: 45deg; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 20px 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

/* ---------- CTA finale (red band) ---------- */
.final { background: var(--red); color: var(--cream); border-block: 4px solid var(--navy-deep); text-align: center; padding: clamp(64px, 8vw, 110px) 0; position: relative; overflow: clip; }
.final__script { font-family: var(--font-script); font-size: clamp(30px, 4vw, 48px); rotate: -2deg; display: inline-block; }
.final__title { font-size: clamp(40px, 6vw, 84px); margin-top: 6px; text-shadow: 4px 4px 0 rgba(11,18,38,.35); }
.final__ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
.final .btn-primary { background: var(--navy-deep); }
.final .btn-primary:hover { background: #000; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: var(--cream); padding: clamp(56px, 7vw, 90px) 0 110px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
.footer__logo { font-family: var(--font-script); font-size: 46px; color: var(--red-neon); text-shadow: 0 0 16px rgba(255,59,65,.4); }
.footer__tag { color: var(--cream-soft); font-size: 15px; margin-top: 8px; max-width: 30ch; line-height: 1.6; }
.footer h4 { font-size: 13px; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; color: var(--cheddar); margin-bottom: 16px; }
.footer li + li { margin-top: 10px; }
.footer a:not(.btn) { color: var(--cream-soft); font-size: 15.5px; transition: color .2s; }
.footer a:not(.btn):hover { color: var(--cream); }
.footer address { font-style: normal; color: var(--cream-soft); font-size: 15.5px; line-height: 1.75; }
.footer__base { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: 12.5px; color: rgba(247,240,222,.45); }
.footer__base a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Sticky mobile CTA bar ---------- */
.mbar {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 110;
  display: none; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px;
  background: var(--navy-deep); border: 3px solid var(--navy-deep); border-radius: 16px;
  padding: 8px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  transform: translateY(120%); transition: transform .35s var(--ease-out);
}
.mbar.show { transform: none; }
.mbar a {
  display: grid; place-items: center; gap: 2px; text-align: center;
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 10px; padding: 10px 6px 8px; line-height: 1;
}
.mbar a:first-child { background: var(--red); color: var(--cream); }
.mbar a:not(:first-child) { background: var(--navy-card); color: var(--cream); }
.mbar svg { width: 16px; height: 16px; }

/* ---------- Micro-interazioni (solo hover reali, GPU-only) ---------- */
@keyframes wiggle { 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:active, .btn-cream:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 rgba(11, 18, 38, .9); }
  .btn svg { transition: transform .25s var(--ease-pop); }
  .btn:hover svg { transform: translateX(3px) scale(1.12); }
  .header__logo { display: inline-block; transition: transform .25s var(--ease-pop); }
  .header__logo:hover { transform: rotate(-2deg) scale(1.05); }
  .q-card:hover .q-card__icon svg { animation: wiggle .5s var(--ease-out); }
  .factline li { transition: transform .2s var(--ease-pop), box-shadow .2s; }
  .factline li:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 4px 6px 0 rgba(11, 18, 38, .22); }
  .wall__item:hover { rotate: -1.2deg; }
  .review-card { transition: transform .3s var(--ease-pop), rotate .35s var(--ease-out); }
  .review-card:hover { rotate: 0deg; transform: translateY(-5px); }
  .cinfo__row { transition: transform .25s var(--ease-out), box-shadow .25s; }
  .cinfo__row:hover { transform: translateX(5px); box-shadow: 5px 5px 0 rgba(11, 18, 38, .2); }
  .faq__item { transition: transform .2s var(--ease-out), box-shadow .2s; }
  .faq__item:hover { transform: translateY(-2px); box-shadow: 5px 6px 0 rgba(11, 18, 38, .2); }
  .mi__name { transition: transform .25s var(--ease-out); }
  .mi:hover .mi__name { transform: translateX(5px); }
  .fbtn:active { transform: scale(.95); }
  .footer li a { display: inline-block; transition: transform .2s var(--ease-out); }
  .footer li a:hover { transform: translateX(4px); }
  .hours li span:first-child { display: inline-block; transition: transform .2s var(--ease-out); }
  .hours li:hover span:first-child { transform: translateX(4px); }
  .jukebox { transition: transform .5s var(--ease-out); }
  .jukebox:hover { transform: scale(1.02) rotate(1.2deg); }
  .ta-chip { transition: transform .2s var(--ease-pop); }
  .ta-chip:hover { transform: translateY(-2px); }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal--left { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal--pop { transform: scale(.92); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ============================================================
   MENU PAGE
   ============================================================ */
.menu-hero {
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(216,38,44,.3), transparent 60%),
    linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: var(--cream); padding: calc(var(--header-h) + clamp(48px, 7vw, 90px)) 0 clamp(44px, 6vw, 80px);
}
.menu-hero .crumbs { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-soft); margin-bottom: 18px; }
.menu-hero .crumbs a:hover { color: var(--cream); }
.menu-hero__title { font-size: clamp(46px, 7vw, 100px); }
.menu-hero__title em { font-style: normal; color: var(--cheddar); }
.menu-hero__sub { color: var(--cream-soft); margin-top: 14px; max-width: 60ch; }
.menu-hero__script { font-family: var(--font-script); color: var(--red-neon); font-size: clamp(24px, 3vw, 34px); display: inline-block; rotate: -2deg; margin-bottom: 4px; }

.menu-tools { position: sticky; top: var(--header-h); z-index: 90; background: var(--cream); border-block: 3px solid var(--navy-deep); padding: 14px 0; }
.menu-tools__in { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.menu-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.menu-search input {
  width: 100%; padding: 12px 16px 11px 42px; font: inherit; font-size: 15.5px;
  border: 2.5px solid var(--navy-deep); border-radius: 999px; background: var(--paper); color: var(--ink);
}
.menu-search svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--ink-soft); pointer-events: none; }
.menu-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fbtn {
  font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border: 2.5px solid var(--navy-deep); border-radius: 999px; padding: 10px 16px 9px;
  background: var(--paper); transition: background .2s, color .2s, transform .15s var(--ease-pop);
}
.fbtn:hover { transform: translateY(-2px); }
.fbtn[aria-pressed="true"] { background: var(--navy-deep); color: var(--cream); }

.menu-body { background: var(--paper); padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 8vw, 110px); }
.menu-section { margin-bottom: clamp(44px, 6vw, 72px); }
.menu-section__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; border-bottom: 4px solid var(--navy-deep); padding-bottom: 12px; }
.menu-section__title { font-size: clamp(26px, 3.4vw, 42px); color: var(--navy-deep); }
.menu-section__note { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px; }
.mi {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 13px 6px; border-bottom: 1.5px dashed var(--line-dark); border-radius: 6px;
  transition: background .2s;
}
.mi:hover { background: rgba(242, 169, 59, .12); }
.mi__name { font-family: var(--font-display); font-weight: 400; font-size: 18.5px; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mi__price { font-family: var(--font-display); font-size: 17.5px; color: var(--red-dark); white-space: nowrap; }
.mi__desc { grid-column: 1 / -1; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.badge {
  font-family: var(--font-text); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px 3px; border-radius: 999px; border: 2px solid var(--navy-deep); line-height: 1;
}
.badge--top { background: var(--cheddar); color: var(--navy-deep); }
.badge--veg { background: #7FB069; color: var(--navy-deep); }
.badge--hot { background: var(--red); color: var(--cream); }
.badge--new { background: var(--navy); color: var(--cream); }
.menu-empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); display: none; }
.menu-empty .script { font-size: 34px; color: var(--red); display: block; margin-bottom: 8px; }
.menu-note { max-width: 760px; margin: 10px auto 0; text-align: center; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* legal pages */
.legal { background: var(--paper); padding: calc(var(--header-h) + 60px) 0 90px; }
.legal h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 10px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal .wrap { max-width: 780px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: 1fr; gap: 56px; padding-bottom: 110px; text-align: center; }
  .hero__kicker { justify-content: center; }
  .hero__kicker::before { display: none; }
  .hero__lead { margin-inline: auto; }
  .hero__ctas, .hero__meta { justify-content: center; }
  .hero__stage { order: -1; margin-top: 10px; }
  .jukebox { --size: min(56vw, 360px); }
  .sticker--tl { left: 2%; }
  .sticker--br { right: 0; }
  .quality__grid { grid-template-columns: 1fr 1fr; }
  .panini__grid { grid-template-columns: 1fr 1fr; }
  .wall__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .reviews__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .dscene__grid, .contatti__grid, .storia__grid { grid-template-columns: 1fr; }
  .dscene__grid { gap: 26px; }
  .dpack { width: min(400px, 86vw); }
  .delivery__copy { max-width: 60ch; }
  .polaroid { max-width: 480px; margin-inline: auto; }
  .menu-grid { grid-template-columns: 1fr; }
}

/* sotto i 1140px non c'è spazio per le etichette laterali: passa alla modalità
   "una targhetta alla volta in basso" — ben leggibile e senza sovrapposizioni */
@media (max-width: 1140px) {
  /* panino un po' più compatto e allineato in alto: si libera una fascia SOTTO
     dove la targhetta-ingrediente sta comoda e ben leggibile (niente overlap) */
  .build__scene {
    align-self: start; margin-top: 6px;
    height: min(540px, calc(100svh - 400px), calc(90vw * 460 / 420));
  }
  .build__labels {
    position: absolute; left: 16px; right: 16px; top: calc(100% + 14px); bottom: auto;
    display: flex; justify-content: center; pointer-events: none; z-index: 6;
  }
  .build__label {
    position: static; width: auto; max-width: min(440px, 92vw); display: none;
    text-align: center; opacity: 1; transform: none;
    background: var(--navy-deep); color: var(--cream);
    border: 3px solid var(--navy-deep); border-radius: 16px;
    padding: 13px 22px 12px; box-shadow: var(--shadow-pop-sm);
  }
  .build__label::before { margin: 0 auto 9px; width: 42px; }
  .build__label strong { color: var(--cream); font-size: 19px; }
  .build__label span { display: block; color: var(--cream-soft); font-size: 14.5px; line-height: 1.45; }
  .build__label.on { display: block; animation: labelPop .45s var(--ease-out); }
  @keyframes labelPop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
}

@media (max-width: 820px) {
  .header__nav, .header__cta, .header .lang-toggle--desk { display: none; }
  .burger-btn { display: block; margin-left: auto; }
  .mbar { display: grid; }
  .footer { padding-bottom: 130px; }
  /* card panini: thumb statica al posto dell'hover */
  .dish-card { padding-right: 110px; }
  .dish-card__thumb {
    display: block; position: absolute; top: 20px; right: 20px;
    width: 76px; height: 76px; object-fit: cover; border-radius: 12px;
    border: 2.5px solid var(--navy-deep); box-shadow: 3px 3px 0 rgba(11, 18, 38, .25);
  }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { width: calc(100% - 40px); }
  .quality__grid, .panini__grid { grid-template-columns: 1fr; }
  .dish-card__desc { min-height: 0; }
  .wall__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__ctas .btn { width: 100%; }
  .sticker { font-size: 12px; padding: 9px 12px 8px; }
  .sticker--tl { top: 0; left: 0; }
  .sticker--tr { top: -6%; right: 0; }
  .sticker--br { bottom: 0; right: 0; }
  .map iframe { height: 220px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker__track { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .hero__scroll::after { animation: none; }
  .flicker, .loader__sign { animation: none; }
  .sticker { animation: none; }
}