/* El Amir Palace · motion layer X (driven by motion-x.js; .mx / .mx-fine are set on <html> only when it runs).
   To revert: delete this file + motion-x.js and their two tags in index.html, en/, ar/. */

/* section-label gold rules draw outwards from the label */
.mx .sec-label::after,.mx .sec-label::before{transform:scaleX(0);transition:transform 1.6s var(--ease-out) .15s}
.mx .sec-label::after{transform-origin:left}
.mx .sec-label::before{transform-origin:right}
.mx[dir=rtl] .sec-label::after{transform-origin:right}
.mx[dir=rtl] .sec-label::before{transform-origin:left}
.mx .sec-label.mx-on::after,.mx .sec-label.mx-on::before{transform:none}

/* tilt: JS owns the card transform (lift + 3D), CSS keeps the rest */
.mx-fine .card{transition:none}
.mx-fine .card:hover,.mx-fine .rcard:hover{transform:none}
.mx-fine .rcard{transition:box-shadow .8s var(--ease-out)}
.mx-fine .card,.mx-fine .dish > a,.mx-fine .rcard{transform-style:preserve-3d;will-change:transform}

/* cursor ring (desktop only) */
.mx-cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;opacity:0;transition:opacity .4s ease}
.mx-cursor.is-on{opacity:1}
.mx-cursor i{display:block;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1px solid var(--wine);background:var(--wine);
  transform:scale(.16);transition:transform .6s var(--ease-out),background-color .4s ease,border-color .4s ease}
.mx-cursor.is-big i{transform:scale(.8);background-color:transparent}
.mx-cursor.is-img i{transform:scale(1.5);background-color:rgba(122,31,43,.12);border-color:rgba(255,255,255,.7)}
.mx-cursor.is-light i{border-color:var(--cream);background-color:var(--cream)}
.mx-cursor.is-light.is-big i{background-color:transparent}
.mx-cursor.is-down i{transform:scale(.6)}

/* page-to-page transition: burgundy wipe, see assets/v8/transition.css */

/* curtain (motion-x.js): frame clips open from the bottom while the photo settles from 1.25; a CSS transition so the browser runs it, not a per-frame JS tween.
   Easings match GSAP expo.out / expo.inOut. Classes are removed when it ends. */
.mx-cur{clip-path:inset(100% 0% 0% 0% round var(--mx-r,0px))}
.mx-cur.mx-open{clip-path:inset(0% 0% 0% 0% round var(--mx-r,0px));transition:clip-path var(--mx-d) var(--mx-dl)}
.mx-cur.mx-fast{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.mx-cur.mx-slow{transition-timing-function:cubic-bezier(.87,0,.13,1)}
.mx-pic{scale:1.25}
.mx-pic.mx-pic-on{scale:1;transition:scale var(--mx-pd) cubic-bezier(.16,1,.3,1) var(--mx-pdl)}
/* sliding curtain for menu cards and dishes: window rises, photo counter-moves (own wrappers, GSAP never sees the translate) */
.mx-w{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.mx-c{position:absolute;inset:0}
.mx-slide .mx-w{translate:0 100%}
.mx-slide .mx-c{translate:0 -100%}
.mx-slide.mx-open .mx-w,.mx-slide.mx-open .mx-c{translate:0 0;transition:translate var(--mx-d) cubic-bezier(.16,1,.3,1) var(--mx-dl)}
/* warm-up (motion-x.js): uncovered while still a screen below the view so the photo is drawn ahead, covered again before it shows */
.mx-cur.mx-warm{clip-path:none}
.mx-slide.mx-warm .mx-w,.mx-slide.mx-warm .mx-c{translate:none}
/* touch screens: the sliding curtain layers exist before the reveal, so the photos are not turned into layers in the frame it starts */
@media (hover:none){.mx-slide .mx-w,.mx-slide .mx-c{will-change:translate}}
/* phones: intro and story photos slide (motion-x.js) with their slow easing; their gold corners (decor.css) ride inside the window,
   so they are uncovered with the photo as the clip did, and hand back to the frame's own corners when the classes go */
.mx-slide.mx-slow .mx-w,.mx-slide.mx-slow .mx-c{transition-timing-function:cubic-bezier(.87,0,.13,1)}
.mx-slide.intro-img::after,.mx-slide.story-photo::after{content:none}
/* phones: the section-label gold rules are simply there, no draw-out (owner's call; motion-x.js skips them too) */
@media (max-width:599px){.mx .sec-label::after,.mx .sec-label::before{transform:none;transition:none}}