/* ==========================================================================
   Propel Closet — the motion layer. Loaded only by
   "Propel Closet - Customer.html", after propel-brand.css.

   Rules taken from the ui-ux-pro-max skill (motion.csv, ux-guidelines.csv):
   - transform and opacity only, so it stays on the compositor;
   - ease-out (decelerate) on the way in, exits faster than entries;
   - one or two key motions per view, not everything at once;
   - hover lift under 4px, press feedback on every tappable thing;
   - prefers-reduced-motion: every rule here sits inside no-preference, and
     closet-motion.js checks the same query before animating anything.
   ========================================================================== */
:root{
  --m-out: cubic-bezier(.16, 1, .3, 1);        /* arrive: fast then settle */
  --m-back: cubic-bezier(.34, 1.4, .64, 1);    /* a small overshoot, for pops */
  --m-in: cubic-bezier(.4, 0, 1, 1);           /* leave: accelerate away */
}

@media (prefers-reduced-motion: no-preference){

  /* ---- shelf cards: staggered reveal as they scroll into view ---- */
  .m-pre{ opacity:0; transform:translateY(18px) scale(.97); }
  .m-show{ opacity:1; transform:none;
    transition:opacity .42s var(--m-out), transform .55s var(--m-back); }

  /* ---- press feedback: everything you can tap gives under the finger ---- */
  .cta-btn, .hold-btn, .cat, .size, .tab, .like, .qty button, .pbs-card, .card .body{
    transition:transform .16s var(--m-out), background-color .2s ease, box-shadow .25s var(--m-out);
  }
  .cta-btn:active, .hold-btn:active, .cat:active, .size:active,
  .tab:active, .qty button:active, .card .body:active{ transform:scale(.96); }
  .like:active{ transform:scale(.85); }

  /* ---- hover, on devices that have one: lift the card, slow-zoom the art ---- */
  @media (hover:hover) and (pointer:fine){
    .card{ transition:transform .3s var(--m-out), box-shadow .3s var(--m-out); }
    .card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(20,22,40,.14); }
    .card .shot .ga, .card .shot img{ transition:transform .7s var(--m-out); }
    .card:hover .shot .ga, .card:hover .shot img{ transform:scale(1.06); }
    .cta-btn:hover{ box-shadow:0 8px 20px rgba(20,22,40,.18); }
  }

  /* ---- the product page: the photo settles in, the details rise after ---- */
  .m-hero-in{ animation:m-hero .7s var(--m-out) both; }
  @keyframes m-hero{ from{ opacity:0; transform:scale(1.08); } to{ opacity:1; transform:none; } }
  .m-rise{ animation:m-rise .5s var(--m-out) both; }
  @keyframes m-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

  /* ---- cart tab and its count when something lands in it ---- */
  .m-bump{ animation:m-bump .5s var(--m-back); }
  @keyframes m-bump{ 0%{transform:none} 35%{transform:scale(1.18) translateY(-3px)} 100%{transform:none} }
  .m-pop{ animation:m-pop .45s var(--m-back); }
  @keyframes m-pop{ 0%{transform:scale(.4)} 60%{transform:scale(1.35)} 100%{transform:scale(1)} }

  /* ---- the heart ---- */
  .like.m-heart{ animation:m-heart .55s var(--m-back); }
  @keyframes m-heart{ 0%{transform:scale(1)} 30%{transform:scale(.7)} 65%{transform:scale(1.35)} 100%{transform:scale(1)} }

  /* ---- quantity number ticks over ---- */
  .m-tick-up{ animation:m-tick-up .28s var(--m-out); display:inline-block; }
  .m-tick-down{ animation:m-tick-down .28s var(--m-out); display:inline-block; }
  @keyframes m-tick-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  @keyframes m-tick-down{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

  /* ---- a size that is chosen springs into place ---- */
  .size.m-chosen{ animation:m-pop-soft .4s var(--m-back); }
  @keyframes m-pop-soft{ 0%{transform:scale(.9)} 100%{transform:none} }
}

