/* =========================================================
   El Amir Palace · ordering page MOTION (loads after pedir.css)
   This is a working page: motion is feedback and spatial consistency only.
   No scroll reveals on the menu list (people scan it, they shouldn't wait for it).
   ========================================================= */

/* first view: title, intro and facts arrive in a short stagger (once per visit) */
.intro h1,.intro .lead,.facts li{animation:pIn 600ms var(--ease-out) both}
.intro .lead{animation-delay:70ms}
.facts li:nth-child(1){animation-delay:120ms}.facts li:nth-child(2){animation-delay:170ms}
.facts li:nth-child(3){animation-delay:220ms}.facts li:nth-child(4){animation-delay:270ms}
@keyframes pIn{from{opacity:0;transform:translateY(18px)}}

/* cart sheet / options dialog: iOS-like drawer curve, leaves the way it came */
.sheet,.optdlg{transition:transform 420ms var(--ease-drawer),opacity 240ms var(--ease-out),visibility 0s 420ms}
.sheet.open,.optdlg.open{transition:transform 480ms var(--ease-drawer),opacity 240ms var(--ease-out),visibility 0s}
.scrim{transition:opacity 420ms var(--ease-drawer)}

/* dish photos: tiny lift on hover (fine pointers only) */
.ph{transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.dish:hover .ph{transform:scale(1.06) rotate(-2deg)}}

/* fly-to-cart: a wine dot travels from the + button to the cart (WAAPI in pedir.js) */
.fly{position:fixed;z-index:70;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--wine);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 6px 14px -4px rgba(74,17,25,.6);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .intro h1,.intro .lead,.facts li{animation:pFade 200ms ease both}
  @keyframes pFade{from{opacity:0}}
  .sheet,.optdlg,.sheet.open,.optdlg.open{transition:opacity 200ms ease,visibility 0s}
  .dish:hover .ph{transform:none}
}