/* =====================================================================
   GlobeSouq motion layer — loaded after styles.css.
   One easing language everywhere:
   --e-out (soft landing), --e-spring (small overshoot), --e-io (symmetric)
   ===================================================================== */
:root{--e-out:cubic-bezier(.22,1,.36,1);--e-spring:cubic-bezier(.34,1.56,.64,1);--e-io:cubic-bezier(.65,0,.35,1);--gold:#f5b335;--violet:#8b5cf6}

/* ---------- top progress line (any action that talks to the server) ---------- */
#m-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--green));box-shadow:0 0 14px rgba(250,122,53,.55);transition:transform .5s var(--e-out),opacity .35s ease}
#m-progress.on{opacity:1}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .32s var(--e-spring),box-shadow .3s var(--e-out),background-color .2s,border-color .2s,color .2s,opacity .2s}
.btn:active:not(:disabled){transform:scale(.955)!important;transition-duration:.09s}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-primary{background-size:180% 180%;background-image:linear-gradient(120deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 70%,#FDB48D) 45%,var(--accent-strong) 100%);background-position:0% 50%;transition:transform .32s var(--e-spring),box-shadow .3s var(--e-out),background-position .6s var(--e-out)}
.theme-exporter .btn-primary{background-image:linear-gradient(120deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 70%,#7ff0b4) 45%,var(--accent-strong) 100%)}
.btn-primary::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);transform:translateX(-130%);transition:transform .9s var(--e-out)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);background-position:100% 50%;box-shadow:0 18px 34px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-primary:hover:not(:disabled)::before{transform:translateX(130%)}
.btn-quiet:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent-strong);background:color-mix(in srgb,var(--accent-soft) 55%,#fff);transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(23,32,51,.18)}
.btn-danger:hover:not(:disabled){background:var(--red-soft);border-color:#eba5ad;transform:translateY(-1px)}
.m-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:mRipple .65s var(--e-out) forwards;z-index:-1}
.btn-primary .m-ripple,.l-btn-light .m-ripple{background:#fff;opacity:.45}
@keyframes mRipple{to{transform:scale(1);opacity:0}}

/* busy → spinner, done → check, error → shake */
.btn.is-busy,.btn.is-done{opacity:1!important}
.btn.is-busy{pointer-events:none;color:transparent!important}
.btn.is-busy>*{visibility:hidden}
.btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid rgba(23,32,51,.15);border-top-color:var(--accent);animation:mSpin .7s linear infinite}
.btn-primary.is-busy::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes mSpin{to{transform:rotate(360deg)}}
.btn.is-done{pointer-events:none;color:transparent!important}
.btn.is-done>*{visibility:hidden}
.btn.is-done::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:15px;margin:-10px 0 0 -4px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);animation:mTick .45s var(--e-spring) forwards}
.btn-quiet.is-done::after,.btn-danger.is-done::after{border-color:var(--accent)}
@keyframes mTick{to{transform:rotate(45deg) scale(1)}}
.m-shake{animation:mShake .5s var(--e-io)}
@keyframes mShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* landing buttons */
.l-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--e-spring),background .25s,border-color .25s,box-shadow .35s var(--e-out)}
.l-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(250,122,53,.28) 50%,transparent 70%);transform:translateX(-130%);transition:transform 1s var(--e-out)}
.l-btn:hover::before{transform:translateX(130%)}
.l-btn:hover{transform:translateY(-2px)}
.l-btn:active{transform:scale(.96)}

/* ---------- inputs ---------- */
.field input,.field select,.field textarea,.search input,input.input,select.input{transition:border-color .2s,box-shadow .25s var(--e-out),background-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)!important}
.field label{transition:color .2s}
.field:focus-within label{color:var(--accent-strong)}

