/* ============================================
   FreshBox decorative ingredients (non-food)
   Assets from freshbox.framer.website extract:
   • deco-tomatoes-chilis.png — floating tomatoes, chilis, leaves
   • deco-chilis.png — red chili scatter with leaves
   Used as atmosphere only — never as dish photography.
   ============================================ */

:root {
  --deco-float-dur: 14s;
  --deco-float-ease: ease-in-out;
}

/* Shared deco layer */
.fbx-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  will-change: transform;
}

.fbx-deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* Gentle drift — FreshBox floating produce energy */
@keyframes fbxDecoDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(2%, -3%, 0) rotate(2deg); }
}

@keyframes fbxDecoDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg) scale(1); }
  50% { transform: translate3d(-2.5%, 2%, 0) rotate(-1deg) scale(1.03); }
}

@keyframes fbxDecoDriftC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(1.5%, -2%, 0) rotate(4deg); }
  66% { transform: translate3d(-1%, 1.5%, 0) rotate(-3deg); }
}

/* ---------- Hero stage deco (sides of plate; under food, with type) ---------- */
.fbx-hero-stage .fbx-deco {
  z-index: 2; /* plate 0 · deco 2 · text 3 · food 6 */
  opacity: 0.88;
  filter: saturate(1.12) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}

.fbx-deco--hero-left {
  left: -2%;
  top: 16%;
  width: min(300px, 28vw);
  height: min(300px, 28vw);
  animation: fbxDecoDriftA var(--deco-float-dur) var(--deco-float-ease) infinite;
}

.fbx-deco--hero-right {
  right: -3%;
  top: 12%;
  width: min(340px, 32vw);
  height: min(340px, 32vw);
  opacity: 0.82;
  animation: fbxDecoDriftB calc(var(--deco-float-dur) + 2s) var(--deco-float-ease) infinite;
  animation-delay: -3s;
}

/* Near wave — still under food carousel */
.fbx-deco--hero-mid {
  left: 3%;
  top: 58%;
  width: min(180px, 18vw);
  height: min(180px, 18vw);
  opacity: 0.5;
  z-index: 2;
  animation: fbxDecoDriftC 16s var(--deco-float-ease) infinite;
  animation-delay: -6s;
}

.fbx-plate {
  z-index: 0;
}

/* ---------- Categories / marquee strip ---------- */
/* Marquee stays open vertically so hero glow/plates can overlay it */
.fbx-categories,
.fbx-marquee,
.marquee-section {
  overflow-x: clip;
  overflow-y: visible;
}

/* No colored deco blobs on the known-for handoff zone */
.fbx-marquee .fbx-deco--cat-left,
.marquee-section .fbx-deco--cat-left,
.fbx-marquee .fbx-deco--cat-right,
.marquee-section .fbx-deco--cat-right {
  display: none !important;
}

.fbx-categories .fbx-deco--cat-left {
  left: -8%;
  top: -10%;
  width: min(280px, 30vw);
  height: min(280px, 30vw);
  opacity: 0.18;
  z-index: 0;
  animation: fbxDecoDriftB 18s var(--deco-float-ease) infinite;
}

.fbx-categories .fbx-deco--cat-right {
  right: -6%;
  bottom: -12%;
  width: min(300px, 32vw);
  height: min(300px, 32vw);
  opacity: 0.16;
  z-index: 0;
  animation: fbxDecoDriftA 20s var(--deco-float-ease) infinite;
  animation-delay: -4s;
}

.fbx-categories .container,
.fbx-marquee .container,
.marquee-section .container {
  position: relative;
  z-index: 2;
}

/* ---------- Burgers section ---------- */
.burgers {
  overflow: hidden;
}

.burgers .fbx-deco--burgers {
  right: -4%;
  top: 8%;
  width: min(320px, 34vw);
  height: min(320px, 34vw);
  opacity: 0.28;
  z-index: 0;
  animation: fbxDecoDriftA 17s var(--deco-float-ease) infinite;
}

