/* ===== Desert Rover Kitchen — Retro 80s Comic Styles ===== */

:root {
  --ink: #2b1d12;
  --sand: #e8d5b0;
  --cream: #f5e9d3;
  --rust: #b3541e;
  --burnt: #e0742a;
  --teal: #40c9c9;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Comic outlines */
.comic-border { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.comic-border-sm { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.comic-btn {
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer; user-select: none;
}
.comic-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.comic-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.comic-btn:disabled { opacity: .55; pointer-events: none; }

/* Halftone comic texture */
.halftone {
  background-image: radial-gradient(rgba(43,29,18,.14) 1.2px, transparent 1.2px);
  background-size: 9px 9px;
}

/* ===== SKY / SCENE (day-night) ===== */
.scene-sky {
  transition: background 1.2s ease;
  background: linear-gradient(180deg, #3db8d4 0%, #6fd0e0 45%, #a7e3e8 100%);
}
.night .scene-sky {
  background: linear-gradient(180deg, #1a1238 0%, #2a1e4a 50%, #4a3670 100%);
}
.scene-ground {
  background: linear-gradient(180deg, #d9b98a 0%, #cfa571 40%, #c1935f 100%);
  transition: background 1.2s ease;
}
.night .scene-ground {
  background: linear-gradient(180deg, #6b5a45 0%, #57452f 40%, #453722 100%);
}

/* Sun / Moon */
.sun {
  transition: all 1.2s ease;
  background: radial-gradient(circle at 35% 35%, #ffd9d0, #f5a08c 60%, #ec8a72);
  box-shadow: 0 0 40px rgba(245,160,140,.7);
}
.night .sun {
  background: radial-gradient(circle at 35% 35%, #fffbe8, #e8e0c0 60%, #d0c8a8);
  box-shadow: 0 0 30px rgba(255,250,220,.5);
  transform: translateY(-16px) scale(.72);
}

/* Stars */
.star { opacity: 0; transition: opacity 1.2s ease; }
.night .star { opacity: 1; animation: twinkle 2.4s ease-in-out infinite; }
.star:nth-child(2n) { animation-delay: .7s; }
.star:nth-child(3n) { animation-delay: 1.3s; }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Clouds */
.cloud { animation: drift 38s linear infinite; transition: opacity 1.2s ease; }
.cloud.c2 { animation-duration: 52s; animation-delay: -18s; }
.cloud.c3 { animation-duration: 45s; animation-delay: -30s; }
.night .cloud { opacity: .18; }
@keyframes drift {
  from { transform: translateX(-18vw); }
  to { transform: translateX(105vw); }
}

/* RV idle bounce */
.rv-idle { animation: rvIdle 3.4s ease-in-out infinite; transform-origin: bottom center; }
@keyframes rvIdle {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-3px) rotate(.15deg); }
  60% { transform: translateY(-1px) rotate(-.12deg); }
}

/* Steam from grill */
.steam { opacity: 0; animation: steamUp 2.6s ease-out infinite; }
.steam.s2 { animation-delay: .9s; }
.steam.s3 { animation-delay: 1.7s; }
@keyframes steamUp {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.5) translateX(6px); }
}

/* String lights */
.bulb { animation: blink 1.6s ease-in-out infinite; }
.bulb:nth-child(2n) { animation-delay: .4s; }
.bulb:nth-child(3n) { animation-delay: .8s; }
.bulb:nth-child(4n) { animation-delay: 1.2s; }
@keyframes blink {
  0%,100% { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
  50% { opacity: .35; filter: none; }
}
.night .bulb { filter: drop-shadow(0 0 7px currentColor); }

/* Neon menu board text */
.neon {
  color: #fff2ae;
  text-shadow: 0 0 4px #ffd166, 0 0 12px #f4a259, 0 0 22px #e0742a;
  animation: neonFlicker 4s infinite;
}
@keyframes neonFlicker {
  0%,94%,96%,100% { opacity: 1; }
  95% { opacity: .55; }
}

/* Chalkboard */
.chalkboard {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.05), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.04), transparent 50%),
    #2f3b33;
  border: 8px solid #7a5230;
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.5), 5px 5px 0 var(--ink);
}
.chalk-text { color: #f0ead6; text-shadow: 0 0 2px rgba(240,234,214,.4); }

/* Wooden signs */
.wood-sign {
  background: linear-gradient(180deg, #a9743f 0%, #8f5e2f 55%, #7a4d24 100%);
  background-blend-mode: multiply;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
  color: #f8ecd4;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.wood-sign::before, .wood-sign::after {
  content: ''; position: absolute; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: #4a3520; box-shadow: inset 1px 1px 2px rgba(0,0,0,.7);
}
.wood-sign::before { left: 8px; } .wood-sign::after { right: 8px; }
.sign-arrow { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }

/* Road sign search bar */
.road-sign {
  background: linear-gradient(180deg, #2e7d4f, #256b42);
  border: 3px solid #fff;
  outline: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
}

/* Picnic table wood grid */
.picnic-wood {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, #c99a5b, #b98a4c);
}
.night .picnic-wood {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, #8a6a40, #7a5a34);
}

/* Product cards */
.product-card { transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 7px 9px 0 var(--ink); }

/* Cart drawer (RV service window) */
#cart-drawer {
  transform: translateX(105%);
  transition: transform .38s cubic-bezier(.34,1.3,.6,1);
}
#cart-drawer.open { transform: translateX(0); }
.service-window-frame {
  background: linear-gradient(180deg, #ede0c4, #e0d0ac);
  border-left: 5px solid var(--ink);
}

/* Cart badge pop */
.badge-pop { animation: badgePop .4s cubic-bezier(.34,1.8,.6,1); }
@keyframes badgePop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* Page transitions */
.page-enter { animation: pageIn .4s ease both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal */
.modal-backdrop { animation: fadeIn .25s ease both; }
.modal-card { animation: modalIn .32s cubic-bezier(.34,1.3,.6,1) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Toasts */
.toast { animation: toastIn .35s cubic-bezier(.34,1.4,.6,1) both; }
.toast.leaving { animation: toastOut .3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(60px); } }

/* Receipt printing animation */
.receipt-print {
  clip-path: inset(0 0 100% 0);
  animation: printOut 2.2s ease-out .3s forwards;
}
@keyframes printOut { to { clip-path: inset(0 0 0% 0); } }
.receipt-edge {
  background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%),
              linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%);
  background-size: 14px 22px; background-position: 0 0; height: 11px;
}

/* Spinner */
.spinner { border: 3px solid rgba(43,29,18,.2); border-top-color: var(--rust); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Collapsible category */
.cat-body { overflow: hidden; transition: max-height .45s ease; }

/* Tumbleweed */
.tumbleweed { animation: tumble 26s linear infinite; }
@keyframes tumble {
  0% { transform: translateX(-10vw) rotate(0); }
  100% { transform: translateX(110vw) rotate(1080deg); }
}

/* Day/night toggle */
.dn-toggle { transition: background .6s ease; }
.dn-knob { transition: transform .5s cubic-bezier(.34,1.4,.6,1); }
.night .dn-knob { transform: translateX(30px); }

/* Bottom sheet mobile menu */
@media (max-width: 768px) {
  #cart-drawer { width: 100vw !important; }
  .mobile-bottomsheet {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: var(--rust); border-radius: 6px; border: 2px solid var(--sand); }

/* Leaflet z-index fix under modals */
.leaflet-container { z-index: 1; }

input:focus, select:focus, textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; }
.err-text { color: #b3261e; font-size: .8rem; margin-top: 2px; min-height: 1rem; }

/* Food emoji art card */
.food-art {
  background:
    radial-gradient(rgba(43,29,18,.08) 1.4px, transparent 1.4px),
    linear-gradient(135deg, #ffe8c8, #ffd9a8);
  background-size: 10px 10px, cover;
}
.night .food-art { background: radial-gradient(rgba(43,29,18,.15) 1.4px, transparent 1.4px), linear-gradient(135deg, #d9c0a0, #c9a878); background-size: 10px 10px, cover; }
.food-emoji { filter: drop-shadow(3px 4px 0 rgba(43,29,18,.85)); }

/* ================= LIVING RV: order tickets, chef pop, flying food ================= */

/* order ticket hanging in the service window */
.ticket {
  animation: ticketSwing 2.6s ease-in-out infinite;
  transform-origin: center 120px;
  transform-box: view-box;
}
@keyframes ticketSwing {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(2.2deg); }
  70% { transform: rotate(-2deg); }
}

/* sleepy Zzz when the kitchen is empty */
.zzz { animation: zzzFloat 3s ease-in-out infinite; }
@keyframes zzzFloat {
  0%, 100% { opacity: .5; transform: translateY(0); }
  50% { opacity: .95; transform: translateY(-2px); }
}

/* chef pops out of the window */
.chef-pop {
  animation: chefPop 2.8s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: 259px 112px;
  transform-box: view-box;
}
@keyframes chefPop {
  0% { transform: translateY(40px) scale(.4); opacity: 0; }
  14% { transform: translateY(-6px) scale(1.05); opacity: 1; }
  22% { transform: translateY(0) scale(1); }
  80% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(42px) scale(.5); opacity: 0; }
}
.order-bubble { animation: bubbleIn 2.8s ease both; transform-origin: 305px 66px; transform-box: view-box; }
@keyframes bubbleIn {
  0%, 12% { transform: scale(0); opacity: 0; }
  20% { transform: scale(1.12); opacity: 1; }
  26% { transform: scale(1); }
  75% { transform: scale(1); opacity: 1; }
  90%, 100% { transform: scale(0); opacity: 0; }
}

/* the RV wiggles happily when an order lands */
.rv-shake { animation: rvHappy .7s ease; transform-origin: bottom center; }
@keyframes rvHappy {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-1.1deg) translateY(-4px); }
  45% { transform: rotate(1.2deg); }
  70% { transform: rotate(-.6deg); }
}

/* food emoji flies from screen into the service window */
.fly-food {
  position: absolute;
  left: 38%;
  top: 30%;
  font-size: 2.4rem;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(43,29,18,.6));
  animation: flyToWindow 1s cubic-bezier(.5,-.3,.7,1) both;
  z-index: 5;
}
@keyframes flyToWindow {
  0% { transform: translate(140px, 180px) scale(1.6) rotate(-20deg); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translate(30px, 30px) scale(1.1) rotate(15deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(.25) rotate(40deg); opacity: 0; }
}

/* grill fire flicker */
.grill-fire { animation: fireFlick .5s ease-in-out infinite alternate; transform-origin: 304px 162px; transform-box: view-box; }
@keyframes fireFlick {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.25) scaleX(.94); }
}

/* stronger steam when cooking */
.steam-boost .steam { animation-duration: 1.6s; }

/* ================= MORE LIFE: honk, dancing cactus, driving RV ================= */

/* BEEP BEEP bubble */
.beep-bubble { animation: beepIn 1.3s ease both; transform-origin: 600px 86px; transform-box: view-box; }
@keyframes beepIn {
  0% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.15); opacity: 1; }
  20% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.sound-wave { animation: waveOut .5s ease-out infinite; }
@keyframes waveOut {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-8px); }
}