/* ---- flying thumbnail (add to cart) and heart burst: built by the JS ---- */
.m-fly{ position:fixed; z-index:900; pointer-events:none; border-radius:14px; overflow:hidden;
  box-shadow:0 12px 30px rgba(20,22,40,.25); background:#fff; }
.m-fly > *{ width:100%; height:100%; display:block; }
.m-dot{ position:fixed; z-index:901; pointer-events:none; width:7px; height:7px; border-radius:50%;
  background:var(--gold, #C9A44C); }

/* ---- back to top: appears once you are a screen or two down the shelf ---- */
.m-top{ position:fixed; right:14px; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:55;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--pb-line-2, rgba(0,0,0,.12));
  background:var(--pb-surface, #fff); color:var(--pb-ink, #111); font-size:18px; cursor:pointer;
  box-shadow:0 8px 22px rgba(20,22,40,.16);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .25s var(--m-out, ease), transform .3s var(--m-out, ease); }
.m-top.on{ opacity:1; transform:none; pointer-events:auto; }
.m-top:focus-visible{ outline:2px solid var(--pb-ink, #111); outline-offset:3px; }
@media (min-width:821px){ .m-top{ bottom:24px; } }
@media (prefers-reduced-motion: reduce){ .m-top{ transition:none; } }

/* ---- scroll progress hairline under the top bar ---- */
.m-progress{ position:fixed; left:0; right:0; top:0; height:3px; z-index:120; pointer-events:none;
  background:var(--gold, #C9A44C); transform-origin:0 50%; transform:scaleX(0); }

/* ---- membership pop-up: under the 我的 tab, pointing at it ---- */
.m-pop{ position:fixed; z-index:140; background:#fff; color:#111; border:1.5px solid #111;
  padding:22px 22px 24px; box-shadow:0 14px 40px rgba(0,0,0,.16); font-family:'Noto Sans HK', var(--pb-sans, system-ui); }
.m-pop-caret{ position:absolute; top:-11px; width:18px; height:18px; background:#fff;
  border-left:1.5px solid #111; border-top:1.5px solid #111; transform:rotate(45deg); }
.m-pop-t{ font-size:19px; font-weight:900; line-height:1.35; letter-spacing:.02em; }
.m-pop-s{ font-size:14px; line-height:1.65; color:#333; margin-top:8px; }
.m-pop-row{ display:flex; align-items:center; gap:22px; margin-top:20px; flex-wrap:wrap; }
.m-pop-go{ position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:28px;
  min-width:220px; padding:15px 18px; margin:0 5px 5px 0; border:none; border-radius:0; cursor:pointer;
  background:#111; color:#fff; font:800 15px 'Noto Sans HK', var(--pb-sans, system-ui); letter-spacing:.14em;
  transition:transform .16s cubic-bezier(.16,1,.3,1); }
.m-pop-go::after{ content:''; position:absolute; inset:0; z-index:-1; border:1.5px solid #111;
  transform:translate(5px, 5px); transition:transform .16s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.m-pop-go svg{ width:32px; height:14px; flex:none; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.m-pop-go:hover svg{ transform:translateX(5px); }
.m-pop-go:active{ transform:translate(5px, 5px); }
.m-pop-go:active::after{ transform:none; }
.m-pop-x{ border:none; background:none; padding:10px 2px; cursor:pointer; color:#111;
  font:800 15px 'Noto Sans HK', var(--pb-sans, system-ui); text-decoration:underline; text-underline-offset:4px; letter-spacing:.08em; }
.m-pop-go:focus-visible, .m-pop-x:focus-visible{ outline:3px solid #2F5BD3; outline-offset:3px; }
html[data-theme="dark"] .m-pop{ background:#fff; color:#111; }
@media (prefers-reduced-motion: no-preference){
  .m-pop-in{ animation:m-pop-in .32s cubic-bezier(.16,1,.3,1) both; }
  @keyframes m-pop-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce){ .m-pop-go, .m-pop-go::after, .m-pop-go svg{ transition:none; } }

/* ---- the top tabs: on the right, each with room to breathe; the ☰ stays
   top-left. Only where they fit: a narrow phone scrolls the strip sideways,
   and a strip pushed to the right there would hide its first tabs. These
   carry !important because propel-brand.css lays the strip out that way. ---- */
@media (min-width:821px){
  body .topbar.pb-topnav .tabbar{ justify-content:flex-end !important; gap:6px !important; margin-right:14px !important; }
  body .topbar.pb-topnav .tabbar > button{ padding:9px 18px !important; min-width:96px !important;
    justify-content:center; gap:6px; font-size:13px; }
  body .topbar.pb-topnav .tabbar > button .ic{ font-size:15px; }
}

/* ---- show more styles, under the first twelve ---- */
.grid-more{ display:flex; justify-content:center; padding:18px 12px 6px; }
.grid-more[hidden]{ display:none; }
.grid-more .cta-btn{ flex:0 1 auto; min-width:240px; min-height:46px; }