:root {
  --red: #f91814;          /* the top curtain and the title */
  --orange: #ef6f2e;       /* the middle curtain */
  --maroon: #4c0016;       /* the last curtain and every outline */
  --mustard: #ffd750;      /* the bar, the sticker, the crumbs */
  --beige: #f5e3cd;        /* the page of the burger bar */
  --white: #ffffff;
  --bun: #ff9d3f;
  --bun-light: #ffc874;
  --bun-shade: #ef6f2e;
  --bun-toast: #b9461c;
  --crumb: #ffe2b0;
  --crumb-hole: #e9b878;
  --patty: #9c3b32;
  --patty-light: #c9654c;
  --patty-dark: #4f140f;
  --cheese: #ffc614;
  --cheese-light: #ffe066;
  --cheese-shade: #ed900a;
  --tomato: #ef1624;
  --tomato-flesh: #ff4b3a;
  --tomato-light: #ffa08c;
  --seed: #fff2d6;
  --onion: #b5367c;
  --lettuce: #77c41e;
  --lettuce-light: #a8e24a;
  --lettuce-shade: #4f8f0c;
  --pickle: #6f8f1c;
  --pickle-light: #c9d77a;
  --sauce: #ff7a2a;
  --wood: #c98a4c;
  --wood-light: #e6b27a;
  --wood-dark: #8f5a2c;
  --elastic: cubic-bezier(0.34, 1.7, 0.5, 1);
  --w: min(62vw, 44vh, 380px);     /* how wide the burger is */
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  overflow: hidden;
  background: var(--beige);
  color: var(--maroon);
  font-family: 'Bricolage Grotesque Variable', 'Arial Black', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- the page under the loader ---------- */
.pagina {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  background: var(--beige);
}
.testa {
  position: absolute;
  top: clamp(14px, 3.4vh, 28px);
  left: clamp(16px, 4vw, 40px);
  right: clamp(16px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: clamp(18px, min(3vw, 4.2vh), 30px);
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.02em;
  color: var(--red);
}
.testa__ordina {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: 'Big Shoulders Display Variable', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, min(1.6vw, 2.4vh), 16px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nastro {
  position: absolute;
  top: clamp(52px, 11vh, 86px);
  left: -4%;
  right: -4%;
  overflow: hidden;
  background: var(--maroon);
  color: var(--mustard);
  rotate: -2deg;
  padding: 4px 0;
}
.nastro__corsa {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: 'Big Shoulders Display Variable', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(12px, min(1.8vw, 2.6vh), 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nastro__corsa span { padding-right: 1.4em; }
.titolo {
  display: grid;
  justify-items: center;
  line-height: 0.82;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--red);
  font-size: min(19vw, 24vh, 230px);
  -webkit-text-stroke: max(2px, 0.02em) var(--white);
  paint-order: stroke fill;
  text-shadow: 0 0.04em 0 var(--maroon);
}
.titolo__riga--due { color: var(--mustard); -webkit-text-stroke-color: var(--maroon); text-shadow: none; }
.lettera { display: inline-block; will-change: transform; }
.adesivo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: min(calc(min(19vw, 24vh, 230px) * 1.55), calc(50vw - min(17vw, 19vh, 150px) - 12px)) calc(min(19vw, 24vh, 230px) * -0.95);
  width: min(17vw, 19vh, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.adesivo span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--mustard);
  border: max(2px, 0.18em) solid var(--maroon);
  color: var(--maroon);
  font-family: 'Big Shoulders Display Variable', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: min(2.2vw, 2.5vh, 19px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.sotto {
  margin-top: clamp(14px, 3.4vh, 30px);
  max-width: 30ch;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(13px, min(1.7vw, 2.5vh), 18px);
  font-weight: 500;
  line-height: 1.35;
}

.pillola {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--white);
  font: 700 15px/1 'Bricolage Grotesque Variable', sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  isolation: isolate;
  visibility: hidden;
}
.pillola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--maroon);
  transition: inset 0.6s var(--elastic);
}
.pillola__scritta { font-stretch: 86%; transition: font-stretch 0.6s var(--elastic); }
.pillola__scritta::before { content: attr(data-testo); display: block; height: 0; overflow: hidden; visibility: hidden; font-stretch: 112%; }
@media (hover: hover) and (pointer: fine) {
  .pillola:hover::before { inset: -2px -7px; }
  .pillola:hover .pillola__scritta { font-stretch: 112%; }
}
.pillola:active::before { inset: 2px 3px; }
.pillola:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ---------- the loader ---------- */
.carica {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.teli { position: absolute; inset: 0; width: 100%; height: 100%; }
.telo--uno { fill: var(--red); }
.telo--due { fill: var(--orange); }
.telo--tre { fill: var(--maroon); }
.telo__luce { fill: none; stroke: var(--white); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.pila {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.14);
  margin-bottom: calc(var(--w) * 0.14);
  transform-origin: 50% 100%;
}
.strato {
  position: absolute;
  left: 50%;
  display: block;
  overflow: visible;
  will-change: transform;
}
.strato--pane-sotto { width: 92%; bottom: 0; margin-left: -46%; z-index: 1; }
.strato--carne      { width: 96%; bottom: calc(var(--w) * 0.19); margin-left: -48%; z-index: 2; }
.strato--formaggio  { width: 98%; bottom: calc(var(--w) * 0.25); margin-left: -49%; z-index: 3; }
.strato--pomodoro   { width: 90%; bottom: calc(var(--w) * 0.455); margin-left: -45%; z-index: 4; }
.strato--insalata   { width: 102%; bottom: calc(var(--w) * 0.54); margin-left: -51%; z-index: 5; }
.strato--pane-sopra { width: 92%; bottom: calc(var(--w) * 0.537); margin-left: -46%; z-index: 6; }

.bordo, .bordo-pieno { stroke: var(--maroon); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.bordo { fill: none; }
.bordo--sottile { stroke-width: 3; }

/* the gradient stops take their colours from :root, so the Palette recolours them too */
.s-pane-luce { stop-color: var(--bun-light); }
.s-pane { stop-color: var(--bun); }
.s-pane-ombra { stop-color: var(--bun-shade); }
.s-pane-tostato { stop-color: var(--bun-toast); }
.s-carne-luce { stop-color: var(--patty-light); }
.s-carne { stop-color: var(--patty); }
.s-carne-scura { stop-color: var(--patty-dark); }
.s-formaggio-luce { stop-color: var(--cheese-light); }
.s-formaggio { stop-color: var(--cheese); }
.s-formaggio-ombra { stop-color: var(--cheese-shade); }
.s-polpa-luce { stop-color: var(--tomato-light); stop-opacity: 0.9; }
.s-polpa { stop-color: var(--tomato-flesh); stop-opacity: 0.75; }
.s-insalata-luce { stop-color: var(--lettuce-light); }
.s-insalata { stop-color: var(--lettuce); }
.s-legno-luce { stop-color: var(--wood-light); }
.s-legno { stop-color: var(--wood); }
.s-ombra { stop-color: var(--maroon); }

.f-pane-tostato { fill: var(--bun-toast); }
.f-mollica { fill: var(--crumb); }
.tostatura { fill: none; stroke: var(--bun-toast); stroke-width: 2.4; stroke-linecap: round; opacity: 0.7; }
.buchi ellipse { fill: var(--crumb-hole); }
.luce { fill: none; stroke: var(--white); stroke-width: 4; stroke-linecap: round; opacity: 0.6; }
.luce--grande { stroke-width: 7; opacity: 0.7; }
.luce--piccola { stroke-width: 2.4; opacity: 0.5; }

.f-carne-scura { fill: var(--patty-dark); }
.carne-crosta { fill: none; stroke: var(--patty-light); stroke-width: 4; stroke-linecap: round; opacity: 0.9; }
.carne-ombra { fill: none; stroke: var(--patty-dark); stroke-width: 7; stroke-linecap: round; opacity: 0.5; }
.carne-segni { fill: none; stroke: var(--patty-dark); stroke-width: 3.4; stroke-linecap: round; opacity: 0.75; }
.grana circle { fill: var(--patty-dark); opacity: 0.7; }
.grana--chiara circle { fill: var(--patty-light); opacity: 0.9; }
.lucido { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; opacity: 0.45; }
.sugo { fill: var(--patty-dark); }

.gocce path { fill: url(#g-formaggio); }
.formaggio-piega { fill: none; stroke: var(--cheese-shade); stroke-width: 3; stroke-linecap: round; opacity: 0.8; }

.f-pomodoro { fill: var(--tomato); }
.f-carne-pomodoro { fill: var(--tomato-flesh); }
.cuore { fill: var(--tomato-light); opacity: 0.85; }
.semi path { fill: var(--seed); stroke: var(--tomato); stroke-width: 0.6; }
.cipolla ellipse { fill: none; stroke: var(--onion); stroke-width: 3.6; }
.cipolla ellipse:nth-child(odd) { filter: drop-shadow(0 0 0.6px var(--maroon)); }
.cipolla ellipse:nth-child(even) { stroke: var(--seed); stroke-width: 2; opacity: 0.9; }

.f-insalata-dietro { fill: var(--lettuce-shade); stroke: var(--maroon); stroke-width: 4; stroke-linejoin: round; }
.insalata-ombra { fill: none; stroke: var(--lettuce-shade); stroke-width: 6; stroke-linecap: round; opacity: 0.6; }
.venature { fill: none; stroke: var(--lettuce-shade); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.frangia { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; opacity: 0.5; }
.cetriolo ellipse { fill: var(--pickle); }
.cetriolo .cetriolo-polpa { fill: var(--pickle-light); }
.cetriolo circle { fill: var(--pickle); }

.salsa path { fill: var(--sauce); stroke: var(--maroon); stroke-width: 2.4; }
.salsa-bordo { fill: none; stroke: var(--sauce); stroke-width: 7; stroke-linecap: round; }
.sesamo ellipse { fill: var(--seed); stroke: var(--maroon); stroke-width: 1.6; }
.sesamo-ombra ellipse { fill: var(--bun-toast); opacity: 0.45; }
.sesamo-luce path { fill: none; stroke: var(--white); stroke-width: 1.4; stroke-linecap: round; }

.vapore {
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * 1.0);
  width: 70%;
  margin-left: -35%;
  overflow: visible;
  z-index: 7;
}
.vapore path { fill: none; stroke: var(--white); stroke-width: 5; stroke-linecap: round; opacity: 0; }

/* the board: wood, grain, a knot, the hole to hang it, and the shadow of the burger */
.tagliere {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--w) * 0.44);
  width: calc(var(--w) * 1.25);
  margin-left: calc(var(--w) * -0.625);
  overflow: visible;
}
.legno { fill: url(#g-legno); }
.legno-lato { fill: var(--wood-dark); }
.venatura { fill: none; stroke: var(--wood-dark); stroke-width: 1.6; stroke-linecap: round; opacity: 0.5; }
.nodo { fill: none; stroke: var(--wood-dark); stroke-width: 1.6; opacity: 0.6; }
.ombra { fill: url(#g-ombra); }
.foro { fill: var(--red); stroke: var(--maroon); stroke-width: 3; }

.briciole { position: absolute; left: 50%; top: 40%; z-index: 10; }
.briciola { position: absolute; left: 0; top: 0; opacity: 0; }
.briciola--seme { background: var(--seed); border: 2px solid var(--maroon); border-radius: 50%; }
.briciola--mollica { background: var(--bun); clip-path: polygon(20% 0, 80% 10%, 100% 55%, 70% 100%, 15% 85%, 0 40%); }
.briciola--foglia { background: var(--lettuce); clip-path: polygon(50% 0, 90% 30%, 80% 80%, 50% 100%, 15% 75%, 10% 25%); }

.stato {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(9vh, 40px);
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Big Shoulders Display Variable', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, min(3.4vw, 4.6vh), 40px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(8px, 1.4vh, 14px);
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.barra__piena { width: 100%; height: 100%; background: var(--mustard); transform-origin: 0 50%; transform: scaleX(0); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }