/* Al Basha storefront.
   Palette: sampled from the supplied mockup and the logo (burgundy, cream, fez red).
   Layers, in order: tokens, base, layout, components, breakpoints, then the MOTION
   LAYER. Everything that moves lives inside `prefers-reduced-motion: no-preference`,
   so a visitor who asks for less motion gets a calm, complete page (no global
   duration hack). Motion animates transform/opacity only, and every animation that
   keeps running (ticker, tassel, edge light, sweep) is on an element of its own so the
   compositor runs it: the main thread is idle when nobody touches the page. */

:root {
  --burgundy: #781c29;
  --burgundy-deep: #5e1520;
  --fez: #b7252f;
  --cream: #f7f4ef;
  --cream-deep: #efe6d9;
  --beige: #efe4d2;
  --beige-deep: #cdbea9;
  --card: #fffcf7;
  --ink: #1e1a18;
  --muted: #6f6259;
  --line: #e6dccd;
  --ok: #1f7a4d;
  --radius: 18px;
  --pad: 16px;
  --shadow: 0 1px 2px rgba(60, 30, 20, 0.05), 0 10px 26px rgba(60, 30, 20, 0.08);
  --shadow-lift: 0 2px 4px rgba(60, 30, 20, 0.06), 0 22px 44px rgba(60, 30, 20, 0.18);
  --bar-h: 76px;
  --sticky-h: 66px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* physics curves (CSS linear()): a soft spring and a floor bounce */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --bounce: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--sticky-h) + 10px); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--cream-deep);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button, a, label, [role="button"] { touch-action: manipulation; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(120, 28, 41, 0.18); }
:focus-visible { outline: 3px solid rgba(120, 28, 41, 0.5); outline-offset: 2px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- ambient background ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
@media (max-width: 519px) { .ambient { display: none; } } /* fully hidden behind the app on phones */
.ambient::after {
  /* a faint diamond lattice, the motif from the logo */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(120, 28, 41, 0.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(120, 28, 41, 0.035) 0 1px, transparent 1px 26px);
}
.blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.b1 { left: -15vmax; top: -10vmax; background: radial-gradient(circle, #f0d9c2, transparent 65%); }
.b2 { right: -18vmax; top: 20vh; background: radial-gradient(circle, rgba(120, 28, 41, 0.22), transparent 65%); }
.b3 { left: 20vw; bottom: -22vmax; background: radial-gradient(circle, #e9d6b8, transparent 65%); }

/* reading progress: only drawn where scroll-driven animations exist (motion layer) */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--burgundy), var(--fez)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- app shell ---------- */
.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--cream);
  padding: 0 var(--pad) calc(var(--bar-h) + 48px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 0 40px rgba(60, 30, 20, 0.06);
  overflow: clip; /* clips the full-bleed bands to the rounded card without breaking sticky */
}
@media (min-width: 520px) {
  .app { border-radius: 28px; margin: 20px auto; min-height: calc(100dvh - 40px); }
}

/* ---------- masthead: status · logo (top middle) · language ---------- */
.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) 0 12px;
}
.mast-l { justify-self: start; padding-top: 7px; min-width: 0; max-width: 100%; }
.mast-r { justify-self: end; padding-top: 4px; }
.brand { display: block; width: min(196px, calc(100vw - 216px)); border-radius: 12px; cursor: pointer; }
.logo-box { position: relative; display: block; }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.lg-fezbox, .lg-tassel-in, .lg-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.lg-fezbox { transform-origin: 48.4% 46%; } /* the foot of the fez */
.lg-tassel-in, .lg-tassel { transform-origin: 39.71% 20.27%; } /* the knot */

.status {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ok);
  background: rgba(31, 122, 77, 0.1);
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.status span:last-child { overflow: hidden; text-overflow: ellipsis; }
.status.closed { color: var(--fez); background: rgba(183, 37, 47, 0.1); }
.dot { flex: 0 0 auto; position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; }

.lang { position: relative; display: inline-flex; background: var(--burgundy); border-radius: 999px; padding: 3px; }
.lang::before {
  content: "";
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--cream);
}
.lang:has(button[data-lang="fr"][aria-pressed="true"])::before { transform: translateX(100%); }
.lang button {
  position: relative; z-index: 1;
  flex: 1; min-width: 36px;
  border: 0; background: transparent; color: #fff;
  font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em;
  padding: 7px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s;
}
.lang button[aria-pressed="true"] { color: var(--burgundy); }

/* ---------- ticker: a burgundy awning under the masthead ---------- */
.ticker {
  position: relative;
  margin: 2px calc(var(--pad) * -1) 0;
  background: var(--burgundy);
  color: var(--cream);
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase;
  padding: 9px 0;
  min-height: 34px;
  cursor: default;
  user-select: none;
}
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--burgundy), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--burgundy), transparent); }
.ticker-track { display: inline-flex; align-items: center; }
.ticker-track .set { display: inline-flex; align-items: center; }
.ticker-track b { padding: 0 12px; font-weight: inherit; }
.ticker-track i { font-style: normal; font-size: 8px; color: rgba(255, 255, 255, 0.55); }

/* ---------- hello + search ---------- */
.hello { margin-top: 18px; }
.hello h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.015em; min-height: 1.15em; }
.hello .wave { display: inline-block; transform-origin: 50% 80%; }
.meta { margin-top: 6px; color: var(--muted); font-size: 13.5px; text-wrap: pretty; min-height: 1.4em; }

