/* ═══════════════════════════════════════════
   MIUIX CONSOLE — Animations
   ═══════════════════════════════════════════ */

/* ── Entry animations ── */
@keyframes mx-slide-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes mx-card-in{
  from{opacity:0;transform:scale(0.96) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes mx-fade-item{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes mx-fade-row{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes mx-bar-grow{
  from{transform:scaleY(0);opacity:0}
  to{transform:scaleY(1);opacity:1}
}
@keyframes mx-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.3)}
}
@keyframes mx-dot-in{
  from{transform:translateX(-50%) scale(0);opacity:0}
  to{transform:translateX(-50%) scale(1);opacity:1}
}
@keyframes mx-ripple{
  to{transform:scale(4);opacity:0}
}
@keyframes mx-shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

/* ── Animation classes ── */
.mx-anim-slide-up{animation:mx-slide-up var(--mx-d3) var(--mx-ease)}
.mx-anim-card-in{animation:mx-card-in var(--mx-d3) var(--mx-ease) both}
.mx-anim-fade-item{animation:mx-fade-item var(--mx-d3) var(--mx-ease) both}
.mx-anim-fade-row{animation:mx-fade-row var(--mx-d3) var(--mx-ease) both}
.mx-anim-bar-grow{
  transform-origin:bottom;
  animation:mx-bar-grow var(--mx-d4) var(--mx-ease) both;
}

/* ── Stagger delays ── */
.mx-delay-0{animation-delay:0ms}
.mx-delay-1{animation-delay:50ms}
.mx-delay-2{animation-delay:100ms}
.mx-delay-3{animation-delay:150ms}
.mx-delay-4{animation-delay:200ms}
.mx-delay-5{animation-delay:250ms}
.mx-delay-6{animation-delay:300ms}
.mx-delay-7{animation-delay:350ms}
.mx-delay-8{animation-delay:400ms}

/* ── Skeleton loading — dual-layer overlay ── */
.mx-skeleton{
  background:
    linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.06) 50%, transparent 75%),
    var(--mx-s3);
  background-size:200% 100%, 100% 100%;
  animation:mx-shimmer 1.5s ease-in-out infinite;
  border-radius:var(--mx-r-sm);
}