/* ══════════════════════════════════════════════════════
   CRM Bot Mini App — Animations CSS
   ══════════════════════════════════════════════════════ */

/* Staggered list entrance */
.stagger-in > * {
    opacity: 0;
    transform: translateY(10px);
    animation: staggerFade 0.4s forwards;
}

.stagger-in > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-in > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-in > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-in > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-in > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger-in > *:nth-child(n+9){ animation-delay: 0.45s; }

@keyframes staggerFade {
    to { opacity: 1; transform: translateY(0); }
}

/* Number count up */
.count-up {
    animation: countUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes countUp {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Slide in from right */
.slide-right {
    animation: slideRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideRight {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Bounce in */
.bounce-in {
    animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounceIn {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}

/* Fade scale */
.fade-scale {
    animation: fadeScale 0.25s ease forwards;
}

@keyframes fadeScale {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Success check animation */
.check-anim {
    animation: checkAnim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes checkAnim {
    0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* Shake for errors */
.shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-8px); }
    40%       { transform: translateX(8px); }
    60%       { transform: translateX(-5px); }
    80%       { transform: translateX(5px); }
}

/* Float effect */
.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}