/* dancing cactus 🌵 */
.cactus-dance { animation: cactusBoogie .42s ease-in-out 4; transform-origin: bottom center; }
@keyframes cactusBoogie {
  0%, 100% { transform: rotate(0) scaleY(1); }
  25% { transform: rotate(-7deg) scaleY(.94); }
  50% { transform: rotate(0) scaleY(1.05); }
  75% { transform: rotate(7deg) scaleY(.94); }
}
.note-float { animation: noteUp 1.7s ease-out both; }
@keyframes noteUp {
  0% { opacity: 0; transform: translateY(10px) rotate(-8deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) rotate(10deg); }
}

/* driving RV crossing the screen */
.rv-drive-track { overflow: visible; }
.rv-driving { animation: driveAcross 4.2s cubic-bezier(.45,.02,.6,1) both; }
@keyframes driveAcross {
  0% { transform: translateX(-340px); }
  100% { transform: translateX(calc(100vw + 60px)); }
}
.wheel-spin { animation: wheelSpin .45s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }

/* dust puffs kicked up behind the RV */
.dust {
  width: 22px; height: 22px;
  background: radial-gradient(#d9c8a4, rgba(217,200,164,0));
  left: -14px; bottom: 18px;
  animation: dustPuff .9s ease-out infinite;
}
.dust.d1 { animation-delay: .3s; bottom: 26px; width: 16px; height: 16px; }
.dust.d2 { animation-delay: .6s; bottom: 12px; width: 26px; height: 26px; }
@keyframes dustPuff {
  0% { opacity: .9; transform: translateX(0) scale(.5); }
  100% { opacity: 0; transform: translateX(-60px) scale(1.8); }
}

/* ================= HAWK + WEATHER LIFE ================= */

/* hawk gliding across the sky */
.hawk { left: 0; z-index: 3; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes hawkLTR {
  0% { transform: translateX(-70px) translateY(0); }
  25% { transform: translateX(25vw) translateY(-12px); }
  50% { transform: translateX(50vw) translateY(6px); }
  75% { transform: translateX(75vw) translateY(-10px); }
  100% { transform: translateX(105vw) translateY(0); }
}
@keyframes hawkRTL {
  0% { transform: translateX(105vw) translateY(0); }
  25% { transform: translateX(75vw) translateY(-12px); }
  50% { transform: translateX(50vw) translateY(6px); }
  75% { transform: translateX(25vw) translateY(-10px); }
  100% { transform: translateX(-70px) translateY(0); }
}
/* wing flap */
.hawk-flap .wing-l { animation: flapL .5s ease-in-out infinite alternate; transform-origin: 26px 15px; transform-box: view-box; }
.hawk-flap .wing-r { animation: flapR .5s ease-in-out infinite alternate; transform-origin: 32px 15px; transform-box: view-box; }
@keyframes flapL { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes flapR { from { transform: rotate(0); } to { transform: rotate(-14deg); } }

/* daytime sweat drops sliding down the RV body */
.sweat-drop { animation: sweatSlide 3.4s ease-in infinite; }
@keyframes sweatSlide {
  0% { opacity: 0; transform: translateY(-4px); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateY(26px); }
  100% { opacity: 0; transform: translateY(38px); }
}

/* heat shimmer wiggle */
.heat-shimmer { animation: shimmerWiggle 1.6s ease-in-out infinite; }
@keyframes shimmerWiggle {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-6px); opacity: .25; }
}

/* night campfire heater */
.camp-flame { animation: campFlick .45s ease-in-out infinite alternate; transform-origin: 11px 4px; transform-box: view-box; }
@keyframes campFlick {
  from { transform: scaleY(1) rotate(-2deg); }
  to { transform: scaleY(1.18) rotate(2.5deg); }
}
.camp-glow { animation: glowPulse 2.2s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .1; } 50% { opacity: .24; } }
.window-warm { animation: glowPulse 3s ease-in-out infinite; }

