/* DINEX box animations (C241, 2026-09-28) - bunzilla colours. Built by bunzilla/menu-demo/build-site.py */
:root{--dx-ripple:rgba(250,241,229,.35);--dx-ripple-card:rgba(250,241,229,.28);--dx-ring:rgba(250,241,229,.28);--dx-run:#f0b95a;--dx-glow:rgba(240,185,90,.45);--dx-reveal:#3A050F;--dx-pill:#7d1c2a;--dx-pill-shadow:rgba(0,0,0,.35);--dx-circle:#faf1e5;--dx-icon:#5a1420;--dx-label:#faf1e5;--dx-tile-icon:#faf1e5;--dx-tile-shadow:rgba(0,0,0,.3);--dx-fill:#faf1e5;--dx-fill-icon:#5a1420;--dx-lit-glow:rgba(250,241,229,.35);--dx-accent:#ffffff;--dx-pill-on:#faf1e5;--dx-label-on:#3A050F}
/* ===== DINEX box animations (demo) - after dimanzzo.com, in each restaurant's own colours =====
   Per-site colours come in as --dx-* variables (set by the builder). */

body.dx-lock{overflow:hidden}

/* ---------- tap ripple (every box you press) ---------- */
.dx-rip{position:absolute;border-radius:50%;pointer-events:none;background:var(--dx-ripple);
  transform:scale(0);animation:dxRip .62s cubic-bezier(.2,.7,.3,1) forwards;z-index:4}
.card .dx-rip{background:var(--dx-ripple-card)}
.langbar,#dlist a{position:relative;overflow:hidden}
@keyframes dxRip{to{transform:scale(1);opacity:0}}

/* ================= THE OPENING SCREEN ================= */
#open[hidden]{display:none!important}
#open .big,#open .ghost,#open .socials a,#open .lang button{position:relative;overflow:hidden}
/* MENU: a light runs round its edge (dimanzzo's "View Menu") and it breathes a glow */
#open .big{isolation:isolate;background:var(--dx-ring)}
#open .big::before{content:"";position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 58%,var(--dx-run) 74%,#fff 80%,var(--dx-run) 84%,transparent 92%);
  animation:dxSpin 2.8s linear infinite}
#open .big::after{content:"";position:absolute;inset:3px;border-radius:inherit;background:var(--ink);z-index:-1}
@keyframes dxSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}
#open .big:active{transform:scale(.97)}
#open .ghost:active,#open .socials a:active{transform:scale(.95)}
#open .big,#open .ghost,#open .socials a{transition:transform .18s ease}

/* the language switch: the light pill slides to the language you pick */
#open .lang{position:relative}
#open .lang button{z-index:1;transition:color .3s}
#open .lang button.on{background:none}
#open .dx-seg{position:absolute;top:5px;bottom:5px;left:0;border-radius:999px;background:var(--ink);z-index:0;
  transition:transform .42s cubic-bezier(.3,1.35,.5,1),width .42s cubic-bezier(.3,1.35,.5,1)}

/* the entrance, played every time the screen appears (the class is re-added to replay it) */
#open.dx-play .lang{animation:dxDown .6s .05s backwards cubic-bezier(.2,.8,.25,1)}
#open.dx-play .middle{animation:dxLogo 1s .12s backwards cubic-bezier(.2,.8,.25,1)}
#open.dx-play .actions{animation:none}
#open.dx-play .big{animation:dxPop .7s .45s backwards cubic-bezier(.3,1.35,.5,1),dxGlow 3s 1.4s ease-in-out infinite}
#open.dx-play .ghost{animation:dxUp .7s .6s backwards cubic-bezier(.2,.8,.25,1)}
#open.dx-play .socials{animation:none}
#open.dx-play .socials a{animation:dxPop .6s backwards cubic-bezier(.3,1.5,.5,1);animation-delay:calc(.72s + var(--k,0) * 80ms)}
#open.dx-play .foot,#open.dx-play .by{animation:dxFade .8s 1.15s both}
@keyframes dxDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes dxUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes dxFade{from{opacity:0}to{opacity:1}}
@keyframes dxLogo{from{opacity:0;transform:scale(.8);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes dxPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes dxGlow{0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.38),0 0 0 0 var(--dx-glow)}
                  50%{box-shadow:0 10px 34px rgba(0,0,0,.38),0 0 30px 6px var(--dx-glow)}}
