@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}
.animate-fade-in { 
    animation: fade-in 0.3s ease-out; 
}
.animate-shake { 
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; 
}

@keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-down {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(20px); opacity: 0; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes reveal-down {
    from { opacity: 0; transform: translateY(-10px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 500px; }
}

.animate-slide-up { animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-down { animation: slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-reveal-down { animation: reveal-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; overflow: hidden; }
.animate-fade-out { animation: fade-out 0.3s ease-out forwards; }

@keyframes draw {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

@keyframes point-scale {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 1.5s ease-out forwards;
}

.chart-point {
    transform-origin: center;
    animation: point-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}