/* ═════════════════════════════════════════════
   RAPIDBURGER — retro cartoon burger site
   ═════════════════════════════════════════════ */

:root {
  --cream: #f6e4cd;
  --cream-2: #f0d7b8;
  --beige: #fff3df;
  --red: #f91814;
  --red-deep: #c41210;
  --maroon: #4c0016;
  --mustard: #ffd750;
  --yellow: #ffaf1b;
  --bun: #ff9d3f;
  --ink: #38291c;
  --white: #ffffff;
  --modak: "Modak", cursive;
  --mouse: "Mouse Memoirs", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--mouse);
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: .03em;
  overflow-x: hidden;
}
body.loading { overflow: hidden; }
img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--white); }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* ─────────────── CURSOR TRAIL ─────────────── */
.trail-thread {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 499;
  opacity: 0;
  transition: opacity .25s ease;
}
.trail-thread path {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trail-item {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  will-change: transform;
  background: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 6px;
  box-shadow: 0 3px 8px rgba(56, 41, 28, .22);
  transition: opacity .25s ease;
}
.trail-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.trail-item:nth-child(1) { width: 40px; height: 40px; z-index: 504; }
.trail-item:nth-child(2) { width: 32px; height: 32px; z-index: 503; }
.trail-item:nth-child(3) { width: 29px; height: 29px; z-index: 502; }
.trail-item:nth-child(4) { width: 26px; height: 26px; z-index: 501; }
.trail.on .trail-item { opacity: 1; }
.trail-thread.on { opacity: 1; }
.trail.hidden .trail-item { opacity: 0; }
.trail-thread.hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  .trail, .trail-thread { display: none; }
}

/* ─────────────── LOADER ─────────────── */
.loader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--red);
  display: grid;
  place-items: center;
  transition: opacity .55s ease, visibility .55s ease;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-stage {
  width: min(44vw, 240px);
  animation: loaderPop .5s cubic-bezier(.34, 1.56, .64, 1) both, stageBob 2.4s ease-in-out .5s infinite;
}
@keyframes loaderPop {
  0%   { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes stageBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}
.loader-svg { width: 100%; height: auto; overflow: visible; }
/* loader exit — burger zooms toward the viewer as the page reveals */
.loader.done .loader-stage { animation: loaderZoom .55s ease-in forwards; }
@keyframes loaderZoom {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

.loader-msg {
  position: absolute;
  bottom: clamp(3rem, 6vw, 5rem);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--mouse);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  min-height: 1.5em;
  padding: 0 1.5rem;
}
.loader-msg.swap { animation: msgPop .3s ease; }
@keyframes msgPop {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.loader-bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: clamp(8px, 1vw, 14px);
  background: rgba(255, 255, 255, .15);
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mustard);
  transition: width .08s linear;
}

/* ─────────────── NAV ─────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem clamp(1rem, 4vw, 3rem);
  transition: transform .5s ease, background .4s ease, padding .4s ease;
  transform: translateY(-110%);
}
body.loaded .nav { transform: translateY(0); }
.nav.scrolled {
  background: rgba(246, 228, 205, .92);
  backdrop-filter: blur(10px);
  padding-top: .4rem; padding-bottom: .4rem;
  box-shadow: 0 6px 24px rgba(56, 41, 28, .12);
}
.logo {
  font-family: var(--modak);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--red);
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke fill;
  text-shadow: 2px 4px 0 rgba(56, 41, 28, .16);
  rotate: -2deg;
  transition: rotate .3s ease, scale .3s ease;
}
.logo:hover { rotate: 2deg; scale: 1.06; }
.nav-right { display: flex; gap: .8rem; align-items: center; }

/* pills / buttons */
.pill {
  font-family: var(--mouse);
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45em 1.6em;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .6em;
  border: 3px solid transparent;
  transition: scale .25s ease;
}
.pill:hover { animation: jelly .5s ease; }
@keyframes jelly {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.14, .86); }
  50%  { transform: scale(.92, 1.08); }
  70%  { transform: scale(1.05, .95); }
  100% { transform: scale(1, 1); }
}
.pill-red {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 0 var(--red-deep);
}
.pill-red:active { translate: 0 4px; box-shadow: 0 2px 0 var(--red-deep); }
.pill-line {
  background: transparent;
  border-color: rgba(56, 41, 28, .3);
  color: var(--ink);
}
.pill-line:hover { border-color: var(--ink); }
.pill-big { font-size: 1.7rem; padding: .55em 2.2em; }
.burger-icon { display: inline-flex; flex-direction: column; gap: 3px; }
.burger-icon i { width: 18px; height: 2.6px; background: var(--ink); border-radius: 2px; }
.burger-icon i:nth-child(2) { width: 13px; }

