/* Razan Restaurant Menu — fast viewer
   The PDF pages are shown as-is. No page content is styled or recreated here. */

:root{
  --bg:#160e06;
  --skeleton-a:#7a5027;
  --skeleton-b:#a9743c;
  --page-max:720px;
  --gap:6px;

  /* ---- motion system: one set of timings for the whole menu ---- */
  --t-logo:680ms;        /* cover reveal            */
  --t-reveal:620ms;      /* every other page reveal */
  --t-kb:7s;             /* Ken Burns settle        */
  --t-ui:260ms;          /* HUD controls            */
  --t-count:160ms;       /* page-number crossfade   */
  --ease-cine:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:#f3e3cc;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  overflow-x:hidden;
}

/* ---------- pages ---------- */

.menu{
  display:block;
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
}

.page{
  margin:0 0 var(--gap);
  position:relative;
  width:100%;
  /* A4 — locks the box before the image arrives, so CLS stays at 0 */
  aspect-ratio:1200 / 1697;
  background:linear-gradient(160deg,var(--skeleton-a),var(--skeleton-b) 55%,var(--skeleton-a));
  overflow:hidden;
  contain:content;
}

/* Static skeleton in the menu's own gold, so the box is never empty and
   nothing animates (an animated overlay costs layout-shift score). */
.page.is-loaded{background:none}



.page picture{display:block;width:100%;height:100%}

.page img{
  display:block;
  width:100%;
  height:auto;
  /* keeps the original page proportions — never stretched or cropped */
  object-fit:contain;
}

/* ---------- bottom HUD ---------- */