/* the circle that grows out of your finger when you press MENU */
.dx-reveal{position:fixed;z-index:90;border-radius:50%;background:var(--dx-reveal);pointer-events:none;
  box-shadow:0 0 0 3px var(--dx-run),0 0 60px 10px var(--dx-glow)}

/* ================= THE MENU ================= */
/* the header and the rail arrive after MENU */
.dx-enter header{animation:dxDown .55s backwards cubic-bezier(.2,.8,.25,1)}
.dx-enter .langwrap{animation:dxFade .6s .12s both}
.dx-enter .rail .cat .tilebox{animation:dxZoom .6s backwards cubic-bezier(.3,1.35,.5,1);animation-delay:calc(.18s + var(--k,0) * 70ms)}
.dx-enter .rail .cat .lbl{animation:dxFade .6s backwards;animation-delay:calc(.3s + var(--k,0) * 70ms)}
@keyframes dxZoom{from{opacity:0;transform:scale(.55) translateY(18px)}to{opacity:1;transform:none}}

/* the language list unfolds instead of popping */
.langmenu{display:block!important;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top center;pointer-events:none;
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.25,1)}
.langmenu.open{opacity:1;transform:none;pointer-events:auto}

/* ---------- the boxes at the TOP of the menu: GLIDE (Ahmad's pick, 2026-09-28) ----------
   A gold bar under the names glides to the lit box like a ribbon - its front edge arrives first, the
   back edge follows. The box rises a little and turns gold, its icon lifts. No bounce, no squash. */
.rail{position:relative}
.rail .cat{position:relative}
.rail .cat .tilebox{position:relative;isolation:isolate;border:0;overflow:hidden;background:var(--panel);
  box-shadow:0 6px 16px var(--dx-tile-shadow);
  transition:background-color .45s cubic-bezier(.4,0,.2,1) .1s,transform .55s cubic-bezier(.22,1,.36,1) .1s,box-shadow .45s ease .1s}
.rail .cat.on .tilebox{background:var(--dx-fill);transform:translateY(-4px);box-shadow:0 12px 26px var(--dx-lit-glow,var(--dx-glow))}
.rail .cat .dxic{width:48px;height:48px;background:var(--dx-tile-icon);position:relative;z-index:1;
  transition:background-color .45s cubic-bezier(.4,0,.2,1) .12s}
.rail .cat.on .dxic{background:var(--dx-fill-icon);animation:dxLift .7s cubic-bezier(.4,0,.2,1) .15s backwards}
@keyframes dxLift{0%{transform:none}45%{transform:translateY(-4px) scale(1.05)}100%{transform:none}}
.rail .cat .lbl{transition:color .45s cubic-bezier(.4,0,.2,1) .1s}
.rail .cat.on .lbl{color:var(--dx-accent)}
.rail .cat.dx-boop .tilebox{animation:dxBoop .45s cubic-bezier(.3,1.5,.5,1)}
.dxblob{position:absolute;left:0;top:0;width:48px;height:6px;border-radius:999px;z-index:2;pointer-events:none;
  background:var(--dx-fill);box-shadow:0 0 14px var(--dx-lit-glow,var(--dx-glow));will-change:left,width}
.rail .cat .tilebox,.dxblob,.mcat::before{transition-property:background-color,background,transform,box-shadow}
@keyframes dxBoop{0%{transform:scale(1)}35%{transform:scale(.93)}100%{transform:scale(1)}}