/* fire sparks floating up from the campsite */
.spark { animation: sparkUp 1.6s ease-out infinite; }
.spark.sp2 { animation-delay: .7s; animation-duration: 2s; }
@keyframes sparkUp {
  0% { opacity: 0; transform: translateY(4px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) translateX(5px); }
}

/* ===== ICE CREAM CONVERSION ===== */
/* ❄️ cold freezer mist — drifts DOWN and fades (cold air sinks!) */
@keyframes coldMist {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translateY(26px) scale(1.35); opacity: 0; }
}
.cold-mist {
  animation: coldMist 2.6s ease-in infinite;
  transform-box: fill-box;
  transform-origin: center top;
}
.cold-mist.m2 { animation-delay: .9s; animation-duration: 3s; }
.cold-mist.m3 { animation-delay: 1.7s; animation-duration: 2.3s; }
.steam-boost .cold-mist { animation-duration: 1.4s; }
.steam-boost .cold-mist.m2 { animation-duration: 1.7s; }
.steam-boost .cold-mist.m3 { animation-duration: 1.2s; }

/* 🍦 giant roof cone — gentle happy wobble */
@keyframes coneWobble {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
.roof-cone {
  animation: coneWobble 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* 🍧 slow melty drip on the roof cone */
@keyframes coneDrip {
  0%, 55%  { transform: translateY(0) scaleY(.4); opacity: 0; }
  65%      { opacity: 1; }
  85%      { transform: translateY(5px) scaleY(1.15); opacity: 1; }
  100%     { transform: translateY(9px) scaleY(.8); opacity: 0; }
}
.cone-drip {
  animation: coneDrip 5s ease-in infinite;
  transform-box: fill-box;
  transform-origin: center top;
}

/* 🎵 floating notes while the roof cone sings the jingle */
@keyframes jingleNote {
  0%   { transform: translateY(6px) rotate(-8deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-34px) rotate(10deg); opacity: 0; }
}
.jingle-note {
  animation: jingleNote 1.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.jingle-note.j2 { animation-delay: .4s; animation-duration: 1.9s; }
.jingle-note.j3 { animation-delay: .8s; animation-duration: 1.5s; }
.jingle-note.j4 { animation-delay: 1.2s; animation-duration: 1.8s; }

/* ===== DEEPER SCENE: queue, tickets, rabbit, ambience ===== */
/* 🎫 waiting order tickets swinging gently on the window rail */
@keyframes ticketSway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3.5deg); }
}
.ticket-sway {
  animation: ticketSway 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 15% 0%;
}

