/* AL MALAKY — motion layer (storefront only).
   Adds movement on top of the existing design without changing colours, fonts or layout.
   Only opacity/transform are animated (smooth on phones). Everything is switched off for
   visitors who ask their phone for reduced motion. Remove this file + motion.js to undo. */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-fast:.14s;--m-mid:.32s;--m-slow:.7s}

/* 1) Products rise into view while scrolling (motion.js adds .m-card, then .m-in when visible) */
.card.m-card{opacity:0;transform:translateY(22px) scale(.98);transition:opacity var(--m-slow) var(--m-ease),transform var(--m-slow) var(--m-ease)}
.card.m-card.m-in{opacity:1;transform:none}
.card.m-card.m-done{transition:transform .15s var(--m-ease)} /* after arriving, hover/tap react quickly again */
.card.m-card.m-in:hover{transform:translateY(-2px)}
.card.m-card.m-in:active{transform:scale(.985)}

/* 2) Product pictures fade in softly once loaded, and zoom gently on hover (desktop) */
img.m-img{opacity:0;transform:scale(1.04);transition:opacity .6s var(--m-ease),transform .9s var(--m-ease)}
img.m-img.m-loaded{opacity:1;transform:none}
@media(hover:hover){.card .thumb img.m-img.m-loaded{transition:opacity .6s var(--m-ease),transform .6s var(--m-ease)}
  .card:hover .thumb img.m-img.m-loaded{transform:scale(1.05)}}

/* 3) Press feedback on every tappable icon/button */
.icnbtn,.quickadd,.mini,.catbubble-circle,.pdp-arrow{transition:background .2s,border-color .2s,color .2s,transform var(--m-fast) var(--m-ease)}
.btn{transition:opacity .2s,transform var(--m-fast) var(--m-ease)}
.icnbtn:active,.quickadd:active,.mini:active,.btn:active,.catbubble:active .catbubble-circle,.pdp-arrow:active{transform:scale(.92)}
.card:active{transform:scale(.985)}

/* 4) Add to cart: a small copy of the product flies to the cart, then the cart answers */
.m-fly{position:fixed;z-index:200;pointer-events:none;border-radius:50%;overflow:hidden;background:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.m-fly img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes mBadgePop{0%{transform:scale(1)}35%{transform:scale(1.45)}65%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes mCartNudge{0%,100%{transform:none}30%{transform:scale(1.12) rotate(-8deg)}60%{transform:scale(.96) rotate(5deg)}}
.badge.m-pop{animation:mBadgePop .5s var(--m-ease)}
.icnbtn.m-nudge{animation:mCartNudge .5s var(--m-ease)}
@keyframes mAdded{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.quickadd.m-added,.btn.m-added{animation:mAdded .6s var(--m-ease)}

/* 5) Windows, dim background and messages appear smoothly instead of instantly */
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.overlay.show{animation:mFade var(--m-mid) var(--m-ease)}
.modal-c.show .modal{animation:mPop .38s var(--m-ease)}
.toast{transform:translate(-50%,10px);transition:opacity .25s,transform .35s var(--m-ease)}
.toast.show{transform:translate(-50%,0)}
.drawer{transition:transform .42s var(--m-ease)}

/* 6) Opening: the headline, text and buttons of the top section arrive one after another */
@keyframes mRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-in>div:first-child>*{animation:mRise .8s var(--m-ease) both}
.hero-in>div:first-child>*:nth-child(2){animation-delay:.12s}
.hero-in>div:first-child>*:nth-child(3){animation-delay:.24s}
.hero-art{animation:mFade 1s var(--m-ease) .2s both}

/* 7) Moving between pages (shop / product) fades the new page in; gallery pictures cross-fade */
.m-page-in{animation:mRise .45s var(--m-ease)}
.catbubble.m-in-bubble{animation:mRise .45s var(--m-ease) both}

@media(prefers-reduced-motion:reduce){
  .card.m-card,img.m-img{opacity:1;transform:none;transition:none}
  .overlay.show,.modal-c.show .modal,.hero-in>div:first-child>*,.hero-art,.m-page-in,.catbubble.m-in-bubble,.badge.m-pop,.icnbtn.m-nudge,.quickadd.m-added,.btn.m-added{animation:none}
  .icnbtn:active,.quickadd:active,.mini:active,.btn:active,.catbubble:active .catbubble-circle,.pdp-arrow:active,.card:active{transform:none}
  .toast,.drawer{transition:opacity .2s}
  .m-fly{display:none}
}