/* ===== USC Inventory — Shared Animations ===== */

/* Entrances */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
@keyframes bounceIn   { 0%{opacity:0;transform:scale(.5)} 65%{transform:scale(1.07)} 80%{transform:scale(.97)} 100%{opacity:1;transform:scale(1)} }
@keyframes slideUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* Exits */
@keyframes fadeOutUp    { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-14px)} }
@keyframes shrinkOut    { from{opacity:1;max-height:200px;transform:scaleY(1)} to{opacity:0;max-height:0;transform:scaleY(0);margin:0;padding:0} }
@keyframes slideOutRight{ from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(30px)} }

/* Feedback */
@keyframes flashGreen  { 0%{background:transparent} 40%{background:rgba(22,163,74,.12)} 100%{background:transparent} }
@keyframes flashRed    { 0%{background:transparent} 40%{background:rgba(239,68,68,.12)} 100%{background:transparent} }
@keyframes flashBlue   { 0%{background:transparent} 40%{background:rgba(59,130,246,.1)} 100%{background:transparent} }
@keyframes shake       { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes pulse-ring  { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.6);opacity:0} }
@keyframes highlight   { 0%{background:transparent} 30%{background:rgba(22,163,74,.15)} 100%{background:transparent} }

/* Looping */
@keyframes spin-slow   { to{transform:rotate(360deg)} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes dot-bounce  { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

/* Utility classes */
.anim-fadeInUp   { animation:fadeInUp .3s cubic-bezier(.16,1,.3,1) both; }
.anim-fadeInDown { animation:fadeInDown .3s cubic-bezier(.16,1,.3,1) both; }
.anim-scaleIn    { animation:scaleIn .3s cubic-bezier(.16,1,.3,1) both; }
.anim-bounceIn   { animation:bounceIn .5s cubic-bezier(.16,1,.3,1) both; }
.anim-slideUp    { animation:slideUp .35s cubic-bezier(.16,1,.3,1) both; }
.anim-shake      { animation:shake .4s ease; }
.anim-flashGreen { animation:flashGreen .6s ease; }
.anim-flashRed   { animation:flashRed .6s ease; }
.anim-highlight  { animation:highlight .8s ease; }

/* Stagger helpers */
.stagger-1{animation-delay:0ms}
.stagger-2{animation-delay:60ms}
.stagger-3{animation-delay:120ms}
.stagger-4{animation-delay:180ms}
.stagger-5{animation-delay:240ms}
.stagger-6{animation-delay:300ms}
.stagger-7{animation-delay:360ms}
.stagger-8{animation-delay:420ms}

/* Button ripple */
.btn-ripple { position:relative; overflow:hidden; }
.btn-ripple::after {
    content:''; position:absolute; border-radius:50%;
    width:5px; height:5px; top:var(--y,50%); left:var(--x,50%);
    transform:scale(0) translate(-50%,-50%);
    background:rgba(255,255,255,.35);
    transition:transform .5s, opacity .5s;
}
.btn-ripple:active::after { transform:scale(60) translate(-50%,-50%); opacity:0; transition:0s; }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* Number count-up */
.num-anim { animation:fadeInUp .4s ease both; }

/* Card hover lift */
.card-hover { transition:transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* ===== Page-load entry animations ===== */
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInDown2 { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp2    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.page-sidebar { animation:slideInLeft .5s cubic-bezier(.16,1,.3,1) both; }
.page-header  { animation:slideInDown2 .45s cubic-bezier(.16,1,.3,1) both; }
.page-main    { animation:fadeInUp2 .5s cubic-bezier(.16,1,.3,1) both; animation-delay:.12s; }

/* Sidebar nav item stagger */
.nav-anim   { animation:slideInLeft .4s cubic-bezier(.16,1,.3,1) both; }
.nav-anim-1 { animation-delay:.07s; }
.nav-anim-2 { animation-delay:.14s; }
.nav-anim-3 { animation-delay:.21s; }
.nav-anim-4 { animation-delay:.28s; }
.nav-anim-5 { animation-delay:.35s; }

/* Stat card stagger */
.stat-anim   { animation:fadeInUp2 .5s cubic-bezier(.16,1,.3,1) both; }
.stat-anim-1 { animation-delay:.1s; }
.stat-anim-2 { animation-delay:.18s; }
.stat-anim-3 { animation-delay:.26s; }
.stat-anim-4 { animation-delay:.34s; }

/* Form step / card */
.form-anim   { animation:fadeInUp2 .6s cubic-bezier(.16,1,.3,1) both; animation-delay:.15s; }