/* Initial state: set opacity to 0 for elements with animation classes */
[class^="animate-"] {
    opacity: 0;
}
    /* Fade In Animation */
    .fadeIn {
        animation: fadeIn 1s ease forwards;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /* Slide In from Left */
    .slideInLeft {
        animation: slideInLeft 1s ease forwards;
    }

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

    /* Slide In from Right */
    .slideInRight {
        animation: slideInRight 1s ease forwards;
    }

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

    /* Slide In from Top */
    .slideInUp {
        animation: slideInUp 1s ease forwards;
    }

    @keyframes slideInUp {
        0% {
            transform: translateY(50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Slide In from Bottom */
    .slideInDown {
        animation: slideInDown 1s ease forwards;
    }

    @keyframes slideInDown {
        0% {
            transform: translateY(-50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Zoom In */
    .zoomIn {
        animation: zoomIn 1s ease forwards;
    }

    @keyframes zoomIn {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Zoom Out */
    .zoomOut {
        animation: zoomOut 1s ease forwards;
    }

    @keyframes zoomOut {
        0% {
            transform: scale(1.5);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Bounce In */
    .bounceIn {
        animation: bounceIn 1s ease forwards;
    }

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

    /* Bounce In Down */
    .bounceInDown {
        animation: bounceInDown 1s ease forwards;
    }

    @keyframes bounceInDown {
        0% {
            transform: translateY(-300px);
            opacity: 0;
        }
        60% {
            transform: translateY(25px);
        }
        80% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Flip In X */
    .flipInX {
        animation: flipInX 1s ease forwards;
    }

    @keyframes flipInX {
        0% {
            transform: rotateX(-180deg);
            opacity: 0;
        }
        100% {
            transform: rotateX(0);
            opacity: 1;
        }
    }

    /* Flip In Y */
    .flipInY {
        animation: flipInY 1s ease forwards;
    }

    @keyframes flipInY {
        0% {
            transform: rotateY(-180deg);
            opacity: 0;
        }
        100% {
            transform: rotateY(0);
            opacity: 1;
        }
    }

    /* Light Speed In */
    .lightSpeedIn {
        animation: lightSpeedIn 1s ease forwards;
    }

    @keyframes lightSpeedIn {
        0% {
            transform: translateX(100%) skewX(30deg);
            opacity: 0;
        }
        60% {
            transform: translateX(-10%) skewX(30deg);
        }
        80% {
            transform: translateX(5%) skewX(20deg);
        }
        100% {
            transform: translateX(0) skewX(0);
            opacity: 1;
        }
    }

    /* Fade In Up */
    .fadeInUp {
        animation: fadeInUp 1s ease forwards;
    }

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

    /* Fade In Down */
    .fadeInDown {
        animation: fadeInDown 1s ease forwards;
    }

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