/* Animations for card interactions */

.move-out-right {
    animation: moveOutRight 0.5s ease-out forwards;
}

.move-out-left {
    animation: moveOutLeft 0.5s ease-out forwards;
}

@keyframes moveOutRight {
    to {
        transform: translate(150%, 50px) rotate(30deg);
        opacity: 0;
    }
}

@keyframes moveOutLeft {
    to {
        transform: translate(-150%, 50px) rotate(-30deg);
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Feedback flash */
@keyframes flashGreen {
    0% {
        background-color: var(--card-bg);
    }

    50% {
        background-color: rgba(16, 185, 129, 0.2);
    }

    100% {
        background-color: var(--card-bg);
    }
}

@keyframes flashRed {
    0% {
        background-color: var(--card-bg);
    }

    50% {
        background-color: rgba(239, 68, 68, 0.2);
    }

    100% {
        background-color: var(--card-bg);
    }
}.move-out-down {
    animation: moveOutDown 0.5s ease-out forwards;
}

@keyframes moveOutDown {
    to {
        transform: translate(0, 150%) rotate(0deg);
        opacity: 0;
    }
}