/* ─────────────── FULLSCREEN MENU ─────────────── */
.menu-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--red);
  display: grid; place-items: center;
  clip-path: circle(0% at calc(100% - 4rem) 2.5rem);
  visibility: hidden;
  transition: clip-path .7s cubic-bezier(.65, 0, .35, 1), visibility .7s;
}
.menu-overlay.open {
  clip-path: circle(150% at calc(100% - 4rem) 2.5rem);
  visibility: visible;
}
.menu-close {
  position: absolute; top: 1.6rem; right: 2rem;
  font-size: 1.8rem; background: none; border: none;
  color: var(--cream); cursor: pointer;
  font-family: var(--mouse);
  transition: rotate .4s ease;
}
.menu-close:hover { rotate: 90deg; }
.menu-links { display: grid; gap: .2rem; text-align: center; }
.menu-links a {
  font-family: var(--modak);
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--beige);
  opacity: 0; translate: 0 30px;
  transition: opacity .45s ease, translate .45s cubic-bezier(.34, 1.56, .64, 1),
              color .3s, scale .3s;
  transition-delay: calc(var(--i) * 70ms);
}
.menu-overlay.open .menu-links a { opacity: 1; translate: 0 0; }
.menu-links a:hover { color: var(--mustard); scale: 1.08; rotate: -2deg; }

/* ─────────────── HERO ─────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* giant red title — Mouse Memoirs, like the reference */
.hero-title {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -55%;
  width: 100vw;
  text-align: center;
  white-space: nowrap;
  font-family: var(--mouse);
  font-weight: 400;
  font-size: 23.5vw;
  line-height: .8;
  letter-spacing: 0;
  color: var(--red);
  -webkit-text-stroke: 1vw var(--white);
  paint-order: stroke fill;
  user-select: none;
  z-index: 1;
}
.hero-title .lt {
  display: inline-block;
  opacity: 0;
  transform: translateY(55%) scale(.3) rotate(-10deg);
}
body.loaded .hero-title .lt {
  animation: letterPop .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(.15s + var(--i) * 55ms);
}
@keyframes letterPop {
  0%   { opacity: 0; transform: translateY(55%) scale(.3) rotate(-10deg); }
  70%  { opacity: 1; transform: translateY(-4%) scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* burger + googly eyes */
.burger-wrap {
  position: fixed;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 10;
  will-change: transform;
}
.burger-inner {
  position: relative;
  width: clamp(300px, 37vw, 560px);
  translate: 0 0;
  transform: translateY(-120vh) rotate(-24deg);
}
body.loaded .burger-inner {
  animation:
    burgerDrop 1s cubic-bezier(.34, 1.56, .64, 1) .8s forwards,
    burgerFloat 4.5s ease-in-out 2.2s infinite alternate;
}
@keyframes burgerDrop {
  from { transform: translateY(-120vh) rotate(-24deg); }
  60%  { transform: translateY(3vh) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes burgerFloat {
  from { transform: translateY(0) rotate(-1.5deg); }
  to   { transform: translateY(-18px) rotate(1.5deg); }
}
.burger-img {
  width: 100%;
  pointer-events: none;
  filter: drop-shadow(0 34px 34px rgba(56, 41, 28, .32));
}

.eye {
  position: absolute;
  width: 21%; aspect-ratio: 1;
  z-index: 4;
  transform: rotate(var(--look, 18deg));
}
.eye-l { left: 21%; top: 4.5%; }
.eye-r { left: 51%; top: 1.5%; --look: 32deg; }
.eye-ball {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--white) 0 62deg, transparent 62deg 118deg, var(--white) 118deg 360deg);
  filter: drop-shadow(0 4px 6px rgba(56, 41, 28, .25));
  animation: blink 4.6s infinite;
}
.eye-r .eye-ball { animation-delay: .18s; }
@keyframes blink {
  0%, 91%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.06); }
}