/* 🧍 customers bobbing impatiently in the queue */
@keyframes queueBob {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-3px) scaleY(1.015); }
}
.queue-bob { animation: queueBob 1.9s ease-in-out infinite; }

/* 💵 first customer waving money at the window */
@keyframes waveArm {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-16deg); }
}
.wave-arm { animation: waveArm 1.1s ease-in-out infinite; }

/* 🎈 kid's balloon drifting */
@keyframes balloonSway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(6deg); }
}
.balloon-sway { animation: balloonSway 3.2s ease-in-out infinite; }

/* 🐇 jackrabbit hop bounce (the horizontal dash reuses hawkLTR/RTL) */
@keyframes rabbitHop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-14px) rotate(4deg); }
  55%      { transform: translateY(0); }
  75%      { transform: translateY(-8px) rotate(3deg); }
}
.rabbit-hop { animation: rabbitHop 0.75s ease-in-out infinite; }
.rabbit { left: 0; animation-timing-function: linear; animation-fill-mode: both; }

/* 🐛 fireflies wandering near the ground at night */
@keyframes fireflyDrift {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 1; }
  40%  { transform: translate(26px, -20px); opacity: .35; }
  60%  { transform: translate(-14px, -34px); opacity: 1; }
  85%  { transform: translate(18px, -12px); opacity: .3; }
  100% { transform: translate(0, 0); opacity: 0; }
}
.firefly {
  width: 5px; height: 5px;
  background: #ffe98a;
  box-shadow: 0 0 8px 3px rgba(255, 233, 138, .65);
  animation: fireflyDrift 6s ease-in-out infinite;
}