.find { display: flex; gap: 10px; margin-top: 14px; }
.search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 50px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 6px 0 14px;
  color: var(--muted);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.search svg { flex: 0 0 auto; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; padding: 0; }
.search input::placeholder { color: #9a8d82; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { border-color: var(--burgundy); box-shadow: 0 0 0 4px rgba(120, 28, 41, 0.09); color: var(--burgundy); }
.search .clear { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--beige); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dice {
  flex: 0 0 auto; width: 50px; height: 50px;
  border: 0; border-radius: 16px;
  background: var(--beige); color: var(--burgundy);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 0.25s;
}

.banner { margin-top: 14px; background: #fbe9e4; color: #7a2a1a; border: 1px solid #f1cfc6; border-radius: 14px; padding: 10px 14px; font-size: 14px; }

/* ---------- categories ---------- */
.side { display: contents; } /* phone: the sticky bar sticks across the whole page */
.browse { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-top: 20px; }
.cats-sentinel { height: 1px; }
.cats {
  position: sticky; top: 0; z-index: 5;
  margin: 0 calc(var(--pad) * -1);
  padding: 9px 0 5px;
  background: var(--cream);
  transition: box-shadow 0.3s, background-color 0.3s;
}
.cats.stuck {
  background: rgba(247, 244, 239, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 24px -18px rgba(60, 30, 20, 0.55);
}
.chips {
  position: relative;
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px var(--pad) 8px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  border: 0;
  background: var(--beige);
  color: var(--ink);
  border-radius: 14px;
  padding: 11px 15px;
  font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}
.chip .ico { display: inline-block; }
.chip.ph { width: 92px; height: 43px; cursor: default; opacity: 0.65; }
.chip.ph:first-child { width: 72px; }
.chip[aria-pressed="true"] { background: var(--burgundy); color: var(--cream); }
.chips.has-pill .chip[aria-pressed="true"] { background: transparent; }
.pill {
  position: absolute; z-index: 0; left: 0; top: 0;
  width: var(--w, 0); height: var(--h, 0);
  transform: translate(var(--x, 0), var(--y, 0));
  background: var(--burgundy);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(120, 28, 41, 0.28);
  pointer-events: none;
}
/* where you are while scrolling the full menu */
.chip::after {
  content: "";
  position: absolute; left: 50%; bottom: 3px;
  width: 18px; height: 3px; margin-left: -9px;
  border-radius: 3px;
  background: var(--burgundy);
  opacity: 0; transform: scaleX(0);
}
.chip.spy::after { opacity: 1; transform: none; }
.chip[aria-pressed="true"]::after { display: none; }

/* ---------- sections ---------- */
.section { margin-top: 26px; scroll-margin-top: calc(var(--sticky-h) + 10px); }
/* Category sections off screen are skipped entirely (no style, layout or paint) until they come
   near. That containment also clips, so each section carries its own breathing room for card
   shadows and the in-cart ring (padding, taken back by the negative margin: nothing moves).
   --h is the expected height, set by app.js from the number of dishes; once a section has been
   drawn the browser remembers its real height (the `auto` keyword). */
.section[id] {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--h, 640px);
  padding: 0 calc(var(--pad) - 2px) 34px;
  margin: 26px calc((var(--pad) - 2px) * -1) -34px;
}
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; min-width: 0; }
.section-head h2 .ico { flex: 0 0 auto; }
.section-head .rule { flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, var(--beige-deep), transparent); transform-origin: 0 50%; }
.section-head .count { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 700; background: var(--beige); border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- dish cards ---------- */
.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.3s;
}
.card.in-cart { box-shadow: 0 0 0 2px var(--burgundy), var(--shadow); }
.pic {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--tile, #f3e7d6);
}
.t0 { --tile: #f3e7d6; } .t1 { --tile: #f2dfd8; } .t2 { --tile: #ece5d0; } .t3 { --tile: #f6e4cf; } .t4 { --tile: #eadfd8; }
.pic.ph, .hero.ph {
  /* diamond lattice, faded out behind the plate (plain gradients: cheap to paint on small phones) */
  background-image:
    radial-gradient(circle at 50% 50%, var(--tile, #f3e7d6) 36%, transparent 88%),
    repeating-linear-gradient(45deg, rgba(120, 28, 41, 0.09) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(120, 28, 41, 0.09) 0 1px, transparent 1px 13px);
}
.pic:not(.ph) { overflow: hidden; } /* photos may zoom on hover: only they need the clip */
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* no photo yet: the dish is served on a plate */
.plate {
  position: relative;
  width: 55%; max-width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #fffefb 0 55%, #f1e6d4 56% 60%, #fffbf4 61% 100%);
  box-shadow: 0 10px 14px -9px rgba(90, 50, 30, 0.5), inset 0 0 0 1px rgba(120, 80, 40, 0.08);
  display: grid; place-items: center;
  font-size: clamp(36px, 11.5vw, 48px);
  line-height: 1;
}
.plate .ico { display: inline-block; }
.feat .plate .ico, .hero .plate .ico { text-shadow: 0 3px 5px rgba(60, 30, 20, 0.22); }
.card:nth-child(3n + 1) .plate .ico { transform: rotate(-9deg); }
.card:nth-child(3n + 2) .plate .ico { transform: rotate(7deg); }
.badge {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  background: rgba(255, 252, 247, 0.94);
  color: var(--burgundy);
  font-size: 11px; font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(60, 30, 20, 0.12);
}
.qty {
  position: absolute; right: 8px; top: 8px; z-index: 1;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px;
  background: var(--burgundy); color: #fff;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(120, 28, 41, 0.35);
  transform: scale(0);
}
.in-cart .qty { transform: none; }
.add {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  width: 38px; height: 38px;
  border-radius: 50%; border: 0;
  background: var(--burgundy); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(120, 28, 41, 0.35);
  cursor: pointer;
}
.add::before { content: ""; position: absolute; inset: -7px; } /* bigger thumb target */
.add svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.add .i-check { opacity: 0; transform: scale(0.4); }
.add.done { background: var(--ok); box-shadow: 0 6px 14px rgba(31, 122, 77, 0.35); }
.add.done .i-plus { opacity: 0; }
.add.done .i-check { opacity: 1; transform: none; }
.card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.card .name { font-weight: 650; font-size: 15px; line-height: 1.25; text-wrap: balance; }
.card .desc { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { color: var(--burgundy); font-weight: 800; margin-top: auto; padding-top: 6px; font-size: 16px; font-variant-numeric: tabular-nums; }
.price.ask { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* skeleton while the menu loads */
.sk { border-radius: var(--radius); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.sk .pic { aspect-ratio: 4 / 3; }
.sk .l { height: 12px; margin: 12px; border-radius: 6px; }
.sk .l.s { width: 50%; }
.sk .pic, .sk .l { position: relative; overflow: hidden; background: #efe6d9; }
.sk .pic::after, .sk .l::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 252, 246, 0.7) 50%, transparent 70%); transform: translateX(-100%); }

/* ---------- order again ---------- */
.again {
  margin-top: 18px;
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px dashed var(--beige-deep);
  border-radius: var(--radius);
  padding: 12px 12px 12px 14px;
}
.again .ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--beige); display: grid; place-items: center; font-size: 20px; }
.again .txt { flex: 1; min-width: 0; }
.again .txt b { display: block; font-size: 15px; }
.again .txt small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.again .x { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }

/* ---------- featured ---------- */
.feat-row {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: -18px calc(var(--pad) * -1) -40px;
  padding: 22px var(--pad) 52px;
  scroll-padding-inline: var(--pad);
  overscroll-behavior-x: contain;
}
.feat-row::-webkit-scrollbar { display: none; }
.feat {
  position: relative;
  flex: 0 0 88%;
  scroll-snap-align: center;
  border-radius: 24px;
  overflow: hidden;
  min-height: 290px;
  background: linear-gradient(160deg, #3a1118, #781c29 62%, #9a2a3a);
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 14px 34px rgba(60, 20, 25, 0.28);
}
.feat:only-child { flex-basis: 100%; }
.feat::before {
  /* lattice + a slow light sweep (motion layer) */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.feat .sweep { position: absolute; inset: -40%; z-index: 1; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.13) 50%, transparent 58%); transform: translateX(-70%) rotate(8deg); pointer-events: none; }
.feat .edge {
  /* a light that travels round the edge: a ring-shaped window ... */
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.9;
  pointer-events: none;
}
.feat .edge i {
  /* ... over a big square that only turns (transform, so the compositor does it) */
  position: absolute; left: 50%; top: 50%;
  width: 170%; aspect-ratio: 1;
  margin: -85% 0 0 -85%;
  background: conic-gradient(from 40deg, transparent 0 62%, rgba(255, 226, 205, 0.85) 78%, transparent 94%);
}
.feat img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.feat .shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 5, 5, 0.88) 28%, rgba(10, 5, 5, 0.05) 72%); }
.feat .plate { position: absolute; right: 18px; top: 18px; z-index: 2; width: 104px; max-width: none; font-size: 50px; box-shadow: 0 18px 26px -10px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(120, 80, 40, 0.08); }
.feat .tag { position: absolute; left: 16px; top: 16px; z-index: 2; background: rgba(255, 252, 247, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.feat .qty { right: auto; left: 16px; top: 50px; background: var(--cream); color: var(--burgundy); z-index: 2; }
.feat .body { position: relative; z-index: 2; padding: 18px; }
.feat .name { font-size: 23px; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
.feat .desc { opacity: 0.86; font-size: 13.5px; margin-top: 5px; text-wrap: pretty; }
.feat .row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.feat .price { color: #fff; font-size: 20px; margin: 0; padding: 0; }
.feat .price.ask { color: rgba(255, 255, 255, 0.78); font-size: 13.5px; white-space: nowrap; }
.feat .cta {
  flex: 0 0 auto;
  background: var(--cream); color: var(--burgundy);
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 800; font-size: 14px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.dots { position: relative; display: flex; justify-content: center; gap: 6px; margin-top: 2px; pointer-events: none; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--beige-deep); transition: width 0.35s var(--ease-out), background-color 0.35s; }
.dots i.on { width: 20px; background: var(--burgundy); }

.empty { color: var(--muted); text-align: center; padding: 44px 0; text-wrap: balance; }
.empty .big { font-size: 46px; display: block; margin-bottom: 10px; }

/* ---------- footer ---------- */
.foot { margin-top: 46px; color: var(--muted); font-size: 13px; text-align: center; }
.foot .orn { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--fez); font-size: 9px; margin-bottom: 18px; }
.foot .orn::before, .foot .orn::after { content: ""; width: 44px; height: 1px; background: var(--beige-deep); }
.foot img { width: 132px; height: auto; margin: 0 auto 12px; }
.foot a { color: var(--burgundy); font-weight: 700; text-decoration: none; }
.foot .since { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #9a8d82; }
.foot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.foot .totop { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--beige); color: var(--ink); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }

/* ---------- particles ---------- */
.fly { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; font-size: 26px; line-height: 1; will-change: transform, opacity; }

/* ---------- cart bar ---------- */
.cartbar-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 var(--pad) calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.cartbar {
  pointer-events: auto;
  position: relative;
  max-width: 448px; width: 100%;
  margin: 0 auto;
  background: var(--burgundy); color: #fff;
  border: 0; border-radius: 22px;
  padding: 10px 10px 10px 12px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 32px rgba(94, 21, 32, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-align: left;
}
.cart-ico { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; background: var(--cream); border-radius: 15px; }
.fezwrap { position: relative; display: block; width: 30px; height: 30px; }
.fezwrap svg { position: absolute; inset: 0; overflow: visible; }
.fez-tassel { transform-origin: 50% 33.33%; }
.cart-ico b {
  position: absolute; top: -7px; right: -8px;
  background: var(--fez); color: #fff;
  font-size: 11px; font-variant-numeric: tabular-nums;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid var(--burgundy);
}
.cart-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cart-text b { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-text small { font-size: 12px; opacity: 0.85; font-weight: 500; }
.cart-cta { position: relative; flex: 0 0 auto; overflow: hidden; background: var(--cream); color: var(--burgundy); border-radius: 14px; padding: 12px 20px; font-weight: 800; }
.cart-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(120, 28, 41, 0.16) 50%, transparent 65%); transform: translateX(-120%); }

/* ---------- sheet (bottom sheet on phones, dialog on desktop) ---------- */
.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.scrim { position: absolute; inset: 0; background: rgba(30, 15, 15, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow: hidden; overscroll-behavior: contain; touch-action: none; }
.panel {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  border-radius: 26px 26px 0 0;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
  outline: none;
  box-shadow: 0 -18px 60px rgba(30, 10, 10, 0.28);
}
.sheet-head { position: sticky; top: 0; z-index: 3; margin: 0 -18px; padding: 10px 18px 10px; background: linear-gradient(var(--cream) 82%, rgba(247, 244, 239, 0)); display: flex; align-items: center; min-height: 58px; touch-action: none; }
.grab { position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; margin-left: -22px; background: var(--beige-deep); border-radius: 999px; z-index: 4; }
.panel h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.015em; }
.sheet-head h2 { padding-top: 10px; }
.panel .desc { color: var(--muted); margin-top: 6px; text-wrap: pretty; }
.close { position: absolute; right: 12px; top: 14px; z-index: 5; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--beige); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(60, 30, 20, 0.12); }
.hero { position: relative; margin: 0 -18px 16px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: var(--tile, #f3e7d6); border-radius: 26px 26px 0 0; touch-action: none; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero:not(.ph) { aspect-ratio: 3 / 2; } /* a photo gets more room than a plate */
.hero:not(.ph) .grab { background: rgba(255, 255, 255, 0.75); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.hero .plate { width: auto; height: 74%; max-width: none; font-size: clamp(52px, 17vw, 76px); }
.hero .grab { background: rgba(120, 28, 41, 0.28); }
.item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel .price { margin-top: 4px; padding-top: 0; font-size: 18px; }
.panel .price.ask { font-size: 14px; }
.actions .btn-primary { min-width: 0; padding-inline: 14px; text-wrap: balance; }
.pillnote { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--beige); color: var(--burgundy); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }

.opts { margin-top: 16px; }
.opts h3 { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.opt:has(input:checked) { border-color: var(--burgundy); background: #fff; box-shadow: 0 6px 16px rgba(120, 28, 41, 0.1); }
.opt input { accent-color: var(--burgundy); width: 19px; height: 19px; margin: 0; }
.opt .delta { margin-left: auto; color: var(--burgundy); font-weight: 700; font-size: 13px; }

.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--beige); border-radius: 999px; padding: 4px; }
.stepper button { border: 0; background: var(--card); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink); box-shadow: 0 1px 2px rgba(60, 30, 20, 0.12); }
.stepper button svg { width: 16px; height: 16px; }
.stepper span { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; display: inline-block; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.btn {
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  font-weight: 800; font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
  transition: background-color 0.25s, opacity 0.2s, box-shadow 0.3s;
}
.btn-primary { position: relative; flex: 1; background: var(--burgundy); color: #fff; box-shadow: 0 10px 22px rgba(120, 28, 41, 0.28); }
.btn-primary[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-primary.sent { background: var(--ok); box-shadow: 0 10px 22px rgba(31, 122, 77, 0.3); }
.btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--burgundy); opacity: 0; pointer-events: none; }
.btn-ghost { background: transparent; color: var(--burgundy); padding: 10px 12px; font-size: 14px; font-weight: 700; }
.btn-ghost.arm { background: rgba(183, 37, 47, 0.1); color: var(--fez); }
.btn-soft { background: var(--beige); color: var(--ink); font-size: 14px; padding: 12px 16px; }
.btn-block { width: 100%; }

/* cart sheet */
.lines { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "txt step" "price step";
  gap: 2px 12px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 12px 12px 14px;
}
.line .txt { grid-area: txt; min-width: 0; }
.line .n { font-weight: 650; line-height: 1.25; }
.line .o { color: var(--muted); font-size: 13px; }
.line .p { grid-area: price; color: var(--burgundy); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.line .p.ask { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.line .stepper { grid-area: step; }

.form { margin-top: 16px; display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 700; }
.field input, .field textarea {
  font-size: 16px; /* 16px stops iOS from zooming the page on focus */
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: none; min-height: 72px; field-sizing: content; max-height: 160px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 4px rgba(120, 28, 41, 0.1); }
.field .err { color: var(--fez); font-size: 13px; font-weight: 600; }
.fold { display: grid; grid-template-rows: 1fr; }
.fold > .field { overflow: hidden; min-height: 0; }
.fold.shut { grid-template-rows: 0fr; margin-top: -12px; visibility: hidden; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--beige); border-radius: 16px; padding: 4px; }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--burgundy); box-shadow: 0 6px 14px rgba(120, 28, 41, 0.25); }
.seg:has(button[data-mode="pickup"][aria-pressed="true"])::before { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 11px 10px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: color 0.3s; }
.seg button[aria-pressed="true"] { color: #fff; }

.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 18px 0 12px; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.total small { font-weight: 600; color: var(--muted); font-size: 13px; }
.sub-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* after the WhatsApp button */
.sent-view { text-align: center; padding: 26px 4px 6px; }
.sent-view .tick { width: 84px; height: 84px; margin: 0 auto 14px; color: var(--ok); }
.sent-view .tick circle { fill: rgba(31, 122, 77, 0.1); stroke: currentColor; stroke-width: 3; }
.sent-view .tick path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sent-view p { color: var(--muted); margin: 8px auto 20px; max-width: 34ch; text-wrap: pretty; }
.sent-view .btn { margin-top: 8px; }

.toast {
  position: fixed; left: 50%;
  bottom: calc(var(--bar-h) + 26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  z-index: 40;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
  pointer-events: none;
}
.toast.high { bottom: auto; top: calc(14px + env(safe-area-inset-top)); }
.toast::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); font-size: 12px; }

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .brand { width: min(196px, calc(100vw - 196px)); }
  .lang button { min-width: 32px; padding: 7px 7px; }
  .status { padding: 6px 8px 6px 7px; }
  .hello h1 { font-size: 23px; }
  .feat .body { padding: 16px; }
  .feat .name { font-size: 21px; }
  .feat .cta { padding: 10px 12px; font-size: 13.5px; gap: 6px; }
  .feat .price.ask { font-size: 12.5px; }
  .feat .plate { width: 92px; font-size: 44px; right: 14px; top: 14px; }
  .cart-cta { padding: 12px 14px; }
  .chip { padding: 10px 13px; }
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  :root { --pad: 22px; }
  .app { max-width: 760px; }
  .brand { width: 216px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .feat { flex-basis: 64%; }
  .cartbar { max-width: 560px; }
  .plate { font-size: 50px; }
  .hero .plate { font-size: 84px; }
}

/* ---------- desktop: masthead on top, sidebar + wide grid ---------- */
@media (min-width: 960px) {
  :root { --pad: 40px; --sticky-h: 0px; }
  .app { max-width: 1280px; padding-bottom: 140px; margin: 28px auto; min-height: calc(100dvh - 56px); }
  .mast { padding: 26px 0 16px; }
  .mast-l { padding-top: 22px; } .mast-r { padding-top: 18px; }
  .brand { width: 250px; }
  .status { font-size: 13.5px; padding: 8px 14px 8px 11px; }
  .lang button { font-size: 14px; padding: 8px 14px; min-width: 46px; }
  .ticker { font-size: 12px; padding: 11px 0; }
  .layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding-top: 30px; }
  .side { display: block; position: sticky; top: 20px; align-self: start; max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: none; padding: 2px 2px 20px; }
  .side::-webkit-scrollbar { display: none; }
  .hello { margin-top: 0; }
  .hello h1 { font-size: 28px; }
  .browse { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 26px; }
  .cats, .cats.stuck { position: static; margin: 0; padding: 10px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .chips { flex-direction: column; overflow: visible; gap: 4px; padding: 0; }
  .chip { justify-content: flex-start; padding: 11px 14px; border-radius: 12px; background: transparent; }
  .chip:hover { background: var(--beige); }
  .pill { border-radius: 12px; }
  .chip::after { left: 3px; bottom: auto; top: 50%; width: 3px; height: 18px; margin: -9px 0 0; transform: scaleY(0); }
  .content { min-width: 0; }
  .section:first-child, .again:first-child { margin-top: 0; }
  .section-head h2 { font-size: 26px; }
  .grid { gap: 18px; }
  .feat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 4px 0 6px; gap: 18px; }
  .feat { min-height: 330px; }
  .feat .plate { width: 128px; font-size: 62px; right: 24px; top: 24px; }
  .feat .body { padding: 24px; }
  .feat .name { font-size: 27px; }
  .dots { display: none; }
  .cartbar-wrap { left: auto; right: 28px; bottom: 28px; width: 460px; padding: 0; }
  .sheet { align-items: center; }
  .panel { max-width: 540px; border-radius: 26px; max-height: 86dvh; padding-bottom: 22px; box-shadow: 0 30px 80px rgba(30, 10, 10, 0.35); }
  .grab { display: none; }
  .hero, .sheet-head { touch-action: auto; }
  .toast { bottom: 40px; }
  .toast.high { bottom: auto; top: 28px; }
  html { scrollbar-color: var(--beige-deep) transparent; }
}
@media (min-width: 1240px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- hover (mouse) ---------- */
@media (hover: hover) {
  .card::after {
    /* a soft light that follows the pointer */
    content: "";
    position: absolute; inset: 0; z-index: 2;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.75), transparent 62%);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
    mix-blend-mode: soft-light;
  }
  .card:hover { box-shadow: var(--shadow-lift); }
  .card.in-cart:hover { box-shadow: 0 0 0 2px var(--burgundy), var(--shadow-lift); }
  .card:hover::after { opacity: 1; }
  .dice:hover, .search .clear:hover, .close:hover, .foot .totop:hover { background: var(--beige-deep); }
  .btn-soft:hover { background: var(--beige-deep); }
  .btn-ghost:hover { background: rgba(120, 28, 41, 0.07); }
  .lang button:not([aria-pressed="true"]):hover { color: #ffe9df; }
  .foot a:hover { text-decoration: underline; }
}

/* ---------- lite mode: set by app.js on low-memory phones or with Data Saver ---------- */
.lite .blob { display: none; }
.lite .cats.stuck { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .scrim, .lite .feat .tag { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .feat .edge, .lite .feat .sweep { display: none; }

/* =====================================================================
   MOTION LAYER: only for visitors who have not asked for reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* ambient drift */
  .blob { will-change: transform; }
  .b1 { animation: drift 28s ease-in-out infinite alternate; }
  .b2 { animation: drift 36s ease-in-out infinite alternate-reverse; }
  .b3 { animation: drift 44s ease-in-out infinite alternate; }

  /* load choreography */
  .rise { animation: rise 0.5s var(--ease-out) both; }
  .d1 { animation-delay: 0s; } .d2 { animation-delay: 0.12s; } .d3 { animation-delay: 0.2s; } .d4 { animation-delay: 0.28s; }

  /* the logo assembles itself: fez drops, letters rise, rules draw, tassel settles */
  .lg-fezbox { animation: fez-drop 0.8s var(--bounce) 0.04s both; }
  .lg-tassel-in { animation: tassel-in 1.2s var(--ease-out) 0.3s both; }
  .lg-tassel { animation: sway 4.4s ease-in-out 1.6s infinite; }
  .lg-l { transform-box: fill-box; transform-origin: 50% 100%; animation: letter-in 0.6s var(--spring) both; }
  .lg-l:nth-child(1) { animation-delay: 0.1s; } .lg-l:nth-child(2) { animation-delay: 0.145s; } .lg-l:nth-child(3) { animation-delay: 0.19s; }
  .lg-l:nth-child(4) { animation-delay: 0.235s; } .lg-l:nth-child(5) { animation-delay: 0.28s; } .lg-l:nth-child(6) { animation-delay: 0.325s; } .lg-l:nth-child(7) { animation-delay: 0.37s; }
  .lg-dia path { transform-box: fill-box; transform-origin: 50% 50%; animation: pop-in 0.55s var(--spring) 0.55s both; }
  .lg-dia path + path { animation-delay: 0.62s; }
  .lg-rule { transform-box: fill-box; animation: draw-x 0.5s var(--ease-out) 0.5s both; }
  .lg-rule-a { transform-origin: 100% 50%; } .lg-rule-b { transform-origin: 0% 50%; }
  .lg-rest { animation: fade-up 0.5s var(--ease-out) 0.55s both; }
  /* assembled: the intro animations are dropped, so a later hop is the only animation on its element */
  .brand.ready .lg-fezbox, .brand.ready .lg-tassel-in, .brand.ready .lg-l, .brand.ready .lg-dia path, .brand.ready .lg-rule, .brand.ready .lg-rest { animation: none; }
  /* off screen: rest */
  .off .lg-tassel, .off .ticker-track, .off.status .dot::after, .ticker.off .ticker-track { animation-play-state: paused; }
  .brand { transition: transform 0.3s var(--ease-spring); }
  .brand:active { transform: scale(0.96); }

  .dot::after { animation: ping 2.2s ease-out infinite; }
  .status.closed .dot::after { animation-duration: 1.4s; }
  .lang::before { transition: transform 0.5s var(--spring); }
  .lang button:active { transform: scale(0.92); }
  .hello .wave { animation: wave 2.6s ease-in-out 1.1s 2; }

  .ticker-track { animation: marquee var(--ticker-dur, 40s) linear infinite; will-change: transform; }
  .ticker:hover .ticker-track, .ticker.paused .ticker-track { animation-play-state: paused; }

  .search { transition: border-color 0.25s, box-shadow 0.25s, transform 0.35s var(--ease-out); }
  .search:focus-within { transform: translateY(-1px); }
  .search .clear { animation: pop-in 0.35s var(--spring) both; }
  .dice { transition: background-color 0.25s, transform 0.3s var(--ease-spring); }
  .dice:active { transform: scale(0.9); }
  .dice.roll svg { animation: roll 0.7s var(--spring); }
  .banner { animation: rise 0.5s var(--ease-out) both; }

  .chip { transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease-spring); }
  .chip:active { transform: scale(0.94); }
  .chip[aria-pressed="true"] .ico { animation: wiggle 0.7s var(--ease-spring) 1; }
  .pill { transition: transform 0.55s var(--spring), width 0.4s var(--ease-out), height 0.4s var(--ease-out); }
  .pill.jump { transition: none; }
  .chip::after { transition: opacity 0.3s, transform 0.45s var(--spring); }

  /* scroll reveals (classes set by an IntersectionObserver) */
  .reveal { opacity: 0; transform: translateY(20px) scale(0.97); }
  .reveal.in { opacity: 1; transform: none; transition: opacity 0.55s var(--ease-out) calc(var(--i, 0) * 45ms), transform 0.75s var(--spring) calc(var(--i, 0) * 45ms), box-shadow 0.3s; }
  .reveal.in.now { transition: box-shadow 0.3s; } /* flung past, or a small phone: just be there */
  .reveal.first { opacity: 1; } /* first screen: readable at once, it only slides into place */
  .section-head.reveal { transform: none; }
  .section-head.reveal .rule { transform: scaleX(0); }
  .section-head.reveal .ico { transform: scale(0) rotate(-40deg); display: inline-block; }
  .section-head.in .rule { transform: none; transition: transform 0.9s var(--ease-out) 0.15s; }
  .section-head.in .ico { transform: none; transition: transform 0.7s var(--spring) 0.05s; }

  .card.in:active { transform: scale(0.97); transition-duration: 0.15s; transition-delay: 0s; }
  .card .plate { transition: transform 0.6s var(--spring); }
  .card .pic img { transition: transform 0.7s var(--ease-out); }
  .qty { transition: transform 0.5s var(--spring); }
  .qty.bump { animation: bump 0.45s var(--ease-spring); }
  .add { transition: transform 0.3s var(--ease-spring), background-color 0.25s, box-shadow 0.25s; }
  .add:active { transform: scale(0.85); }
  .add svg { transition: opacity 0.2s, transform 0.4s var(--spring); }
  .add.pop { animation: pop 0.5s var(--ease-spring); }
  .card.served .plate { animation: served 0.7s var(--spring); }

  .sk .pic::after, .sk .l::after { animation: shimmer-x 1.4s linear infinite; }
  .again { animation: rise 0.6s var(--ease-out) both; }

  .feat { transition: transform 0.45s var(--ease-out), box-shadow 0.4s; transform-style: preserve-3d; }
  .feat.tilting { transition: none; }
  .feat.live .sweep { animation: sweep 7s ease-in-out infinite; }
  .feat.live .edge i { animation: edge-spin 6s linear infinite; }
  .feat.live img { animation: kenburns 18s ease-in-out infinite alternate; }
  .feat.live .plate { animation: float 5.5s ease-in-out infinite; }
  .feat .cta { transition: transform 0.3s var(--ease-spring); }
  .feat:active .cta { transform: scale(0.95); }
  .empty .big { animation: float 4s ease-in-out infinite; }

  .cartbar { animation: bar-in 0.7s var(--spring); transition: transform 0.3s var(--ease-spring); }
  .cartbar:active { transform: scale(0.98); }
  .cartbar.kick { animation: kick 0.35s var(--ease-spring); }
  .fez-tassel { animation: swing 2.6s ease-in-out infinite; }
  .fez-tassel.hard { animation: swing-hard 0.9s var(--ease-out) 1; }
  .cart-ico b.bump { animation: bump 0.5s var(--ease-spring); }
  .cart-cta::after { animation: nudge 5.5s ease-in-out 2s infinite; }

  .scrim { animation: fade-in 0.3s ease both; }
  .panel { animation: sheet-in 0.6s var(--spring) both; transition: transform 0.5s var(--spring); }
  .panel.dragging { transition: none; }
  .via-vt .scrim, .via-vt .panel { animation: none; }
  .panel .stagger > * { animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms + 0.14s); }
  .stagger > :nth-child(2) { --n: 1; } .stagger > :nth-child(3) { --n: 2; } .stagger > :nth-child(4) { --n: 3; } .stagger > :nth-child(5) { --n: 4; }
  .stagger > :nth-child(6) { --n: 5; } .stagger > :nth-child(7) { --n: 6; } .stagger > :nth-child(n + 8) { --n: 7; }
  .close { transition: transform 0.3s var(--ease-spring), background-color 0.2s; }
  .close:active { transform: scale(0.88); }
  .hero .plate { animation: float 5s ease-in-out infinite; }
  .opt { transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.35s var(--spring); }
  .opt:has(input:checked) { transform: scale(1.015); }
  .stepper button { transition: transform 0.2s var(--ease-spring); }
  .stepper button:active { transform: scale(0.84); }
  .stepper span.tick { animation: bump 0.35s var(--ease-spring); }
  .btn { transition: background-color 0.25s, opacity 0.2s, box-shadow 0.3s, transform 0.3s var(--ease-spring); }
  .btn:active { transform: scale(0.97); }
  .btn-primary.ready::after { animation: ring 2s ease-out infinite; }
  .line.new { animation: rise 0.45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
  .line.out { animation: line-out 0.3s ease-in both; }
  .field .err { animation: shake 0.4s; }
  .opts.nope { animation: shake 0.4s; }
  .fold { transition: grid-template-rows 0.35s var(--ease-out), margin-top 0.35s var(--ease-out), visibility 0.35s; }
  .seg::before { transition: transform 0.5s var(--spring); }
  .seg button:active { transform: scale(0.96); }
  .sent-view .tick circle { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw 0.7s var(--ease-out) 0.1s forwards; }
  .sent-view .tick path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 0.45s var(--ease-out) 0.6s forwards; }
  .sent-view .tick { animation: pop-in 0.6s var(--spring) both; }
  .toast { animation: toast-in 0.5s var(--spring); }
  .toast.high { animation-name: toast-down; }
  .foot .totop { transition: background-color 0.2s, transform 0.3s var(--ease-spring); }
  .foot .totop:active { transform: scale(0.95); }

  @media (hover: hover) {
    .card.in:hover { transform: translateY(-5px); transition-delay: 0s; }
    .card.in:hover .pic img { transform: scale(1.06); }
    .card.in:hover .plate { transform: translateY(-3px) rotate(-8deg) scale(1.06); }
    .card.in:hover .add { transform: scale(1.1); }
    .chip:hover { transform: translateY(-1px); }
    .dice:hover svg { transform: rotate(18deg); transition: transform 0.4s var(--spring); }
    .close:hover { transform: rotate(90deg); }
    .cartbar:hover .cart-cta { transform: translateX(2px); }
    .cart-cta { transition: transform 0.3s var(--ease-spring); }
  }

  /* same-document view transitions: page cross-fade, sheet slide, dish morph */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
  .panel { view-transition-name: sheet; }
  .vt-pic, .panel:not(.no-morph) .hero { view-transition-name: dish; }
  ::view-transition-new(sheet):only-child { animation: sheet-in 0.55s var(--spring) both; }
  ::view-transition-old(sheet):only-child { animation: sheet-out 0.26s ease-in both; }
  ::view-transition-group(dish) { animation-duration: 0.5s; animation-timing-function: var(--ease-out); z-index: 2; }
  ::view-transition-group(sheet) { z-index: 1; }
  ::view-transition-old(dish), ::view-transition-new(dish) { height: 100%; object-fit: cover; }

  /* scroll-driven extras, where the browser has them (decorative, so no fallback) */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .progress { animation: grow-x linear both; animation-timeline: scroll(root block); }
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .panel { animation-name: pop-modal; }
  ::view-transition-new(sheet):only-child { animation-name: pop-modal; }
  ::view-transition-old(sheet):only-child { animation-name: pop-modal-out; }
}

/* reduced motion: the ticker becomes a still line */
@media (prefers-reduced-motion: reduce) {
  .ticker { text-align: center; }
  .ticker-track { max-width: 100%; overflow: hidden; }
  .ticker-track .dup { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fez-drop { from { transform: translateY(-70%) rotate(-8deg); opacity: 0; } 12% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes tassel-in { 0% { transform: rotate(0deg); } 20% { transform: rotate(-24deg); } 45% { transform: rotate(16deg); } 68% { transform: rotate(-9deg); } 86% { transform: rotate(4deg); } 100% { transform: rotate(0deg); } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-2.5deg); } }
@keyframes letter-in { from { opacity: 0; transform: translateY(46px) scaleY(0.6); } 40% { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes grow-x { to { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg) scale(1.1); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes roll { from { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.25); } to { transform: rotate(360deg) scale(1); } }
@keyframes wiggle { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-14deg) scale(1.25); } 60% { transform: rotate(10deg) scale(1.15); } 100% { transform: rotate(0) scale(1); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes served { 0% { transform: rotate(0); } 35% { transform: rotate(-16deg) scale(1.08); } 70% { transform: rotate(9deg); } 100% { transform: rotate(0); } }
@keyframes shimmer-x { to { transform: translateX(100%); } }
@keyframes sweep { 0%, 55% { transform: translateX(-70%) rotate(8deg); } 100% { transform: translateX(70%) rotate(8deg); } }
@keyframes edge-spin { to { transform: rotate(1turn); } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes bar-in { from { transform: translateY(60px) scale(0.94); opacity: 0; } }
@keyframes kick { 0% { transform: scale(1); } 50% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes swing-hard { 0% { transform: rotate(0); } 25% { transform: rotate(-28deg); } 55% { transform: rotate(18deg); } 80% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }
@keyframes nudge { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes sheet-in { from { transform: translateY(105%); } }
@keyframes sheet-out { to { transform: translateY(105%); } }
@keyframes pop-modal { from { transform: translateY(26px) scale(0.94); opacity: 0; } }
@keyframes pop-modal-out { to { transform: translateY(16px) scale(0.96); opacity: 0; } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.06, 1.32); opacity: 0; } }
@keyframes line-out { to { opacity: 0; transform: translateX(-24px) scale(0.96); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes toast-down { from { transform: translate(-50%, -18px) scale(0.9); opacity: 0; } }
@keyframes toast-in { from { transform: translate(-50%, 18px) scale(0.9); opacity: 0; } }