/* Crispello motion layer.
   Language: things *snap* into place like a crunch (fast out, slight overshoot) and settle.
   Everything here is gated behind html.mo, which motion.js only adds when reduced motion is off. */

:root {
  --snap: cubic-bezier(0.2, 1.25, 0.3, 1);   /* crunch: quick with a small overshoot */
  --glide: cubic-bezier(0.16, 1, 0.3, 1);    /* settle */
}

/* ---------- skip the film (always available, not just with motion) ---------- */
.skip-film {
  position: absolute; z-index: 6; right: var(--gutter); bottom: 70px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px;
  background: rgba(11, 9, 7, 0.55); color: var(--bone); border: 1px solid var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.skip-film i { font-style: normal; color: var(--cheddar); transition: transform 0.4s var(--snap); }
.skip-film:hover { border-color: var(--cheddar); background: rgba(11, 9, 7, 0.8); }
.skip-film:hover i { transform: translateY(3px); }
html[dir="rtl"] .skip-film { direction: rtl; }
.film.is-static .skip-film, html:not(.js) .skip-film { display: none; }
@media (max-width: 820px) {
  .skip-film { top: 72px; bottom: auto; min-height: 38px; padding: 0 12px; font-size: 10px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .skip-film { top: auto; bottom: 46px; }
}

/* ---------- Arabic display lines need air: Cairo has tall ascenders and diacritics ---------- */
html[lang="ar"] :is(.chapter h2, .finale-title, .menu__head h2, .visit__card h2, .reviews__head h2, .story__text h2, .cz__t h2, .cart__head h2, .qr h1, .ad-login__box h1) { line-height: 1.22 !important; }
html[lang="ar"] .hero-title__b { line-height: 1.3; }

/* ---------- intro: ignition (first visit per session) ---------- */
.intro { display: none; }
.mo-intro .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 26px;
  background: var(--ink); cursor: pointer;
  transition: clip-path 0.9s var(--glide);
  clip-path: inset(0 0 0 0);
}
.mo-intro .intro.is-out { clip-path: inset(0 0 100% 0); }
.intro__logo {
  width: 96px; height: 96px; border-radius: 50%; background: #fbf7f0; object-fit: cover;
  animation: introLogo 0.9s var(--snap) both;
}
.intro__bar { position: relative; width: min(220px, 56vw); height: 2px; background: var(--line); overflow: hidden; }
.intro__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cheddar), var(--ketchup)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.35s linear; box-shadow: 0 0 12px rgba(244, 185, 42, 0.7); }
.intro__t { font: 500 10px/1 var(--f-mono); letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); animation: introFade 0.8s 0.3s both; }
@keyframes introLogo { from { transform: scale(0.6) rotate(-20deg); opacity: 0; } }
@keyframes introFade { from { opacity: 0; } }
.mo-intro, .mo-intro body { overflow: hidden; }

/* ---------- hero wordmark: letters snap up after the intro ---------- */
.mo .hero-title__a { display: block; overflow: hidden; padding-block: 0.06em; margin-block: -0.06em; }
.mo .hero-title__a .ch { display: inline-block; transform: translateY(108%); transition: transform 0.9s var(--snap) calc(var(--ci) * 50ms + 80ms); }
.mo.is-loaded .hero-title__a .ch { transform: none; }
.mo .chapter--hero .kicker, .mo .hero-sub { transition: opacity 0.8s 0.55s, transform 0.8s var(--glide) 0.55s; }
.mo:not(.is-loaded) .chapter--hero .kicker, .mo:not(.is-loaded) .hero-sub { opacity: 0; transform: translateY(10px); }

/* ---------- word-by-word reveals through a mask ---------- */
.mo .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.14em 0.08em; margin-block: -0.14em -0.08em; }
.mo .split .wi { display: inline-block; transform: translateY(112%); transition: transform 0.85s var(--snap) calc(var(--wi) * 55ms + var(--wd, 0ms)); }
.mo :is(.reveal.in, .chapter.is-active, .is-in, .is-loaded .chapter--hero) .split .wi,
.mo .reveal.in.split .wi, .mo .is-in.split .wi { transform: none; }
.mo .chapter .split .wi { --wd: 120ms; }
/* the chapter block itself no longer needs to rise; words do the moving */
.mo .chapter h2 { transform: none; }

/* ---------- menu ---------- */
.mo .dish__img img { opacity: 0; transform: scale(1.18); filter: saturate(0.3) brightness(0.55); transition: opacity 0.6s, transform 1.1s var(--glide), filter 1.1s var(--glide); }
.mo .dish__img img.is-ok { opacity: 1; transform: none; filter: none; }
.mo .dish:hover .dish__img img.is-ok { transform: scale(1.08); }
.mo .tab { transition: color 0.3s, border-color 0.3s, background 0.35s var(--glide), transform 0.25s var(--snap); }
.mo .tab:active, .mo .chip:active, .mo .dish__add:active, .mo .qty button:active, .mo .cz__qty button:active { transform: scale(0.93); }
.mo .menu__list { transition: opacity 0.18s; }
.mo .menu__list.is-swapping { opacity: 0; }