/* ---------- page entrance ---------- */
.m-in{animation:mRise .7s var(--e-out) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes mRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.m-pop{animation:mPopIn .6s var(--e-spring) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes mPopIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* skeleton shimmer instead of "Loading…" */
.m-skel{display:grid;gap:16px;padding:4px 0}
.m-skel i{display:block;border-radius:16px;background:linear-gradient(100deg,#eef0f5 30%,#f8f9fc 50%,#eef0f5 70%);background-size:300% 100%;animation:mShimmer 1.3s linear infinite}
.m-skel .h{height:30px;width:42%}.m-skel .s{height:14px;width:64%}.m-skel .b{height:150px}
.m-skel .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.m-skel .row3 i{height:180px}
.m-skel.small .b{height:56px}
@keyframes mShimmer{from{background-position:100% 0}to{background-position:-200% 0}}

/* ---------- cards: lift, spotlight, image zoom ---------- */
.listing-card,.tile,.stat,.seller-card{position:relative;transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .3s}
.listing-card{overflow:hidden}
.listing-card::after,.tile::after,.stat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 45%)}
.listing-card:hover::after,.tile:hover::after,.stat:hover::after{opacity:1}
.listing-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -18px rgba(23,32,51,.22);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.stat:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(23,32,51,.2)}
.card-media{overflow:hidden}
.card-img{transition:transform 1.1s var(--e-out)}
.card-img-empty span{display:inline-block;transition:transform .8s var(--e-spring)}
.listing-card:hover .card-img{transform:scale(1.06)}
.listing-card:hover .card-img-empty span{transform:scale(1.18) rotate(-6deg)}
.tile .tile-art>*{transition:transform .8s var(--e-spring)}
.tile:hover .tile-art>*{transform:scale(1.1) rotate(-4deg)}
.listing-card .actions .btn-primary{flex:1 0 100%;order:9}
.listing-card .actions .btn-quiet{flex:1}

/* favourite heart */
.fav{transition:transform .35s var(--e-spring),background .25s,color .25s}
.fav:hover{transform:scale(1.12)}
.fav.m-beat{animation:mBeat .6s var(--e-spring)}
@keyframes mBeat{0%{transform:scale(1)}30%{transform:scale(1.45)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.m-heart{position:fixed;z-index:450;pointer-events:none;font-size:14px;color:var(--pink);animation:mHeartFly .9s var(--e-out) forwards}
@keyframes mHeartFly{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1);opacity:0}}

/* ---------- sidebar navigation: sliding highlight ---------- */
.nav{position:relative}
.nav .m-navpill{position:absolute;left:0;right:0;top:0;height:0;border-radius:12px;background:var(--accent-soft);z-index:0;pointer-events:none;
  transition:transform .55s var(--e-spring),height .4s var(--e-out),opacity .3s;box-shadow:inset 3px 0 0 var(--accent)}
.nav.has-pill button{z-index:1;transition:color .25s,background .2s}
.nav.has-pill button.active{background:transparent}
.nav button .ico{transition:transform .4s var(--e-spring)}
.nav button:hover .ico{transform:translateX(2px) scale(1.15)}
.nav button.active .ico{transform:scale(1.1)}

/* ---------- pop-up windows ---------- */
.modal-backdrop{animation:mVeil .4s var(--e-out) both}
@keyframes mVeil{from{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
.modal{animation:mModal .55s var(--e-spring) both}
@keyframes mModal{from{opacity:0;transform:translateY(28px) scale(.955)}to{opacity:1;transform:none}}
.modal-body>*{animation:mRise .6s var(--e-out) both}
.modal-body>*:nth-child(2){animation-delay:.05s}.modal-body>*:nth-child(3){animation-delay:.1s}.modal-body>*:nth-child(n+4){animation-delay:.15s}
.modal-close{transition:transform .4s var(--e-spring),background .2s,border-color .2s}
.modal-close:hover{transform:rotate(90deg);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.m-ghost{position:fixed;inset:0;z-index:59;pointer-events:none}
.m-ghost .modal-backdrop{animation:mVeilOut .28s ease forwards}
.m-ghost .modal{animation:mModalOut .28s var(--e-io) forwards}
.m-ghost .modal-body>*{animation:none}
@keyframes mVeilOut{to{opacity:0}}
@keyframes mModalOut{to{opacity:0;transform:translateY(16px) scale(.97)}}

/* ---------- messages (toast) ---------- */
#toast{display:flex;align-items:center;gap:10px;overflow:hidden;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(18,24,38,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 20px 50px -12px rgba(10,14,25,.45),inset 0 0 0 1px rgba(255,255,255,.08);transform:translate(-50%,40px) scale(.92);transition:transform .55s var(--e-spring),opacity .3s}
#toast.show{transform:translate(-50%,0) scale(1)}
#toast.error{background:rgba(150,26,40,.92)}
#toast .m-t-ico{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;background:var(--green);color:#fff;transform:scale(0)}
#toast.error .m-t-ico{background:#fff;color:var(--red)}
#toast.show .m-t-ico{animation:mTickPop .5s .12s var(--e-spring) forwards}
@keyframes mTickPop{to{transform:scale(1)}}
#toast .m-t-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.45);transform-origin:0 50%}
#toast.show .m-t-bar{animation:mDrain 3.8s linear forwards}
@keyframes mDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- order tracker ---------- */
.tracker i{position:relative;overflow:hidden}
.tracker i.m-fill::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);animation:mFill .6s var(--e-out) forwards;animation-delay:calc(var(--i,0) * 220ms)}
@keyframes mFill{to{transform:scaleX(1)}}
.tstep.done span{animation:mPopIn .5s var(--e-spring) both;animation-delay:calc(var(--i,0) * 220ms)}
.tstep.now span{animation:mPopIn .5s var(--e-spring) both,mPulse 2.2s 1s ease-out infinite;animation-delay:calc(var(--i,0) * 220ms),1s}
@keyframes mPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- chat ---------- */
.msg.m-new{animation:mMsg .5s var(--e-spring) both}
@keyframes mMsg{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- auth card ---------- */
.auth-card{animation:mModal .7s var(--e-spring) both}
.role-opt{transition:transform .35s var(--e-spring),border-color .2s,box-shadow .3s,background .2s}
.role-opt:hover{transform:translateY(-2px)}
.role-opt.selected{animation:mBeat .5s var(--e-spring)}

/* ---------- big moments (order placed, deal agreed…) ---------- */
#m-canvas{position:fixed;inset:0;z-index:420;pointer-events:none}
.m-moment{position:fixed;inset:0;z-index:410;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.75),rgba(247,248,252,.35) 60%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:mVeil .4s var(--e-out) both}
.m-moment.out{animation:mVeilOut .45s ease forwards}
.m-moment .box{text-align:center;padding:30px 40px;border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 40px 90px -20px rgba(23,32,51,.35),inset 0 0 0 1px rgba(23,32,51,.05);animation:mModal .7s var(--e-spring) both;min-width:min(320px,86vw)}
.m-moment svg{width:84px;height:84px;display:block;margin:0 auto 14px}
.m-moment .ring{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:240;stroke-dashoffset:240;animation:mDraw .7s .15s var(--e-out) forwards;transform-origin:50% 50%;transform:rotate(-90deg)}
.m-moment .tick{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:mDraw .45s .7s var(--e-out) forwards}
.m-moment .halo{fill:color-mix(in srgb,var(--accent) 12%,transparent);transform-origin:50% 50%;animation:mHalo 1.4s .2s var(--e-out) both}
@keyframes mDraw{to{stroke-dashoffset:0}}
@keyframes mHalo{from{transform:scale(.3);opacity:0}50%{opacity:1}to{transform:scale(1);opacity:1}}
.m-moment b{display:block;font-size:24px;letter-spacing:-.6px;animation:mRise .6s .55s var(--e-out) both}
.m-moment p{margin:6px 0 0;color:var(--muted);font-size:14px;animation:mRise .6s .68s var(--e-out) both}

/* ---------- app reveal after sign-in ---------- */
#app.m-reveal{animation:none}

/* ---------- respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}