/*
   🔹 Fade In / Fade Out */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

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

@keyframes fadeOut {
    0% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 0;
        filter: blur(8px);
    }
}

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

/*
   🔹 Slide Up / Slide Down */
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.animate-slide-right {
    animation: slideRight 0.8s ease-out forwards;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-40px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.animate-slide-down {
    animation: slideDown 0.8s ease-out forwards;
}

/*
   🔹 Zoom In / Zoom Out */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.animate-zoom-in {
    animation: zoomIn 0.6s ease-out forwards;
}

@keyframes zoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.8);
        filter: blur(10px);
    }
}

.animate-zoom-out {
    animation: zoomOut 0.6s ease-in forwards;
}

/*
   🔹 Fade Left / Fade Right */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.animate-fade-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.animate-fade-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

/*
   🔹 Scale In / Scale Out */
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(12px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.animate-scale-in {
    animation: scaleIn 0.7s ease-out forwards;
}

@keyframes scaleOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(12px);
    }
}

.animate-scale-out {
    animation: scaleOut 0.7s ease-in forwards;
}

/*
   🔹 Rotate In / Rotate Out */
@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0);
    }
}

.animate-rotate-in {
    animation: rotateIn 0.8s ease-out forwards;
}

@keyframes rotateOut {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: rotate(10deg) scale(0.9);
        filter: blur(8px);
    }
}

.animate-rotate-out {
    animation: rotateOut 0.8s ease-in forwards;
}

/* ===========================
   🔹 Bouncy Animations
=========================== */

/* 🔹 Bounce In (Vertical) */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
        filter: blur(6px);
    }

    60% {
        opacity: 1;
        transform: translateY(5px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


.animate-bounce-in {
    animation: bounceIn 1s ease-out forwards;
}



/* 🔹 Bounce Out (Vertical) */
@keyframes bounceOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1, 1);
        filter: blur(0);
    }

    20% {
        transform: translateY(-10px) scale(1.05, 0.95);
    }

    50% {
        transform: translateY(40px) scale(0.8, 1.2);
        opacity: 0.8;
    }

    80% {
        transform: translateY(60px) scale(0.6, 1.3);
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translateY(100px) scale(0.4, 1.4);
        filter: blur(10px);
    }
}

.animate-bounce-out {
    animation: bounceOut 1s ease-in forwards;
}

/* 🔹 Bounce In Left */
@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
        filter: blur(12px);
    }

    50% {
        transform: translateX(15px) scale(1.05);
    }

    70% {
        transform: translateX(-10px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.animate-bounce-in-left {
    animation: bounceInLeft 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* 🔹 Bounce In Right */
@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
        filter: blur(12px);
    }

    50% {
        transform: translateX(-15px) scale(1.05);
    }

    70% {
        transform: translateX(10px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.animate-bounce-in-right {
    animation: bounceInRight 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* 🔹 Bounce Out Left */
@keyframes bounceOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }

    20% {
        transform: translateX(10px) scale(1.05);
    }

    50% {
        transform: translateX(-20px) scale(0.9);
    }

    100% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
        filter: blur(10px);
    }
}

.animate-bounce-out-left {
    animation: bounceOutLeft 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* 🔹 Bounce Out Right */
@keyframes bounceOutRight {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }

    20% {
        transform: translateX(-10px) scale(1.05);
    }

    50% {
        transform: translateX(20px) scale(0.9);
    }

    100% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
        filter: blur(10px);
    }
}

.animate-bounce-out-right {
    animation: bounceOutRight 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}




/* 
fade-in
fade-out
fade-left
fade-right

slide-up
slide-down
slide-right

zoom-in
zoom-out
scale-in
scale-out

rotate-in
rotate-out

bounce-in
bounce-out
bounce-in-left
bounce-in-right
bounce-out-left
bounce-out-right
 */