/* ---------- every section on one page; a slim bar of small boxes follows you down ---------- */
.dxic{display:block;background:var(--dx-icon);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.dxbar{position:fixed;left:0;right:0;top:var(--dx-head,56px);z-index:29;background:var(--dx-bar-bg);
  box-shadow:0 10px 22px rgba(0,0,0,.22);transform:translateY(-130%);visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.8,.25,1),visibility 0s .42s}
.dxbar.show{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.2,.8,.25,1),visibility 0s}
.dxbar-in{display:flex;gap:8px;overflow-x:auto;padding:9px 14px 11px;scrollbar-width:none}
.dxbar-in::-webkit-scrollbar{display:none}
.mcat{position:relative;flex:0 0 auto;height:44px;border:0;border-radius:999px;background:var(--dx-pill);
  color:var(--dx-label);padding:0 20px 0 46px;font:700 13.5px/44px 'Cairo','Segoe UI',system-ui,sans-serif;
  overflow:hidden;isolation:isolate;cursor:pointer;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
html[lang="ku"] .mcat{font-family:'NotoKu','Cairo',system-ui,sans-serif}
.mcat::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--dx-pill-on);opacity:0;transition:opacity .35s;z-index:-1}
.mcat.on::before{opacity:1}
.mcat:active{transform:scale(.94)}
.mcat .mcirc{position:absolute;top:5px;left:5px;width:34px;height:34px;border-radius:50%;background:var(--dx-circle);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.22);
  transition:transform .55s cubic-bezier(.34,1.45,.5,1)}
.mcat .mcirc .dxic{width:22px;height:22px}
.mcat .mlbl{display:block;white-space:nowrap;transition:transform .55s cubic-bezier(.34,1.45,.5,1),color .35s}
/* the small boxes do the same swap sideways: the circle runs to the other end, the name slides over */
/* v4 (Ahmad: the circle went "too far right"): it only nudges over with one quick spin */
.mcat.on .mcirc{transform:translateX(7px) rotate(360deg)}
.mcat.on .mlbl{transform:translateX(6px);color:var(--dx-label-on)}
html[dir="rtl"] .mcat{padding:0 46px 0 20px}
html[dir="rtl"] .mcat .mcirc{left:auto;right:5px}
html[dir="rtl"] .mcat.on .mcirc{transform:translateX(-7px) rotate(-360deg)}
html[dir="rtl"] .mcat.on .mlbl{transform:translateX(-6px)}
.mcat.dx-boop{animation:dxBoop .45s cubic-bezier(.3,1.5,.5,1)}

/* ---------- a dish card sinks a little under your finger ---------- */
.card{transition:transform .2s ease,box-shadow .3s;-webkit-user-select:none;user-select:none}
.card.dx-press{transform:scale(.955)}
.card .tile img.ph{transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.card.dx-press .tile img.ph{transform:scale(1.06)}

/* ---------- the popup grows out of the card (script) ---------- */
.mwrap.open .mclose{animation:dxPop .45s .3s backwards cubic-bezier(.3,1.5,.5,1)}

/* ---------- the sections drawer and the back-to-top button ---------- */
.drawer.open #dlist a{animation:dxIn .45s backwards cubic-bezier(.2,.8,.25,1);animation-delay:calc(.08s + var(--k,0) * 35ms)}
@keyframes dxIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
html[dir="rtl"] .drawer.open #dlist a{animation-name:dxInR}
@keyframes dxInR{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.fab{display:flex!important;transform:scale(0);pointer-events:none;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.fab.show{transform:scale(1);pointer-events:auto}

/* ---------- calm version for phones set to reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #open.dx-play *,.dx-enter *,.mcat.dx-boop,.drawer.open #dlist a,.mwrap.open .mclose,.rail .cat.dx-boop .tilebox,.rail .cat .dxic{animation:none!important}
  #open .big::before{animation:none}
  .rail .cat .tilebox,.rail .cat .lbl,.rail .cat .dxic,.mcat .mcirc,.mcat .mlbl,.dxbar,.card,.card .tile img.ph{transition:none}
}