.hud{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:max(12px,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(22,14,6,.82);
  border:1px solid rgba(213,168,105,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:10;
  opacity:.92;
}

.hud-count{
  font-size:13px;
  line-height:1;
  padding:0 8px;
  color:#e8cfa6;
  font-variant-numeric:tabular-nums;
  direction:ltr;
  white-space:nowrap;
  /* wide enough for "17 / 17" so the pill never resizes when the number
     gains a digit — a resizing pill is a real layout shift */
  min-width:68px;
  text-align:center;
}

.hud-btn{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:rgba(213,168,105,.14);
  color:#e8cfa6;
  cursor:pointer;
  padding:0;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.hud-btn:hover{background:rgba(213,168,105,.26)}

.hud-btn:focus-visible{outline:2px solid #e8cfa6;outline-offset:2px}

.hud-btn svg{
  width:19px;height:19px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- footer ---------- */

.foot{
  max-width:var(--page-max);
  margin:0 auto;
  padding:18px 16px calc(64px + env(safe-area-inset-bottom));
  text-align:center;
}

.pdf-btn{
  display:inline-block;
  padding:11px 22px;
  border-radius:999px;
  border:1px solid rgba(213,168,105,.45);
  background:rgba(213,168,105,.1);
  color:#e8cfa6;
  font-size:15px;
  text-decoration:none;
}

.pdf-btn:hover{background:rgba(213,168,105,.2)}

.pdf-btn:focus-visible{outline:2px solid #e8cfa6;outline-offset:2px}

/* ---------- desktop ---------- */

@media (min-width:781px){
  .menu{padding-top:16px}
  .page{box-shadow:0 6px 24px rgba(0,0,0,.45)}
}

/* ---------- no-JS fallback ----------
   (the site CSP blocks inline <style>, so these live here) */

.nojs-menu img{
  display:block;
  width:100%;
  max-width:var(--page-max);
  height:auto;
  margin:0 auto var(--gap);
}


/* ---------- cover light sweep (page 1 only) ----------
   A specular highlight that travels across the gold calligraphy, in the
   same direction as the light beam already in the artwork. It is a separate
   overlay element — the cover image itself is never scaled, moved or recoloured.
   Only transform/opacity animate, so it runs on the compositor and costs no
   layout work. It is switched on by JS after the cover has finished loading,
   so it can never interfere with the first paint. */

.cover-shine{
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-55%;
  width:38%;
  pointer-events:none;
  opacity:0;
  transform:rotate(16deg) translate3d(0,0,0);
  background:linear-gradient(90deg,
    rgba(255,241,208,0)   0%,
    rgba(255,241,208,.07) 35%,
    rgba(255,250,232,.26) 50%,
    rgba(255,241,208,.07) 65%,
    rgba(255,241,208,0)   100%);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

.page.is-lit .cover-shine{
  animation:coverShine 6.5s cubic-bezier(.4,0,.5,1) 1.1s infinite;
}

@keyframes coverShine{
  0%   {transform:rotate(16deg) translate3d(0,0,0);      opacity:0}
  6%   {opacity:1}
  38%  {opacity:1}
  46%  {transform:rotate(16deg) translate3d(330%,0,0);   opacity:0}
  100% {transform:rotate(16deg) translate3d(330%,0,0);   opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .page.is-lit .cover-shine{animation:none}
}


/* ============================================================
   MOTION LAYER
   Nothing below changes the artwork — no colour, no crop, no
   aspect ratio, no order. Every animation runs on `transform`
   and `opacity` only, so it stays on the compositor and never
   triggers layout. Each page animates exactly once.
   ============================================================ */

/* The <picture> carries the reveal, the <img> carries Ken Burns.
   Two layers so the two motions never fight over one transform. */

.page picture{opacity:0}

.page.is-revealed picture{
  animation:pageReveal var(--t-reveal) var(--ease-cine) both;
}

.page.is-first.is-revealed picture{
  /* the cover is the logo — it settles in place instead of sliding up */
  animation:logoReveal var(--t-logo) var(--ease-cine) both;
}

@keyframes pageReveal{
  from{opacity:0; transform:translate3d(0,20px,0) scale(.985)}
  to  {opacity:1; transform:translate3d(0,0,0) scale(1)}
}

@keyframes logoReveal{
  from{opacity:0; transform:scale(.96)}
  to  {opacity:1; transform:scale(1)}
}

/* Ken Burns: a single slow settle from 1.01 to exactly 1.
   It ends at 1, so the page rests at its true size — zero crop.
   Deliberately no `will-change` here: the browser composites an active
   transform on its own, and pinning a hint onto seventeen full-page
   images would hold that much GPU memory for the whole session. */
/* The cover is excluded on purpose. It is the LCP element, and a slow
   scale still running on it when the reader starts scrolling forced a
   re-raster that Chrome scored as a 0.079 layout shift. The cover has
   its own light sweep instead; every other page gets Ken Burns. */
.page.is-revealed:not(.is-first) img{
  animation:kenBurns var(--t-kb) var(--ease-cine) both;
}

@keyframes kenBurns{
  from{transform:scale(1.01)}
  to  {transform:scale(1)}
}

/* Deliberately no `will-change` in this file. An animating transform or
   opacity is composited automatically; pinning a hint onto seventeen
   full-page images either holds GPU memory for the whole session or
   churns layers as pages settle. Measured: with the hint, 0.079 CLS.
   Without it, 0. */

/* Parallax drift is written by JS onto .page as an inline translate3d,
   in whole pixels so nothing ever renders half-sharp — and only on the
   two or three pages near the viewport. Promoting all 17 full-page
   images to their own compositor layer would cost more GPU memory than
   the effect is worth. */

/* ---------- HUD motion ---------- */

#toTop{
  opacity:0;
  transform:scale(.9);
  pointer-events:none;
  transition:opacity var(--t-ui) var(--ease-cine),
             transform var(--t-ui) var(--ease-cine);
}

/* the button keeps its slot at all times, so the pill never
   changes width and the HUD can never shift the layout */
.hud.show-top #toTop{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.hud-count{transition:opacity var(--t-count) linear}
.hud-count.is-changing{opacity:0}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  .page.is-revealed picture,
  .page.is-first.is-revealed picture{
    animation:plainFade 240ms linear both;
  }
  .page.is-revealed img,
  .page.is-revealed:not(.is-first) img{animation:none}
  .page.is-lit .cover-shine{animation:none}
  #toTop{transition:opacity 1ms linear}
}

@keyframes plainFade{from{opacity:0}to{opacity:1}}

/* ---------- no-JS ---------- */
/* <noscript> children only exist when scripting is off, so this
   swaps the lazy-loading gallery for the plain one. */
body:has(.nojs-menu) #menu,
body:has(.nojs-menu) .hud{display:none}