/* ---------- marquee leans with scroll speed ---------- */
.mo .marquee span, .mo .marquee i { display: inline-block; transform: skewX(var(--sk, 0deg)); will-change: transform; }

/* ---------- story photo: clip open + parallax ---------- */
.mo .story__img { clip-path: inset(14% 10% 14% 10%); transition: clip-path 1.5s var(--glide); }
.mo .story__img.in { clip-path: inset(0); }
.mo .story__img img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); transition: none; will-change: transform; }

/* ---------- visit card wipes up in cheddar ---------- */
.mo .visit__card { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--glide), transform 1.1s var(--ease), opacity 1.1s var(--ease); }
.mo .visit__card.in { clip-path: inset(0); }
.mo .visit__card h2 .wi { --wd: 380ms; }

/* ---------- footer wordmark: letters rise in ---------- */
.mo .foot__word .ch {
  display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(45%); opacity: 0; transition: transform 1s var(--snap) calc(var(--ci) * 55ms), opacity 0.6s calc(var(--ci) * 55ms), translate 0.35s var(--snap);
}
.mo .foot__word.is-in .ch { transform: none; opacity: 1; }

/* ---------- nav tucks away while reading, returns on scroll up ---------- */
.mo .nav { transition: transform 0.55s var(--glide), background 0.4s, backdrop-filter 0.4s; }
.mo .nav.is-tucked { transform: translateY(-110%); }

/* page progress hairline, only after the film */
.pgbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 56; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.pgbar i { position: absolute; inset: 0; background: var(--cheddar); transform-origin: left; transform: scaleX(var(--pg, 0)); }
html[dir="rtl"] .pgbar i { transform-origin: right; }
.pgbar.is-on { opacity: 1; }

/* ---------- cart feedback ---------- */
.mo [data-open-cart].bump { animation: bump 0.6s var(--snap); }
.mo [data-open-cart].bump em { animation: pop 0.6s var(--snap); }
@keyframes bump { 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(0.95) rotate(4deg); } }
@keyframes pop { 40% { transform: scale(1.6); } }
.mo .cart--enter .cline, .mo .cart--enter .cart__foot, .mo .cart--enter .cart__upsell { animation: lineIn 0.6s var(--glide) both; }
.mo .cart--enter .cline:nth-child(2) { animation-delay: 60ms; }
.mo .cart--enter .cline:nth-child(3) { animation-delay: 120ms; }
.mo .cart--enter .cline:nth-child(n + 4) { animation-delay: 180ms; }
.mo .cart--enter .cart__upsell { animation-delay: 160ms; }
.mo .cart--enter .cart__foot { animation-delay: 220ms; }
@keyframes lineIn { from { opacity: 0; transform: translateX(calc(var(--sx) * 24px)); } }
.mo .chip { transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s var(--snap); }

/* ---------- desktop: cursor ring + magnetic buttons ---------- */
.cur { display: none; }
.mo-fine .cur {
  display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(244, 185, 42, 0.7);
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
  transition: width 0.35s var(--snap), height 0.35s var(--snap), margin 0.35s var(--snap), background 0.3s, border-color 0.3s, opacity 0.3s;
  font: 700 11px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.mo-fine .cur span { opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.3s var(--snap); }
.mo-fine .cur.is-link { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(244, 185, 42, 0.12); }
.mo-fine .cur.is-dish { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--cheddar); border-color: var(--cheddar); }
.mo-fine .cur.is-dish span { opacity: 1; transform: none; }
.mo-fine .cur.is-hidden, .mo-fine.modal-open .cur { opacity: 0; }
.mo-fine .magnet { transition: transform 0.45s var(--snap); }

/* ---------- page-to-page crossfade (home <-> QR) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.3s ease both vtOut; }
::view-transition-new(root) { animation: 0.45s var(--glide) both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .skip-film i { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* hero subtitle waits for the intro too */
.mo:not(.is-loaded) .chapter--hero .split .wi { transform: translateY(112%); }
.mo .hero-title__b .wi { --wd: 520ms; }

/* Latin wordmarks split into letters must stay left-to-right inside Arabic pages */
.hero-title__a, .foot__word { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .hero-title__a { text-align: right; }

/* ---------- phones: keep the film smooth ----------
   Each of these forces extra GPU work on every film frame on a phone:
   a live blur over the moving canvas, a full-screen animated grain layer, and blurred chapter text. */
@media (hover: none), (max-width: 820px) {
  .skip-film { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 9, 7, 0.78); }
  .grain { animation: none; }
  .chapter { filter: none !important; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
  .film__canvas { will-change: contents; }
}
@media (hover: none), (max-width: 820px) {
  /* the grain is a 2x-viewport layer blended over every film frame: too much for many phone GPUs */
  .grain { display: none; }
}