/* Animations and Effects */

/* Slide in from left animation - subtle */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply to login container */
.login-container {
    animation: slideInFromLeft 0.5s ease-out;
}

/* Floating animation for cards */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Music notes falling animation */
@keyframes fallAndFade {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    2% {
        opacity: 0.6;
    }
    50% {
        transform: translateY(calc(50vh)) translateX(40px) rotate(180deg) scale(1.1);
        opacity: 0.6;
    }
    98% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) translateX(-40px) rotate(360deg) scale(0.7);
        opacity: 0;
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide up animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}