/* ─────────────── KETCHUP SPLAT ─────────────── */
.splat {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 120;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.s-mark {
  position: absolute;
  width: clamp(180px, 32vw, 560px);
  height: clamp(180px, 32vw, 560px);
  transform: scale(0);
  transform-origin: center center;
  will-change: transform;
  overflow: visible;
}

.fly {
  position: fixed;
  left: 50%;
  top: 52%;
  width: clamp(85px, 13vw, 200px);
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 14px 24px rgba(56, 41, 28, .4));
  z-index: 130;
}

/* yellow stickers — Modak bubble letters */
.sticker {
  position: absolute;
  z-index: 2;
  font-family: var(--modak);
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  text-align: center;
  color: var(--yellow);
  -webkit-text-stroke: .3vw var(--white);
  paint-order: stroke fill;
  text-shadow: 3px 5px 0 rgba(56, 41, 28, .14);
  rotate: var(--rot);
  opacity: 0; scale: 0;
  user-select: none;
}
body.loaded .sticker {
  animation: stickerPop .55s cubic-bezier(.34, 1.56, .64, 1) forwards,
             wiggle 3.4s ease-in-out 2.4s infinite;
}
body.loaded .sticker-1 { animation-delay: 1.5s, 2.4s; }
body.loaded .sticker-2 { animation-delay: 1.68s, 2.9s; }
@keyframes stickerPop {
  0%   { opacity: 0; scale: 0; }
  70%  { opacity: 1; scale: 1.18; }
  100% { opacity: 1; scale: 1; }
}
@keyframes wiggle {
  0%, 100% { rotate: var(--rot); }
  50%      { rotate: calc(var(--rot) + 4deg); }
}
.sticker-1 { left: 11%; top: 20%; }
.sticker-2 { right: 6%; top: 56%; }

/* hero copy notes */
.hero-note {
  position: absolute;
  bottom: 6.5vh;
  max-width: 320px;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.25;
  z-index: 5;
  opacity: 0; translate: 0 24px;
}
body.loaded .hero-note {
  animation: noteUp .7s ease 2s forwards;
}
@keyframes noteUp { to { opacity: 1; translate: 0 0; } }
.note-l { left: clamp(1rem, 4vw, 3.4rem); }
.note-r { right: clamp(1rem, 4vw, 3.4rem); text-align: right; animation-delay: 2.15s !important; }

