/* ═════════════════════════════════════════════
   RAPIDBURGER — SHARED BRAND SHELL
   Palette · fonts · loader · nav · cursor trail ·
   fullscreen menu · footer · scroll reveal.
   Each page adds its OWN craft on top of this.
   ═════════════════════════════════════════════ */

: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; }
html { scroll-behavior: auto; }
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; }
.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 (compact — subpages skip the long build) ─────────────── */
.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(40vw, 200px);
  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.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-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: clamp(.7rem, 1.6vw, 1.3rem); left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
  padding: .6rem clamp(1.4rem, 4.5vw, 3.4rem);
  transition: transform .5s ease, background .4s ease, padding .4s ease, top .4s ease, box-shadow .4s ease;
  transform: translateY(-130%);
}
body.loaded .nav { transform: translateY(0); }
.nav.scrolled {
  top: 0;
  background: rgba(246,228,205,.92); backdrop-filter: blur(10px);
  min-height: 0;
  padding-top: .55rem; padding-bottom: .55rem;
  box-shadow: 0 6px 24px rgba(56,41,28,.12);
}
.nav.on-red:not(.scrolled) .logo { color: var(--white); -webkit-text-stroke: 4px var(--red-deep); }
.nav.on-red:not(.scrolled) .pill-line { border-color: rgba(255,255,255,.5); color: var(--white); }
.nav.on-red:not(.scrolled) .burger-icon i { background: var(--white); }
.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; }
.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); }
.burger-icon { display: inline-flex; flex-direction: column; gap: 3px; }
.burger-icon i { width: 18px; height: 2.6px; background: var(--ink); border-radius: 2px; transition: background .3s; }
.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; }
.menu-links a.current { color: var(--mustard); }
.menu-links a.current::after {
  content: ""; display: block; width: 42%; height: 5px; margin: -.2rem auto 0;
  background: var(--mustard); border-radius: 3px;
}

/* ─────────────── SHARED PAGE HEADER (subpage hero band) ─────────────── */
.crumbs {
  font-size: 1.05rem; letter-spacing: .28em; text-transform: uppercase;
  opacity: .7;
}
.crumbs a:hover { color: var(--red); }

/* ─────────────── FOOTER ─────────────── */
.footer {
  background: var(--red); color: var(--cream); text-align: center;
  padding: 4rem 1.5rem 1.6rem; overflow: hidden; position: relative; z-index: 2;
}
.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)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .trail, .trail-thread { display: none; }
  .pop { opacity: 1 !important; transform: none !important; }
}