/* 🌠 shooting star streaking across the night sky */
@keyframes shootStar {
  0%   { transform: translate(0, 0) rotate(24deg) scaleX(.3); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(190px, 90px) rotate(24deg) scaleX(1); opacity: 0; }
}
.shooting-star {
  width: 68px; height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff 65%, #ffe98a);
  animation: shootStar 1.3s ease-out both;
}

/* 🌬️ sand grains drifting on the daytime desert wind */
@keyframes sandDrift {
  0%   { transform: translateX(-4vw) translateY(0); opacity: 0; }
  12%  { opacity: .55; }
  55%  { transform: translateX(48vw) translateY(-9px); opacity: .4; }
  100% { transform: translateX(104vw) translateY(3px); opacity: 0; }
}
.sand-grain {
  background: #c9a86a;
  border: 1px solid rgba(43, 29, 18, .4);
  animation: sandDrift 9s linear infinite;
}

/* ===== STAFF KDS BOARD ===== */
/* 🔥 late ticket pulses red urgently */
@keyframes ticketLate {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}
.ticket-late { animation: ticketLate 1.2s ease-in-out infinite; }

/* ticket enter pop */
@keyframes kdsIn {
  0%   { transform: translateY(14px) scale(.94) rotate(-1deg); opacity: 0; }
  70%  { transform: translateY(-3px) scale(1.02) rotate(.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
.kds-ticket { animation: kdsIn .4s ease-out both; }

/* ==================== 🍦 SCOOPY THE MASCOT + MOUSE PARALLAX ==================== */

/* --- parallax layers: driven by --px / --py CSS vars set from mousemove --- */
.plx { transition: transform .18s ease-out; will-change: transform; }
.plx-sky  { transform: translate(calc(var(--px, 0) * -8px),  calc(var(--py, 0) * -4px)); }
.plx-far  { transform: translate(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -6px)); }
.plx-mid  { transform: translate(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -9px)); }
.plx-near { transform: translate(calc(var(--px, 0) * 14px),  calc(var(--py, 0) * 6px)); }
.plx-rv   { transform: translate(calc(var(--px, 0) * 6px),   calc(var(--py, 0) * 3px)); }

/* --- mascot body: gentle idle bob; walking = faster bob + leg swing --- */
.mascot-body { animation: mascotIdle 2.6s ease-in-out infinite; }
@keyframes mascotIdle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
.mascot-body.mascot-walking { animation: mascotWalkBob .38s ease-in-out infinite; }
@keyframes mascotWalkBob {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -5px; rotate: 2deg; }
}

