/* MOTION-001 (owner 2026-10-18: "micro-animations where possible for a much more polished look").
   One small motion layer for every storefront page, loaded after first paint (AsyncNonCriticalCss list): nothing here
   changes a box's size or position in the flow, only transform-like properties (scale / translate / rotate) and
   opacity, so it cannot cause a layout shift. Defaults use :where() (specificity 0), so a component's own transition
   always wins; presses use the separate `scale` property, which composes with any `transform` a component already
   sets. Everything is off under prefers-reduced-motion. chrome.js adds the state classes (-ipx-bump, -ipx-pop).
   Timing: 120 ms presses, 180 ms colour, 220–280 ms reveals; one ease-out curve. */
@media (prefers-reduced-motion:no-preference){
:root{--ipx-m-ease:cubic-bezier(.2,.8,.2,1);--ipx-m-spring:cubic-bezier(.34,1.56,.64,1)}

/* 1. press feedback: buttons and button-like links sink a little while held */
:where(body.ipx-chrome) :where(button,.action,.ipx-btn,a.ipx-about__btn,a.ipx-home-rv__all,.ipx-chip,.ipx-mchip,.swatch-option){
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,opacity .18s ease,scale .12s var(--ipx-m-ease),translate .2s var(--ipx-m-ease)}
:where(body.ipx-chrome) :where(button,.action,.ipx-btn,a.ipx-about__btn,a.ipx-home-rv__all,.ipx-chip,.ipx-mchip,.swatch-option):active:not(:disabled,[aria-disabled="true"],.disabled){scale:.97}
:where(body.ipx-chrome) :where(.ipx-act,.ipx-compact .ipx-act):active{scale:.94}

/* 2. "go" chevrons at the end of links slide forward on hover / keyboard focus */
:where(body.ipx-chrome) :where(.ipx-i.-end,.ipx-about__link svg:last-child,.ipx-about__more svg:last-child){transition:translate .2s var(--ipx-m-ease)}
:where(body.ipx-chrome) :where(a,button):is(:hover,:focus-visible) :where(.ipx-i.-end),:where(body.ipx-chrome) :where(.ipx-about__link,.ipx-about__more):is(:hover,:focus-visible)>svg:last-child{translate:3px 0}

/* 3. fields: the border and focus ring fade in instead of snapping */
:where(body.ipx-chrome) :where(input:not([type=checkbox],[type=radio],[type=range]),select,textarea){transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}

/* 4. product cards outside the listing (home, product page lists): the photo eases in a little on hover, like the
      listing cards (plp.css already does it there) */
@media (hover:hover) and (pointer:fine){
  :where(body.ipx-chrome) :where(.ipxp-card) img{transition:scale .45s var(--ipx-m-ease)}
  :where(body.ipx-chrome) :where(.ipxp-card):hover img{scale:1.035}
  :where(body.ipx-chrome) :where(.ipx-about__brands a,.ipx-mega__card,.ipx-mega a:has(img)) img{transition:scale .35s var(--ipx-m-ease)}
  :where(body.ipx-chrome) :where(.ipx-about__brands a,.ipx-mega__card,.ipx-mega a:has(img)):hover img{scale:1.04}
}

/* 5. panels that appear (menus, popups, filter cards, opened sections) fade and settle in */
@keyframes ipx-m-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes ipx-m-fade{from{opacity:0}to{opacity:1}}
/* the mega panel scrolls inside itself (overflow-y:auto): sliding its content would overflow it for a moment and flash
   a scrollbar (owner 2026-10-18), so it only fades */
.ipx-nav__item.-open>.ipx-mega.-ready>*{animation:ipx-m-fade .2s ease both}
body.ipx-chrome .ipx-search .amsearch-result-section:not([style*="display: none"]):not([style*="display:none"]){animation:ipx-m-in .22s var(--ipx-m-ease) both}
:where(.filter-options-item.-active) .filter-options-content{animation:ipx-m-fade .2s ease both}
:where(.ipxp-sec.-open) .ipxp-sec__b,:where(details[open])>:not(summary){animation:ipx-m-in .26s var(--ipx-m-ease) both}

/* 6. page messages (added to cart, saved, errors) slide down into place */
:where(.page.messages,.messages) .message:not(.empty){animation:ipx-m-in .3s var(--ipx-m-ease) both}

/* 7. header counters: the cart / wish list count pops when it goes up (chrome.js adds -ipx-bump) */
@keyframes ipx-m-bump{0%{scale:1}35%{scale:1.32}65%{scale:.92}100%{scale:1}}
@keyframes ipx-m-nudge{0%,100%{rotate:0deg}25%{rotate:-9deg}55%{rotate:7deg}80%{rotate:-3deg}}
.-ipx-bump :is([data-ipx-count],.counter.qty){animation:ipx-m-bump .5s var(--ipx-m-ease)}
.-ipx-bump>.ipx-i,.-ipx-bump .minicart-wrapper .action.showcart::before,.-ipx-bump .action.showcart>.ipx-i{animation:ipx-m-nudge .55s ease}

/* 8. wish-list hearts pop when tapped (chrome.js adds -ipx-pop) */
@keyframes ipx-m-pop{0%{scale:1}30%{scale:.8}60%{scale:1.22}100%{scale:1}}
.-ipx-pop{animation:ipx-m-pop .42s var(--ipx-m-spring)}


/* 9. trust / promise icons lift a little on hover */
@media (hover:hover) and (pointer:fine){
  :where(body.ipx-chrome) :where(.ipx-about__ico,.ipx-promise__ico){transition:translate .25s var(--ipx-m-ease)}
  :where(body.ipx-chrome) :where(.ipx-about__expect li,.ipx-promise__i):hover :where(.ipx-about__ico,.ipx-promise__ico){translate:0 -2px}
}

/* 10. the Add to Cart button that was pressed confirms the add (chrome.js adds -ipx-added on Magento's
       ajax:addToCart); the header cart count pops once the mini cart that opens on top of it closes */
@keyframes ipx-m-added{0%{scale:1;box-shadow:0 0 0 0 rgba(82,115,22,.45)}30%{scale:.95}65%{scale:1.03}100%{scale:1;box-shadow:0 0 0 12px rgba(82,115,22,0)}}
.action.tocart.-ipx-added,.ipxp-card__atc.-ipx-added{animation:ipx-m-added .7s var(--ipx-m-ease)}
}