/* bottom blobs */
.blobs {
  position: absolute;
  bottom: -70px; left: 50%;
  translate: -50% 0;
  display: flex;
  z-index: 4;
}
.blobs i {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--yellow);
  border: 6px solid #f79a0f;
  margin: 0 -14px;
}
.blobs i:nth-child(2) { translate: 0 26px; background: #ffa000; }
.blobs i:nth-child(3) { translate: 0 -12px; }
.blobs i:nth-child(4) { translate: 0 22px; background: #ffa000; }
.blobs i:nth-child(5) { translate: 0 4px; }

/* ─────────────── MARQUEE ─────────────── */
.marquee {
  position: relative;
  z-index: 8;
  background: var(--red);
  padding: .8rem 0;
  overflow: hidden;
  white-space: nowrap;
  rotate: -1.6deg;
  width: 104vw;
  margin-left: -2vw;
  border-top: 5px solid var(--white);
  border-bottom: 5px solid var(--white);
  box-shadow: 0 10px 30px rgba(56, 41, 28, .18);
}
.marquee-track {
  display: inline-block;
  animation: marquee 18s linear infinite;
  font-family: var(--mouse);
  font-size: 2rem;
  color: var(--cream);
  letter-spacing: .08em;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ─────────────── SECTIONS ─────────────── */
.section {
  padding: clamp(5rem, 10vw, 8.5rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.kicker {
  font-size: 1.1rem;
  letter-spacing: .34em;
  margin-bottom: 1rem;
  color: var(--red);
}
/* big section headings — Mouse Memoirs with white stroke, like reference */
.big-head {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3.4rem, 10vw, 8rem);
  text-transform: uppercase;
  line-height: .85;
  color: var(--red);
  -webkit-text-stroke: .55vw var(--white);
  paint-order: stroke fill;
  margin-bottom: 1.2rem;
}
.big-head span { color: var(--mustard); }
.big-head.script { text-transform: none; }
.big-head.script em { font-style: normal; color: var(--mustard); }
.lead { max-width: 46ch; margin: 0 auto; font-size: 1.45rem; }

/* ─────────────── TOP CLASSIC ─────────────── */
.classic {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.classic-brand {
  position: relative;
  display: inline-block;
  margin-bottom: .8rem;
}
.classic-crav {
  font-family: var(--modak);
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 1.05;
  color: var(--yellow);
  -webkit-text-stroke: .3vw var(--white);
  paint-order: stroke fill;
  text-shadow: 4px 7px 0 rgba(56, 41, 28, .14);
  display: inline-block;
}
.classic-tag {
  position: absolute;
  right: -8%;
  bottom: -4%;
  font-family: var(--modak);
  font-size: clamp(1.3rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--red);
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke fill;
  rotate: var(--rot, -6deg);
  white-space: nowrap;
  filter: drop-shadow(2px 4px 0 rgba(56, 41, 28, .18));
}
.classic-head {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3.8rem, 12vw, 10rem);
  text-transform: uppercase;
  line-height: .82;
  color: var(--red);
  -webkit-text-stroke: .6vw var(--white);
  paint-order: stroke fill;
  margin-bottom: 1rem;
}

/* ─────────────── GALLERY / ORDER ─────────────── */
.gallery {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem) 0;
  overflow: hidden;
}
.mascot {
  position: absolute;
  left: clamp(.5rem, 4vw, 4rem);
  top: clamp(1rem, 3vw, 3rem);
  width: clamp(110px, 15vw, 210px);
  rotate: -8deg;
  filter: drop-shadow(4px 6px 0 rgba(56, 41, 28, .15));
}
.blob-btn {
  position: relative;
  display: inline-block;
  width: clamp(180px, 18vw, 260px);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  transition: scale .3s cubic-bezier(.34, 1.56, .64, 1);
}
.blob-btn:hover { scale: 1.07; }
.blob-btn:active { scale: .96; }
.blob-btn svg { width: 100%; height: auto; display: block; }
.blob-btn span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--modak);
  font-size: clamp(1.2rem, 1.9vw, 1.8rem);
  color: var(--white);
  letter-spacing: .04em;
}
.blob-btn-small { width: clamp(170px, 15vw, 230px); margin: 0; }
.snaps {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(.6rem, 1.5vw, 1.4rem);
  max-width: 1200px;
  margin: 0 auto;
}
.snap {
  width: clamp(180px, 26vw, 380px);
  border-radius: 22px;
  overflow: hidden;
  rotate: var(--r, 0deg);
  box-shadow: 0 18px 40px rgba(56, 41, 28, .22);
  transition: rotate .35s ease, translate .35s ease, scale .35s ease;
}
.snap:hover { rotate: 0deg; translate: 0 -10px; scale: 1.03; }
.snap img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/3.4;
  object-fit: cover;
}
.classic { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* feature cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1150px;
  margin: 3.5rem auto 0;
}
.card {
  background: var(--white);
  border-radius: 26px;
  border: 4px solid var(--ink);
  box-shadow: 8px 10px 0 rgba(56, 41, 28, .2);
  padding: 1.6rem 1.4rem 2rem;
  rotate: var(--r, 0deg);
  transition: rotate .35s ease, translate .35s ease, box-shadow .35s ease;
}
.card:hover {
  rotate: 0deg;
  translate: 0 -10px;
  box-shadow: 10px 16px 0 rgba(249, 24, 20, .35);
}
.card-img { padding: .6rem 1.4rem; }
.card-img img { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.card:hover .card-img img { transform: scale(1.1) rotate(-4deg); }
.card-img .flip { transform: scaleX(-1); }
.card:hover .card-img .flip { transform: scaleX(-1) scale(1.1) rotate(4deg); }
.card-img .hue { filter: hue-rotate(14deg) saturate(1.15); }
.card h3 {
  font-family: var(--mouse);
  font-size: 2.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--red);
  -webkit-text-stroke: 3px var(--white);
  paint-order: stroke fill;
  margin: .8rem 0 .3rem;
}
.card p { font-size: 1.3rem; }

