
/* LegendKart motion system — GPU-friendly, respects reduced motion */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.28s;
}
.anim-fade-up{animation:fadeUp .45s var(--ease) both}
.anim-fade{animation:fadeIn .35s ease both}
.anim-scale-in{animation:scaleIn .3s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* Cards */
.card,.auth-panel,.al-card{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(15,23,42,.1);
}
.card .img img{
  transition:transform .4s var(--ease);
}
.card:hover .img img{transform:scale(1.05)}

/* Buttons */
.btn,.auth-submit,.al-btn{
  transition:transform .15s ease,filter .15s ease,box-shadow .2s ease,background .2s ease;
}
.btn:active,.auth-submit:active,.al-btn:active{transform:translateY(1px) scale(.98)}

/* Nav drawer */
.nav{
  transition:max-height .3s var(--ease),opacity .25s ease;
}

/* Sidebar admin */
.side{
  transition:transform .28s var(--ease);
}
.side-backdrop{
  transition:opacity .25s ease;
}

/* Forms */
input,select,textarea{
  transition:border-color .2s ease,box-shadow .2s ease;
}

/* Flash */
.flash,.auth-alert,.al-err,.err,.ok{
  animation:fadeUp .35s var(--ease) both;
}

/* Cart badge pulse */
.cart-badge{
  animation:pop .35s var(--ease);
}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Page content stagger helper */
.stagger > *{animation:fadeUp .4s var(--ease) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.1s}
.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}
.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(n+7){animation-delay:.26s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .card:hover{transform:none}
  .card:hover .img img{transform:none}
}
