/* assets/css/motion.css - cs-ui v1: small site-wide motion. Everything is off under prefers-reduced-motion. */
/* listing cards: lift + photo zoom (hover devices), press (touch) */
.listing-card{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.listing-card .lc-img{overflow:hidden}
.listing-card .lc-img img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .listing-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(15,23,42,.45)}
  .listing-card:hover .lc-img img{transform:scale(1.05)}
  .see-all{transition:letter-spacing .25s}
  .see-all:hover{letter-spacing:.03em}
}
.listing-card:active{transform:scale(.985)}
/* buttons: tactile press */
.btn,.h-btn,button{transition:transform .12s ease,box-shadow .2s,background-color .2s,color .2s}
.btn:active,.h-btn:active,button:not(:disabled):active{transform:scale(.96)}
/* scroll reveal (class added by motion.js only when IntersectionObserver exists, so nothing is ever left hidden) */
.cs-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.cs-rv.cs-in{opacity:1;transform:none}
/* section heading underline grows in */
.section-head h2.cs-rv:after{transform:scaleX(0);transform-origin:left;transition:transform .7s .2s cubic-bezier(.2,.8,.2,1)}
.section-head h2.cs-rv.cs-in:after{transform:scaleX(1)}
/* cart badge bounce */
@keyframes csBump{0%{transform:scale(1)}30%{transform:scale(1.45)}55%{transform:scale(.9)}80%{transform:scale(1.1)}100%{transform:scale(1)}}
.cs-bump{animation:csBump .6s cubic-bezier(.2,.8,.2,1);display:inline-block}
/* price shimmer when a price first appears */
@keyframes csPriceIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
.cs-in .lc-price{animation:csPriceIn .5s .15s both}
/* images fade in as they load */
img.cs-img{opacity:0;transition:opacity .45s ease}
img.cs-img.cs-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){
  .listing-card,.listing-card .lc-img img,.btn,.h-btn,button,.cs-rv,img.cs-img{transition:none!important}
  .cs-rv,img.cs-img{opacity:1!important;transform:none!important}
  .cs-bump,.cs-in .lc-price{animation:none!important}
  .listing-card:hover,.listing-card:active,.btn:active,.h-btn:active,button:active{transform:none!important}
}