/* ─────────────── EXPERIENCE — red wave section ─────────────── */
.exp { position: relative; }
.wave { display: block; width: 100%; height: clamp(100px, 14vw, 200px); }
.exp-red {
  background: var(--red);
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 5vw, 4rem) clamp(5rem, 9vw, 8rem);
}
.exp-sticker {
  display: inline-block;
  font-family: var(--modak);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.15;
  color: var(--red);
  -webkit-text-stroke: 4px #ffd9d3;
  paint-order: stroke fill;
  background: transparent;
  rotate: var(--r, -7deg);
  text-shadow: 0 0 0 #ffd9d3;
  filter: drop-shadow(2px 4px 0 rgba(76, 0, 22, .25));
  margin-bottom: 1.4rem;
}
.exp-head {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3.6rem, 11vw, 9rem);
  text-transform: uppercase;
  line-height: .82;
  color: var(--cream);
  margin-bottom: 1rem;
}
.exp-lead {
  color: rgba(246, 228, 205, .92);
  font-size: 1.45rem;
  max-width: 46ch;
  margin: 0 auto;
}
.exp .stat { border-color: var(--maroon); }
.exp .chip { border-color: var(--white); }
.exp-red { position: relative; overflow: hidden; }
.exp-head { color: var(--cream); position: relative; z-index: 3; margin-bottom: clamp(1rem, 3vw, 2.4rem); }

/* side mascots flanking the headline */
.side-mascot {
  position: absolute;
  width: clamp(90px, 11vw, 165px);
  z-index: 4;
  filter: drop-shadow(3px 5px 0 rgba(76, 0, 22, .3));
}
.side-mascot { width: clamp(110px, 15vw, 210px); }
.side-mascot-l { left: clamp(.5rem, 3vw, 4rem); top: clamp(6rem, 15vw, 12rem); rotate: -10deg; }
.side-mascot-r { right: clamp(.5rem, 3vw, 4rem); top: clamp(8rem, 18vw, 14rem); rotate: 8deg; }

