*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

/* The stage is locked to the exact aspect ratio of the Figma frame it was
   designed at (mobile 390x844, desktop 1440x1024 — see --ar-w/--ar-h below)
   and letterboxed within the viewport. Item positions are percentages of
   this box, so they never distort (and never gain new overlaps) on a
   viewport whose own aspect ratio differs from the design frame's. */
.stage {
  position: relative;
  container-type: size;
  container-name: stage;
  --ar-w: 390;
  --ar-h: 844;
  width: min(100dvw, calc(100dvh * var(--ar-w) / var(--ar-h)));
  height: min(100dvh, calc(100dvw * var(--ar-h) / var(--ar-w)));
}

/* Sibling of .stage (not nested inside it) so the tile pattern fills the
   whole viewport edge-to-edge, independent of the stage's letterboxing. */
.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Every item's box keeps its Figma aspect-ratio locked via `aspect-ratio`,
   sized off a single (width) percentage, so it can never stretch into an
   oval/rectangle at viewport ratios that differ from the source frame. */
.item {
  position: absolute;
  display: block;
}

/* Items that are themselves an <img>: sized entirely by their
   .item--x rule (width % + aspect-ratio) — must not be re-widthed here. */
img.item {
  object-fit: contain;
  pointer-events: none;
}

/* The menu icon is nested inside its <a class="item">, so it fills that box */
.item--menu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.item--menu {
  cursor: pointer;
}

/* ---------- Shared animation keyframes ---------- */

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  42.41% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fly-in {
  0% {
    translate: var(--fx, 0) var(--fy, 0);
    animation-timing-function: ease-out;
  }
  22.41% {
    translate: 0 0;
  }
  100% {
    translate: 0 0;
  }
}

@keyframes wrap-fly-in {
  0% {
    translate: var(--fx, 0) var(--fy, 0);
    animation-timing-function: ease-out;
  }
  10% {
    translate: 0 0;
  }
  100% {
    translate: 0 0;
  }
}

@keyframes wrap-fly-in-desktop {
  0% {
    translate: var(--fx, 0) var(--fy, 0);
    animation-timing-function: ease-out;
  }
  10.518% {
    translate: 0 0;
  }
  100% {
    translate: 0 0;
  }
}

.item--pizza {
  animation: fade-in 5s linear forwards;
}

.item--crepe,
.item--burger,
.item--berlim,
.item--hotdog {
  animation: fly-in 5s linear forwards;
}

.item--wrap {
  animation: wrap-fly-in 5s linear forwards;
}

/* MENU button: fade in + spring settle (uniform scale + translateY bounce) */
.item--menu {
  animation:
    menu-fade 5s linear forwards,
    menu-bounce-y-mobile 5s linear forwards,
    menu-bounce-scale 5s linear forwards;
  transform-origin: center;
}

