/* Motion layer. Compositor-only (transform/opacity), inert unless assets/js/motion-reveal.js adds .js-motion. */
:root{--m-ease:cubic-bezier(.33,1,.68,1)}
.js-motion .product,.js-motion .promo,.js-motion .mix-category{transition:transform .18s var(--m-ease),box-shadow .2s,border-color .2s,opacity .3s var(--m-ease) var(--m-d,0ms)}
.js-motion .product:hover,.js-motion .promo:hover,.js-motion .mix-category:hover{transform:translateY(-3px)}
.js-motion [data-reveal=group],.js-motion [data-reveal=block]{transform:translateY(14px)}
.js-motion [data-reveal=group].is-revealed,.js-motion [data-reveal=block].is-revealed{opacity:1;transform:none;transition:transform .38s var(--m-ease),opacity .38s var(--m-ease)}
.js-motion [data-reveal=block]{opacity:0}
.js-motion [data-reveal] .product,.js-motion [data-reveal] .promo{opacity:0}
.js-motion [data-reveal].is-revealed .product,.js-motion [data-reveal].is-revealed .promo{opacity:1}
.js-motion [data-reveal] .product:nth-child(2),.js-motion [data-reveal] .promo:nth-child(2){--m-d:35ms}
.js-motion [data-reveal] .product:nth-child(3),.js-motion [data-reveal] .promo:nth-child(3){--m-d:70ms}
.js-motion [data-reveal] .product:nth-child(4),.js-motion [data-reveal] .promo:nth-child(4){--m-d:105ms}
.js-motion [data-reveal] .product:nth-child(5),.js-motion [data-reveal] .promo:nth-child(5){--m-d:140ms}
.js-motion [data-reveal] .product:nth-child(n+6),.js-motion [data-reveal] .promo:nth-child(n+6){--m-d:175ms}
.js-motion .banner-slide:not([hidden]):not(.active){animation:motion-slide .45s var(--m-ease) both}
@keyframes motion-slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js-motion .product,.js-motion .promo,.js-motion .mix-category{transition:none}
  .js-motion [data-reveal],.js-motion [data-reveal].is-revealed{transform:none;opacity:1}
  .js-motion [data-reveal] .product,.js-motion [data-reveal] .promo{opacity:1}
  .js-motion .banner-slide:not([hidden]):not(.active){animation:none}
}