/* the big googly burger */
.big-burger {
  position: relative;
  width: clamp(340px, 72vw, 900px);
  margin: clamp(1rem, 3vw, 2.5rem) auto 0;
  z-index: 3;
}
.big-burger img { width: 100%; filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .3)); }
.big-burger .brow {
  position: absolute;
  width: clamp(52px, 8vw, 96px);
  top: -4%;
  z-index: 4;
}
.big-burger .brow-l { left: 28%; animation: browWig 3s ease-in-out infinite; }
.big-burger .brow-r { right: 28%; animation: browWig 3s ease-in-out infinite .4s; }
@keyframes browWig { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.big-eye {
  position: absolute;
  top: 20%;
  width: clamp(52px, 8vw, 96px);
  height: clamp(66px, 10vw, 120px);
  background: var(--white);
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}
.big-eye i {
  position: absolute;
  left: 50%; top: 58%;
  width: 42%; height: 42%;
  background: #111;
  border-radius: 50%;
  translate: -50% -50%;
  transition: translate .12s ease-out;
}
.big-eye-l { left: 32%; }
.big-eye-r { right: 32%; }
.glove {
  position: absolute;
  top: 34%;
  width: clamp(120px, 19vw, 250px);
  z-index: 6;
}
.glove-l { left: -13%; rotate: -8deg; animation: gloveL 3.4s ease-in-out infinite; }
.glove-r { right: -13%; rotate: 8deg; transform: scaleX(1); animation: gloveR 3.4s ease-in-out infinite .3s; }
@keyframes gloveL { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 4px -6px; rotate: -12deg; } }
@keyframes gloveR { 0%, 100% { translate: 0 0; rotate: 8deg; } 50% { translate: -4px -6px; rotate: 12deg; } }
.sticker-bold {
  position: absolute;
  right: -4%; bottom: 8%;
  z-index: 6;
}
.exp-note {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  font-family: var(--mouse);
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: .1em;
  color: var(--cream);
  text-transform: uppercase;
  z-index: 7;
}
.exp-note-l { left: clamp(1rem, 3vw, 3rem); text-align: left; }
.exp-note-r { right: clamp(1rem, 3vw, 3rem); text-align: right; }

/* ─────────────── FULL-BLEED BITE ─────────────── */
.bite {
  position: relative;
  line-height: 0;
  background: var(--cream);
}
.bite .wave-bite {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: clamp(60px, 9vw, 130px);
  z-index: 2;
}
.bite > img {
  width: 100%;
  height: clamp(360px, 60vw, 760px);
  object-fit: cover;
  display: block;
}

/* ─────────────── PURE QUALITY / LAYERS ─────────────── */
.layers {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  overflow: hidden;
}
.layers-tag {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-family: var(--modak);
  font-size: clamp(1.4rem, 3vw, 2.8rem);
  color: var(--red);
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke fill;
  rotate: var(--rot, -5deg);
  filter: drop-shadow(2px 4px 0 rgba(56, 41, 28, .18));
  margin-bottom: .6rem;
}
.layers-head {
  position: relative;
  z-index: 2;
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 9rem);
  text-transform: uppercase;
  line-height: .84;
  color: var(--red);
  -webkit-text-stroke: .55vw var(--white);
  paint-order: stroke fill;
}
.float-ing {
  position: absolute;
  width: clamp(90px, 13vw, 210px);
  z-index: 4;
  filter: drop-shadow(4px 8px 10px rgba(56, 41, 28, .25));
  will-change: transform;
}
.ing-lettuce { left: 10%; top: 14%; rotate: -8deg; }
.ing-tomato { right: 8%; top: 30%; rotate: 10deg; }
.ing-cheese { left: 12%; bottom: 8%; rotate: -12deg; }
.ing-patty { right: 12%; bottom: 4%; rotate: 6deg; }

/* feels good */
.feels { background: var(--cream-2); }
.stats {
  display: flex; justify-content: center; gap: 2rem;
  flex-wrap: wrap; margin-top: 3.2rem;
}
.stat {
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 7px 8px 0 rgba(56, 41, 28, .2);
  padding: 1.5rem 2.4rem;
  rotate: var(--r, 0);
  min-width: 200px;
  transition: rotate .3s, translate .3s;
}
.stat:hover { rotate: 0deg; translate: 0 -6px; }
.stat strong {
  display: block;
  font-family: var(--mouse);
  font-size: 3.6rem;
  color: var(--red);
  line-height: 1;
}
.stat > span { font-size: 1.1rem; letter-spacing: .18em; }
.chips {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.2rem; margin-top: 3rem;
}
.chip {
  font-family: var(--mouse);
  font-size: 1.45rem;
  background: var(--mustard);
  border: 3.5px solid var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: .45em 1.3em;
  rotate: var(--r, 0);
  box-shadow: 4px 6px 0 rgba(56, 41, 28, .18);
  transition: rotate .3s, scale .3s;
  cursor: default;
}
.chip:hover { rotate: 0deg; scale: 1.12; }