@keyframes menu-fade {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  43.586% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Spring curve sampled from Figma's smart-animate easing, applied uniformly
   to both scale axes (from their own start value down to 1) so the bounce
   never skews the button out of its native aspect ratio at rest. */
@keyframes menu-bounce-scale {
  0%, 40% {
    scale: 1.2 0.8;
  }
  40% {
    animation-timing-function: linear(
      0, 0.0839, 0.2934, 0.5636, 0.8359, 1.0662, 1.2283, 1.3132, 1.3267,
      1.2845, 1.2073, 1.1163, 1.0295, 0.9597, 0.9138, 0.8933, 0.8949, 0.913,
      0.9405, 0.9706, 0.9979, 1.0186, 1.0312, 1.0357, 1.0333, 1.0262, 1.0167,
      1.0068, 0.9984, 0.9923, 0.989, 0.9883, 0.9896, 0.9923, 0.9955, 0.9986,
      1.0012, 1.0029, 1.0038, 1.0038, 1.0032, 1.0022, 1.0012, 1.0002, 0.9994,
      0.9989, 0.9987, 0.9988, 0.999, 0.9994, 0.9997
    );
    scale: 1.2 0.8;
  }
  88.405% {
    scale: 1 1;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes menu-bounce-y-mobile {
  0%, 40% { translate: 0 -13.7441cqh; }
  42% { translate: 0 -10.0043cqh; }
  44% { translate: 0 -2.8085cqh; }
  46% { translate: 0 -0.5930cqh; }
  48% { translate: 0 -0.6257cqh; }
  50% { translate: 0 -0.5583cqh; }
  52% { translate: 0 -0.4736cqh; }
  54% { translate: 0 -0.4271cqh; }
  56% { translate: 0 -0.4278cqh; }
  58% { translate: 0 -0.4543cqh; }
  60% { translate: 0 -0.4799cqh; }
  62% { translate: 0 -0.4906cqh; }
  64% { translate: 0 -0.4872cqh; }
  66% { translate: 0 -0.4778cqh; }
  68% { translate: 0 -0.4705cqh; }
  70% { translate: 0 -0.4684cqh; }
  72% { translate: 0 -0.4704cqh; }
  74% { translate: 0 -0.4735cqh; }
  76% { translate: 0 -0.4755cqh; }
  78% { translate: 0 -0.4757cqh; }
  80% { translate: 0 -0.4749cqh; }
  82% { translate: 0 -0.4738cqh; }
  84%, 86% { translate: 0 -0.4735cqh; }
  88%, 90%, 100% { translate: 0 -0.4739cqh; }
}

@keyframes menu-bounce-y-desktop {
  0%, 40% { translate: 0 -11.3281cqh; }
  42% { translate: 0 -8.2457cqh; }
  44% { translate: 0 -2.3148cqh; }
  46% { translate: 0 -0.4888cqh; }
  48% { translate: 0 -0.5157cqh; }
  50% { translate: 0 -0.4602cqh; }
  52% { translate: 0 -0.3903cqh; }
  54% { translate: 0 -0.3521cqh; }
  56% { translate: 0 -0.3526cqh; }
  58% { translate: 0 -0.3744cqh; }
  60% { translate: 0 -0.3955cqh; }
  62% { translate: 0 -0.4044cqh; }
  64% { translate: 0 -0.4016cqh; }
  66% { translate: 0 -0.3938cqh; }
  68% { translate: 0 -0.3878cqh; }
  70% { translate: 0 -0.3860cqh; }
  72% { translate: 0 -0.3877cqh; }
  74% { translate: 0 -0.3902cqh; }
  76% { translate: 0 -0.3919cqh; }
  78% { translate: 0 -0.3921cqh; }
  80% { translate: 0 -0.3914cqh; }
  82% { translate: 0 -0.3905cqh; }
  84%, 86% { translate: 0 -0.3902cqh; }
  88%, 90%, 100% { translate: 0 -0.3906cqh; }
}

@media (prefers-reduced-motion: reduce) {
  .item {
    animation: none !important;
    translate: 0 0 !important;
    opacity: 1 !important;
  }
}

/* ==========================================================
   MOBILE layout (default, < 768px) — from Figma "Mobile" frame (390x844)
   Position anchors (left/top/width) come from Figma's literal box
   coordinates; height is derived from aspect-ratio, never set directly,
   so nothing can be stretched off-ratio.
   ========================================================== */

.item--pizza {
  left: -6.1538%;
  top: 22.1564%;
  width: 107.9487%;
  aspect-ratio: 421 / 356;
}

.item--burger {
  left: -9.0256%;
  top: 1.8246%;
  width: 64.8718%;
  aspect-ratio: 1 / 1;
  --fx: -128.2051cqw;
  --fy: -59.2417cqh;
}

.item--crepe {
  left: -1.2564%;
  top: 70.7109%;
  width: 52.0513%;
  aspect-ratio: 203 / 196;
  --fx: -128.2051cqw;
  --fy: 59.2417cqh;
}

.item--berlim {
  left: 65.4615%;
  top: 54.8104%;
  width: 48.9744%;
  aspect-ratio: 191 / 206;
  --fx: 0cqw;
  --fy: 71.09cqh;
}

.item--hotdog {
  left: 40.8974%;
  top: 75.0473%;
  width: 61.7949%;
  aspect-ratio: 241 / 195;
  --fx: 128.2051cqw;
  --fy: 59.2417cqh;
}

.item--menu {
  left: -1.0128%;
  top: 53.5545%;
  width: 40.2821%;
  aspect-ratio: 200 / 215;
}

.item--wrap {
  left: 55.0128%;
  top: 8.5782%;
  width: 48.7179%;
  aspect-ratio: 1 / 1;
  --fx: 51.2821cqw;
  --fy: -23.6967cqh;
}

/* ==========================================================
   DESKTOP layout (>= 768px) — from Figma "Desktop" frame (1440x1024)
   ========================================================== */

@media (min-width: 768px) {
  .stage {
    --ar-w: 1440;
    --ar-h: 1024;
  }

  .item--wrap {
    animation-name: wrap-fly-in-desktop;
  }

  .item--menu {
    animation-name: menu-fade, menu-bounce-y-desktop, menu-bounce-scale;
    animation-fill-mode: forwards;
  }

  .item--pizza {
    left: 27.0833%;
    top: 6.0547%;
    width: 48.6111%;
    aspect-ratio: 700 / 593;
  }

  .item--burger {
    left: 9.4306%;
    top: 14.2287%;
    width: 29.8611%;
    aspect-ratio: 1 / 1;
    --fx: -34.7222cqw;
    --fy: -48.8281cqh;
  }

  .item--crepe {
    left: 21.2153%;
    top: 55.2891%;
    width: 25%;
    aspect-ratio: 360 / 349;
    --fx: -34.7222cqw;
    --fy: 48.8281cqh;
  }

  .item--berlim {
    left: 44.0035%;
    top: 63.7891%;
    width: 20.8333%;
    aspect-ratio: 300 / 323;
    --fx: 0cqw;
    --fy: 58.5938cqh;
  }

  .item--hotdog {
    left: 61.5903%;
    top: 52.3828%;
    width: 27.7778%;
    aspect-ratio: 400 / 324;
    --fx: 34.7222cqw;
    --fy: 48.8281cqh;
  }

  .item--menu {
    left: 10.5035%;
    top: 50.9375%;
    width: 13.8889%;
    aspect-ratio: 200 / 215;
  }

  .item--wrap {
    left: 67.1424%;
    top: 20.3516%;
    width: 22.9167%;
    aspect-ratio: 1 / 1;
    --fx: 34.7222cqw;
    --fy: -48.8281cqh;
  }
}