.animation-element {
            opacity: 0;
        }

        /* Opća klasa za pokretanje animacije */
        .animate {
            opacity: 1;
        }

        /* Slide Left: Klizi ulijevo izvan ekrana */
        @keyframes slideLeft {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .slide-left.animate {
            animation: slideLeft 1s ease-out forwards;
        }

        /* Slide Right: Klizi udesno izvan ekrana */
        @keyframes slideRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

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

        /* Bounce Up: Odskakuje gore s elastičnim efektom */
        @keyframes bounceUp {
            0% {
                transform: translateY(50px) scale(0.8);
                opacity: 0;
            }
            60% {
                transform: translateY(-10px) scale(1.05);
                opacity: 1;
            }
            80% {
                transform: translateY(5px) scale(0.98);
            }
            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .bounce-up.animate {
            animation: bounceUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        /* Multi-Step Left: Višestupanjska animacija lijevo (3 koraka: kliz, pauza, skok) */
        @keyframes multiStepLeft {
            0% {
                transform: translateX(-100%);
                opacity: 0;
            }
            33% {
                transform: translateX(-50%);
                opacity: 0.5;
            }
            66% {
                transform: translateX(-20%) rotate(-5deg);
                opacity: 0.8;
            }
            100% {
                transform: translateX(0) rotate(0deg);
                opacity: 1;
            }
        }

        .multi-step-left.animate {
            animation: multiStepLeft 1.5s steps(3) forwards;
        }

        /* Multi-Step Right: Višestupanjska animacija desno (3 koraka: kliz, pauza, skok) */
        @keyframes multiStepRight {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }
            33% {
                transform: translateX(50%);
                opacity: 0.5;
            }
            66% {
                transform: translateX(20%) rotate(5deg);
                opacity: 0.8;
            }
            100% {
                transform: translateX(0) rotate(0deg);
                opacity: 1;
            }
        }

        .multi-step-right.animate {
            animation: multiStepRight 1.5s steps(3) forwards;
        }