@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes marquee{0%{transform:translateX(100vw)}100%{transform:translateX(-100%);}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.4)}70%{box-shadow:0 0 0 10px rgba(255,107,53,0)}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.page-loading{animation:fadeIn .5s ease}
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.hero-badge{animation:float 3s ease-in-out infinite}
.cat-card:hover .cat-icon{animation:bounce .5s ease}
.cart-shake{animation:shake .4s ease}
.marquee-text{animation:marquee 18s linear infinite}
.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);animation:ripple .6s ease-out;pointer-events:none}
.stat-num.counting{animation:countUp .3s ease}
.cart-badge.pulse{animation:pulse .5s ease}
img.lazy{opacity:0;transition:opacity .5s ease}
img.lazy.loaded{opacity:1}
.product-card{animation:fadeUp .5s ease both}
.product-card:nth-child(1){animation-delay:.05s}
.product-card:nth-child(2){animation-delay:.1s}
.product-card:nth-child(3){animation-delay:.15s}
.product-card:nth-child(4){animation-delay:.2s}
.product-card:nth-child(5){animation-delay:.25s}
.product-card:nth-child(6){animation-delay:.3s}
.hero-visual{animation:float 4s ease-in-out infinite}
.mobile-drawer{animation:none}
.mobile-drawer.open{animation:slideIn .3s ease}
.loading-spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}