:root{
--motion-fast:180ms;
--motion-normal:320ms;
--motion-slow:650ms;
--motion-ease:cubic-bezier(.22,.61,.36,1);
}
.animate-fade,.animate-up,.animate-left,.animate-right,.animate-scale{opacity:0;will-change:transform,opacity}
.animate-up{transform:translateY(24px)}
.animate-left{transform:translateX(-24px)}
.animate-right{transform:translateX(24px)}
.animate-scale{transform:scale(.97)}
.animate-visible{opacity:1;transform:none;transition:opacity var(--motion-slow) var(--motion-ease),transform var(--motion-slow) var(--motion-ease)}
.animate-delay-1{transition-delay:.1s}.animate-delay-2{transition-delay:.2s}.animate-delay-3{transition-delay:.3s}

@media (hover:hover){
.product-card{transition:transform .35s ease}
.product-card:hover{transform:translateY(-3px)}
.product-card img{transition:transform .6s ease,filter .3s ease}
.product-card:hover img{transform:scale(1.03);filter:brightness(1.03)}
button,.button,.btn{transition:transform .2s ease}
button:hover,.button:hover,.btn:hover{transform:translateY(-1px)}
}
button:active,.button:active,.btn:active{transform:translateY(1px) scale(.98)}
@media (prefers-reduced-motion:reduce){
.animate-fade,.animate-up,.animate-left,.animate-right,.animate-scale{opacity:1!important;transform:none!important}
}