.burgers .fbx-deco--burgers-soft {
  left: -10%;
  bottom: 5%;
  width: min(260px, 28vw);
  height: min(260px, 28vw);
  opacity: 0.16;
  z-index: 0;
  animation: fbxDecoDriftC 19s var(--deco-float-ease) infinite;
  animation-delay: -5s;
}

.burgers .container {
  position: relative;
  z-index: 2;
}

/* ---------- Wings / heat band ---------- */
.wings-beer {
  overflow: hidden;
}

.wings-beer .fbx-deco--wings-a {
  left: -5%;
  top: 6%;
  width: min(360px, 38vw);
  height: min(360px, 38vw);
  opacity: 0.42;
  z-index: 1;
  mix-blend-mode: screen;
  animation: fbxDecoDriftB 15s var(--deco-float-ease) infinite;
}

.wings-beer .fbx-deco--wings-b {
  right: -8%;
  bottom: 8%;
  width: min(400px, 42vw);
  height: min(400px, 42vw);
  opacity: 0.38;
  z-index: 1;
  mix-blend-mode: screen;
  animation: fbxDecoDriftA 18s var(--deco-float-ease) infinite;
  animation-delay: -7s;
}

.wings-beer .container {
  position: relative;
  z-index: 3;
}

/* ---------- Visit ---------- */
.visit {
  overflow: hidden;
}

.visit .fbx-deco--visit {
  right: 2%;
  top: 12%;
  width: min(240px, 26vw);
  height: min(240px, 26vw);
  opacity: 0.18;
  z-index: 0;
  animation: fbxDecoDriftC 16s var(--deco-float-ease) infinite;
}

.visit .container {
  position: relative;
  z-index: 2;
}

/* ---------- Reserve band ---------- */
.reserve {
  overflow: hidden;
}

.reserve .fbx-deco--reserve {
  left: -4%;
  bottom: -8%;
  width: min(300px, 34vw);
  height: min(300px, 34vw);
  opacity: 0.22;
  z-index: 0;
  mix-blend-mode: multiply;
  animation: fbxDecoDriftB 20s var(--deco-float-ease) infinite;
}

.reserve .fbx-deco--reserve-r {
  right: -6%;
  top: -10%;
  width: min(280px, 30vw);
  height: min(280px, 30vw);
  opacity: 0.2;
  z-index: 0;
  mix-blend-mode: multiply;
  animation: fbxDecoDriftA 17s var(--deco-float-ease) infinite;
  animation-delay: -3s;
}

.reserve .container {
  position: relative;
  z-index: 2;
}

/* ---------- Small corner badges (optional chips) ---------- */
.fbx-deco-chip {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
  animation: fbxDecoDriftC 12s var(--deco-float-ease) infinite;
}

.fbx-deco-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Responsive: dial back on small screens ---------- */
@media (max-width: 900px) {
  .fbx-deco--hero-mid,
  .burgers .fbx-deco--burgers-soft,
  .visit .fbx-deco--visit,
  .reserve .fbx-deco--reserve-r {
    display: none;
  }

  .fbx-deco--hero-left,
  .fbx-deco--hero-right {
    width: min(220px, 40vw);
    height: min(220px, 40vw);
    opacity: 0.35;
  }

  .wings-beer .fbx-deco--wings-a,
  .wings-beer .fbx-deco--wings-b {
    opacity: 0.28;
    width: min(260px, 55vw);
    height: min(260px, 55vw);
  }
}

@media (max-width: 600px) {
  .fbx-deco--hero-left {
    left: -12%;
    top: 22%;
    opacity: 0.28;
  }

  .fbx-deco--hero-right {
    right: -14%;
    top: 8%;
    opacity: 0.26;
  }

  .fbx-categories .fbx-deco--cat-left,
  .fbx-categories .fbx-deco--cat-right,
  .burgers .fbx-deco--burgers {
    opacity: 0.12;
  }

  .wings-beer .fbx-deco--wings-b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fbx-deco,
  .fbx-deco-chip {
    animation: none !important;
  }
}