/* =========================================================
   My Store — motion layer (pairs with store-motion.js)

   Inspired by the "fashion app" reference video:
   1) Tab bars have ONE indicator that glides between the buttons
      (Best Selling / New / Featured, the category chips, the sidebar list, the bottom nav pill)
   2) Switching a tab / category / sort: the cards blur-and-slide out, the new ones blur-in, staggered
      — and they travel in the direction of the tab you tapped
   3) Tapping a product: the other cards fade away and the photo FLIES into the product page
   4) Every page enters and leaves softly instead of flashing
   5) The filter panel slides in and out like a sheet

   Everything sits inside prefers-reduced-motion: no-preference (the JS bails out too), and each
   keyframe only declares its "from" / "to" state so nothing here fights the site's own styles.
   ========================================================= */

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

  /* ---------- keyframes ---------- */
  @keyframes pmPageIn   { from{ opacity:0; transform:translateY(16px); } }
  @keyframes pmPageOut  { to{ opacity:0; transform:translateY(-10px); } }
  @keyframes pmFadeOut  { to{ opacity:0; } }
  @keyframes pmCardIn   { from{ opacity:0; transform:translate3d(var(--pm-dx,0px),24px,0) scale(.965); filter:blur(8px); } }
  @keyframes pmCardRise { from{ opacity:0; transform:translate3d(0,26px,0); } }
  @keyframes pmCardOut  { to{ opacity:0; transform:translate3d(calc(var(--pm-dx,0px) * -.7),-10px,0) scale(.97); filter:blur(6px); } }
  @keyframes pmBnIn     { from{ transform:translateY(170%); opacity:0; } }
  @keyframes pmSheetIn  { from{ transform:translateX(100%); } }
  @keyframes pmSheetOut { to{ transform:translateX(100%); } }
  @keyframes pmSheetRow { from{ opacity:0; transform:translateY(14px); } }
  @keyframes pmFlyHide  { from{ opacity:0; } }              /* holds 0 for the whole duration, then the element is back — a built-in failsafe */

  /* ---------- 1) sliding indicators ---------- */
  .pm-ind{
    position:absolute; left:0; top:0; z-index:0; pointer-events:none;
    will-change:transform,width;
    transition:
      transform .55s cubic-bezier(.3,1.2,.45,1),
      width     .55s cubic-bezier(.3,1.2,.45,1),
      height    .55s cubic-bezier(.3,1.2,.45,1),
      opacity   .2s ease;
  }
  .pm-ind.pm-noanim{ transition:none; }

  /* underline under the tab row */
  .pm-ind--line{ top:auto; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--accent); }
  html .pm-sl .shop-tab.active::after{ content:none; }
  html .pm-sl .shop-tab{ transition:color .25s, transform .2s cubic-bezier(.3,1.4,.4,1); }
  html .pm-sl .shop-tab:active{ transform:scale(.95); }

  /* pill behind the active category chip */
  .pm-ind--chip{ border-radius:100px; background:var(--ink); }
  html .pm-sl .mobile-chip{ position:relative; z-index:1; transition:color .25s, border-color .25s, background-color .25s, transform .2s cubic-bezier(.3,1.4,.4,1); }
  html .pm-sl .mobile-chip.active{ background:transparent; border-color:transparent; }
  html .pm-sl .mobile-chip:active{ transform:scale(.94); }

  /* highlight behind the active row of the category list (desktop sidebar) */
  .pm-ind--row{ border-radius:9px; background:var(--ink); }
  html .pm-sl .cat-list-item{ position:relative; z-index:1; transition:color .25s, background-color .2s, border-color .25s; }
  html .pm-sl .cat-list-item.active{ background:transparent; border-color:transparent; }

  /* dark mode: the site's own active style is "page-colour fill + white outline" */
  [data-theme="dark"] .pm-ind--chip,
  [data-theme="dark"] .pm-ind--row{ background:var(--bg); box-shadow:inset 0 0 0 1px var(--ink); }

  /* bottom navigation: the orange pill travels, the icons stay put */
  .pm-ind--bn{
    border-radius:100px; background:var(--ui-orange,#E8590C);
    box-shadow:0 8px 18px -8px var(--ui-glow,rgba(232,89,12,.55));
  }
  html .pm-sl .bn-item{ z-index:1; }
  html .pm-sl .bn-item.active{ background:transparent; box-shadow:none; }
  html .pm-sl.pm-has-temp .bn-item.active:not(.pm-temp){ color:rgba(13,13,13,.68); }
  html .pm-sl .bn-item.pm-temp{ color:#fff; }
  [data-theme="dark"] .pm-sl.pm-has-temp .bn-item.active:not(.pm-temp){ color:rgba(255,255,255,.72); }
  [data-theme="dark"] .pm-sl .bn-item.pm-temp{ color:#fff; }

  /* a bar that inherits the pill from the previous page: keep the label dim until the pill has arrived */
  html .pm-sl.pm-await .bn-item.active{ color:rgba(13,13,13,.68); }
  [data-theme="dark"] .pm-sl.pm-await .bn-item.active{ color:rgba(255,255,255,.72); }

  @media (max-width:900px){
    .bn{ animation:pmBnIn .75s cubic-bezier(.22,1.15,.36,1) .15s backwards; }
  }

  /* ---------- 2) product cards: staggered blur-in / blur-out ---------- */
  /* The page's own rule pinned every card to its last keyframe forever (fill-mode "both"), which also
     blocked the hover lift. The entrance below replaces it. */
  .products-grid .product-card{ animation:none; }

  .products-grid .product-card.pm-in{
    animation:pmCardIn .62s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay:calc(var(--pm-i,0) * 48ms);
  }
  .products-grid .product-card.pm-wait{ opacity:0; }
  .products-grid .product-card.pm-rise{
    animation:pmCardRise .6s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay:calc(var(--pm-i,0) * 60ms);
  }
  .products-grid.pm-out .product-card.pm-vis{
    animation:pmCardOut .24s cubic-bezier(.5,0,.9,.4) both;
    animation-delay:calc(var(--pm-i,0) * 22ms);
  }
  .products-grid .empty-msg{ animation:pmCardRise .5s cubic-bezier(.2,.8,.2,1) backwards; }

  /* ---------- 3) page enter / leave ---------- */
  /* category-style listing pages (shop, shop-category, category): the sections rise in one after another */
  body:has(#catList) > section{ animation:pmPageIn .6s cubic-bezier(.2,.8,.2,1) backwards; }
  body:has(#catList) > section:nth-of-type(2){ animation-delay:.07s; }
  body:has(#catList) > section:nth-of-type(3){ animation-delay:.14s; }

  /* leaving through a link */
  html.pm-leaving body > section,
  html.pm-leaving body > main,
  html.pm-leaving body > footer{
    animation:pmPageOut .24s cubic-bezier(.5,0,.9,.4) both !important;
  }

  /* leaving through a product card: the card itself stays put (the photo continues on the next page) */
  html.pm-going-product .products-grid .product-card:not(.pm-picked).pm-vis{
    animation:pmCardOut .24s cubic-bezier(.5,0,.9,.4) both;
    animation-delay:calc(var(--pm-i,0) * 16ms);
  }
  html.pm-going-product .shop-tabs,
  html.pm-going-product .mobile-cat-bar,
  html.pm-going-product .shop-toolbar,
  html.pm-going-product .active-filters,
  html.pm-going-product .shop-sidebar,
  html.pm-going-product .cat-hero,
  html.pm-going-product footer{ animation:pmFadeOut .24s ease-in both; }

  /* ---------- 4) photo flies from the card into the product page ---------- */
  .pm-flybox{
    position:fixed; z-index:9990; margin:0; overflow:hidden; pointer-events:none;
    will-change:left,top,width,height;
    box-shadow:0 26px 50px -26px rgba(0,0,0,.4);
  }
  .pm-flybox img{ display:block; width:100%; height:100%; box-sizing:border-box; object-fit:contain; }

  /* while it flies, the real photo (and its panel) wait quietly — 3s is the failsafe if the script never lands */
  html.pm-fly .product-media{ animation:pmFlyHide 3s steps(1,end) both; }
  /* the page's own entrance for the photo column would replay once the flight ends — the flight replaces it */
  html.pm-fly .product-grid > div:first-child,
  html.pm-flew .product-grid > div:first-child{ animation:none; }

  /* ---------- 5) filter panel = sheet ---------- */
  @media (max-width:980px){
    .shop-sidebar.mobile-open{ animation:pmSheetIn .45s cubic-bezier(.22,1,.36,1) backwards; }
    .shop-sidebar.mobile-open.pm-sheet-out{ animation:pmSheetOut .26s cubic-bezier(.5,0,.9,.4) both; }
    .filter-overlay{ transition:opacity .3s ease; }
    .filter-overlay.active{ -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
    .filter-overlay.pm-sheet-out{ opacity:0; }

    .shop-sidebar.mobile-open .sidebar-body > *{
      animation:pmSheetRow .5s cubic-bezier(.2,.8,.2,1) backwards;
      animation-delay:calc(var(--pm-si,0) * 45ms + 140ms);
    }
    .shop-sidebar .sidebar-body > :nth-child(1){ --pm-si:0; }
    .shop-sidebar .sidebar-body > :nth-child(2){ --pm-si:1; }
    .shop-sidebar .sidebar-body > :nth-child(3){ --pm-si:2; }
    .shop-sidebar .sidebar-body > :nth-child(4){ --pm-si:3; }
    .shop-sidebar .sidebar-body > :nth-child(5){ --pm-si:4; }
    .shop-sidebar .sidebar-body > :nth-child(6){ --pm-si:5; }
    .shop-sidebar .sidebar-body > :nth-child(n+7){ --pm-si:6; }
  }
}