/* Animation styles */

/* Card Animations */
@keyframes cardEntry {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.9);
    }
    50% {
        transform: translateX(10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.card-enter-animation {
    animation: cardSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), glowPulse 0.6s ease;
    animation-fill-mode: both;
    box-shadow: 0 0 20px rgba(187, 134, 252, 0.5), var(--md-sys-elevation-4);
}

@keyframes cardExit {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-100%) scale(0.8);
    }
}

@keyframes cardFlyToTop {
    0% {
        transform: translateY(0) scale(1);
        z-index: 10;
    }
    50% {
        transform: translateY(-50px) scale(1.1);
        z-index: 1000;
    }
    100% {
        transform: translateY(0) scale(1);
        z-index: 1000;
    }
}

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

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

/* Drag Animations */
@keyframes dragStart {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(0.98) rotate(-2deg);
        opacity: 0.8;
    }
}

@keyframes dragEnd {
    0% {
        transform: scale(0.98) rotate(-2deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Removed conflicting dragPulse animation - handled in cards.css */

/* Swipe Animations */
@keyframes swipeLeft {
    to {
        transform: translateX(-100%) rotate(-10deg);
        opacity: 0;
    }
}

@keyframes swipeRight {
    to {
        transform: translateX(100%) rotate(10deg);
        opacity: 0;
    }
}

.swipe-left {
    animation: swipeLeft 0.3s ease forwards;
}

.swipe-right {
    animation: swipeRight 0.3s ease forwards;
}

/* Bounce Animations */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-5px);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Glow Animations */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--md-sys-color-primary),
                    0 0 10px var(--md-sys-color-primary),
                    0 0 15px var(--md-sys-color-primary);
    }
    50% {
        box-shadow: 0 0 10px var(--md-sys-color-primary),
                    0 0 20px var(--md-sys-color-primary),
                    0 0 30px var(--md-sys-color-primary);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Wave Animations */
@keyframes wave {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(10px) translateY(-10px);
    }
    50% {
        transform: translateX(-10px) translateY(10px);
    }
    75% {
        transform: translateX(5px) translateY(-5px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

@keyframes waveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Slide Animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

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

/* Rotate Animations */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes rotateOut {
    from {
        opacity: 1;
        transform: rotate(0deg);
    }
    to {
        opacity: 0;
        transform: rotate(200deg);
    }
}

/* Flip Animations */
@keyframes flipX {
    0% {
        transform: perspective(400px) rotateX(0);
    }
    100% {
        transform: perspective(400px) rotateX(360deg);
    }
}

@keyframes flipY {
    0% {
        transform: perspective(400px) rotateY(0);
    }
    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

@keyframes flipIn {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

/* Zoom Animations */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Utility Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease forwards;
}

.animate-slide-in {
    animation: slideInLeft 0.3s ease forwards;
}

.animate-slide-out {
    animation: slideOutRight 0.3s ease forwards;
}

.animate-bounce {
    animation: bounce 0.5s ease;
}

.animate-shake {
    animation: shake 0.3s ease;
}

.animate-pulse {
    animation: pulse 1s ease infinite;
}

.animate-glow {
    animation: glow 2s ease infinite;
}

.animate-rotate {
    animation: rotate 1s linear infinite;
}

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Animation Durations */
.duration-fast { animation-duration: 200ms; }
.duration-normal { animation-duration: 300ms; }
.duration-slow { animation-duration: 500ms; }
.duration-slower { animation-duration: 1000ms; }