/* locations */
.loc-list { max-width: 880px; margin: 3rem auto 0; }
.loc {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem .8rem;
  border-bottom: 4px solid var(--ink);
  transition: background .3s, padding .3s;
}
.loc:first-child { border-top: 4px solid var(--ink); }
.loc em { font-style: normal; font-size: 1.1rem; }
.loc strong {
  font-family: var(--mouse);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  transition: color .3s;
  text-align: left;
}
.loc span {
  font-size: 2.2rem; color: var(--red);
  transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), rotate .35s;
}
.loc:hover { background: var(--white); padding-left: 1.6rem; }
.loc:hover strong { color: var(--red); }
.loc:hover span { translate: 10px 0; rotate: -8deg; }

/* ─────────────── CTA — Modak giant, like reference ─────────────── */
.cta {
  text-align: center;
  padding: clamp(5rem, 12vw, 9rem) 1.5rem;
  background:
    radial-gradient(45% 60% at 50% 115%, rgba(255, 215, 80, .55), transparent 70%),
    var(--cream);
}
.cta-head {
  font-family: var(--modak);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.05;
  color: var(--red);
  -webkit-text-stroke: .6vw var(--white);
  paint-order: stroke fill;
  text-shadow: 4px 8px 0 rgba(56, 41, 28, .12);
}
.cta-head span { color: var(--red); }
.cta p { margin: 1rem 0 2.2rem; font-size: 1.55rem; }

/* ─────────────── FOOTER ─────────────── */
.footer {
  background: var(--red);
  color: var(--cream);
  text-align: center;
  padding: 4rem 1.5rem 1.6rem;
  overflow: hidden;
}
.footer-logo {
  font-family: var(--modak);
  font-size: clamp(3rem, 13.5vw, 11rem);
  line-height: 1.05;
  color: var(--beige);
}
.footer-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 2rem; margin: 1.2rem 0 3rem;
}
.footer-links a {
  font-family: var(--mouse);
  font-size: 1.4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .3s, rotate .3s;
  display: inline-block;
}
.footer-links a:hover { color: var(--mustard); rotate: -3deg; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  border-top: 3px solid rgba(246, 228, 205, .35);
  padding-top: 1.4rem;
  font-size: 1.1rem;
}

/* ─────────────── SCROLL REVEAL ─────────────── */
.pop {
  opacity: 0;
  transform: scale(.65) translateY(36px) rotate(var(--r, -3deg));
  transition: opacity .65s ease, transform .65s cubic-bezier(.34, 1.56, .64, 1);
}
.pop.in {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(var(--r, 0deg));
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 860px) {
  .hero { min-height: 96vh; }
  .hero-title {
    white-space: normal;
    font-size: 26vw;
    line-height: .85;
    top: 40%;
  }
  .burger-inner { width: min(72vw, 390px); }
  .sticker-1 { left: 4%; top: 14%; }
  .sticker-2 { right: 3%; top: 62%; }
  .hero-note {
    position: absolute;
    max-width: 44vw;
    font-size: 1.05rem;
    bottom: 4vh;
  }
  .cards { grid-template-columns: 1fr; max-width: 420px; }
  .stats { gap: 1.2rem; }
  .stat { padding: 1.1rem 1.8rem; min-width: 150px; }
  .pill { font-size: 1.05rem; }
  .big-head { -webkit-text-stroke: .8vw var(--white); }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-title .lt, .sticker, .hero-note, .burger-inner, .l-layer { opacity: 1 !important; transform: none !important; }
  .trail { display: none; }
}