/* legs: still when idle, swinging when walking */
.mascot-leg-l, .mascot-leg-r { transform-box: fill-box; transform-origin: top center; }
.mascot-walking .mascot-leg-l { animation: legSwing .38s ease-in-out infinite; }
.mascot-walking .mascot-leg-r { animation: legSwing .38s ease-in-out infinite reverse; }
@keyframes legSwing {
  0%, 100% { transform: rotate(24deg); }
  50% { transform: rotate(-24deg); }
}

/* blink: lids are body-colored rects that slide down over the eyes */
.mascot-lids { transform-box: fill-box; transform-origin: top center; transform: scaleY(0); animation: mascotBlink 4.6s ease-in-out infinite; }
@keyframes mascotBlink {
  0%, 92%, 100% { transform: scaleY(0); }
  95%, 97% { transform: scaleY(1); }
}

/* the carried sign: sways on its stick; pops when the special changes */
.mascot-sign { animation: signSway 2.8s ease-in-out infinite; transform-origin: bottom center; box-shadow: 3px 3px 0 rgba(43,29,18,.55); }
@keyframes signSway {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; }
}
.mascot-sign.sign-pop { animation: signPop .42s ease-out; }
@keyframes signPop {
  0% { scale: .6; rotate: -10deg; }
  60% { scale: 1.12; rotate: 4deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* hover: he gets excited */
#scoopy-mascot:hover .mascot-body { animation: mascotExcite .3s ease-in-out infinite; }
@keyframes mascotExcite {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  .plx, .plx-sky, .plx-far, .plx-mid, .plx-near, .plx-rv { transform: none !important; transition: none; }
  .mascot-body, .mascot-sign, .mascot-lids,
  .mascot-walking .mascot-leg-l, .mascot-walking .mascot-leg-r { animation: none !important; }
}

/* keep the mascot off tiny screens where he'd cover content */
@media (max-width: 640px) {
  #scoopy-mascot { display: none; }
}