.button-animation-container {
    position: relative;
    width: 200px;
    height: 100px;
}

/* Svi gumbi - zelena boja #01734b */
.button-animation-original-button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #01734b;
    cursor: pointer;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    transition: transform 0.2s;
    box-shadow: 
        0 4px 15px rgba(1, 115, 75, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.button-animation-original-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Klase za animaciju originalnog gumba */
.button-animation-original-button.button-animation-animate {
    animation: button-animation-stretchAndBreak var(--button-animation-anim-duration, 1000ms) forwards;
}

/* Gumb jedan - zelena boja */
.button-animation-button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #01734b;
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 
        0 4px 15px rgba(1, 115, 75, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* Dodatne klase za pozicioniranje */
.button-animation-original-button.button-animation-center {
    top: 50%;
    left: 50%;
}

.button-animation-button.button-animation-one {
    top: 50%;
    left: 50%;
    z-index: 9;
    opacity: 0;
}

.button-animation-button.button-animation-two {
    top: 50%;
    left: 50%;
    z-index: 8;
    opacity: 0;
}

/* Klase za animaciju novih gumbova */
.button-animation-button.button-animation-one.button-animation-animate {
    animation: button-animation-appearAndMoveRightBouncy var(--button-animation-anim-duration, 1000ms) forwards,
                button-animation-jellyRight var(--button-animation-jelly-duration, 667ms) var(--button-animation-jelly-delay, 1000ms);
}

.button-animation-button.button-animation-two.button-animation-animate {
    animation: button-animation-appearAndMoveLeftBouncy var(--button-animation-anim-duration, 1000ms) forwards,
                button-animation-jellyLeft var(--button-animation-jelly-duration, 667ms) var(--button-animation-jelly-delay, 1000ms);
}

/* Glavna animacija za originalni gumb */
@keyframes button-animation-stretchAndBreak {
    0% {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        background: #01734b;
    }
    20% {
        width: 35px;
        height: 28px;
        border-radius: 45%;
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
        background: #01734b;
    }
    40% {
        width: 45px;
        height: 26px;
        border-radius: 40%;
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
        background: #01734b;
    }
    50% {
        width: 60px;
        height: 25px;
        border-radius: 35%;
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
        background: #01734b;
    }
    60% {
        width: 70px;
        height: 25px;
        border-radius: 25px;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        background: #01734b;
    }
    70% {
        width: 75px;
        height: 24px;
        border-radius: 20px;
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
        background: #01734b;
    }
    80% {
        width: 70px;
        height: 25px;
        border-radius: 25px;
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.8;
        background: #01734b;
    }
    90% {
        width: 65px;
        height: 26px;
        border-radius: 30%;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
        background: #01734b;
    }
    100% {
        width: 70px;
        height: 25px;
        border-radius: 25px;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        background: #01734b;
    }
}

/* Animacija za desni gumb */
@keyframes button-animation-appearAndMoveRightBouncy {
    0%, 60% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        background: #01734b;
    }
    62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5, 0.8);
        background: #01734b;
    }
    64% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.027)), -50%) scale(0.7, 0.9);
        background: #01734b;
    }
    66% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.053)), -50%) scale(0.9, 0.95);
        background: #01734b;
    }
    68% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.08)), -50%) scale(1.1, 0.9);
        background: #01734b;
    }
    70% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.133)), -50%) scale(1.3, 0.85);
        background: #01734b;
    }
    72% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.2)), -50%) scale(1.4, 0.8);
        background: #01734b;
    }
    74% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.267)), -50%) scale(1.45, 0.75);
        background: #01734b;
    }
    76% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.333)), -50%) scale(1.5, 0.7);
        background: #01734b;
    }
    78% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.4)), -50%) scale(1.45, 0.75);
        background: #01734b;
    }
    80% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.467)), -50%) scale(1.4, 0.8);
        background: #01734b;
    }
    82% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.533)), -50%) scale(1.35, 0.85);
        background: #01734b;
    }
    84% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.6)), -50%) scale(1.3, 0.9);
        background: #01734b;
    }
    86% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.667)), -50%) scale(1.25, 0.92);
        background: #01734b;
    }
    88% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.733)), -50%) scale(1.2, 0.95);
        background: #01734b;
    }
    90% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.8)), -50%) scale(1.15, 0.97);
        background: #01734b;
    }
    92% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.867)), -50%) scale(1.1, 0.98);
        background: #01734b;
    }
    94% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.907)), -50%) scale(1.05, 0.99);
        background: #01734b;
    }
    96% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.947)), -50%) scale(1.02, 1);
        background: #01734b;
    }
    98% {
        opacity: 1;
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) * 0.973)), -50%) scale(1.01, 1.02);
        background: #01734b;
    }
    100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--button-animation-move-distance)), -50%) scale(1, 1);
        border-radius: 50%;
        background: #01734b;
    }
}

/* Animacija za lijevi gumb */
@keyframes button-animation-appearAndMoveLeftBouncy {
    0%, 60% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        background: #01734b;
    }
    62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5, 0.8);
        background: #01734b;
    }
    64% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.027)), -50%) scale(0.7, 0.9);
        background: #01734b;
    }
    66% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.053)), -50%) scale(0.9, 0.95);
        background: #01734b;
    }
    68% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.08)), -50%) scale(1.1, 0.9);
        background: #01734b;
    }
    70% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.133)), -50%) scale(1.3, 0.85);
        background: #01734b;
    }
    72% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.2)), -50%) scale(1.4, 0.8);
        background: #01734b;
    }
    74% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.267)), -50%) scale(1.45, 0.75);
        background: #01734b;
    }
    76% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.333)), -50%) scale(1.5, 0.7);
        background: #01734b;
    }
    78% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.4)), -50%) scale(1.45, 0.75);
        background: #01734b;
    }
    80% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.467)), -50%) scale(1.4, 0.8);
        background: #01734b;
    }
    82% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.533)), -50%) scale(1.35, 0.85);
        background: #01734b;
    }
    84% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.6)), -50%) scale(1.3, 0.9);
        background: #01734b;
    }
    86% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.667)), -50%) scale(1.25, 0.92);
        background: #01734b;
    }
    88% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.733)), -50%) scale(1.2, 0.95);
        background: #01734b;
    }
    90% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.8)), -50%) scale(1.15, 0.97);
        background: #01734b;
    }
    92% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.867)), -50%) scale(1.1, 0.98);
        background: #01734b;
    }
    94% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.907)), -50%) scale(1.05, 0.99);
        background: #01734b;
    }
    96% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.947)), -50%) scale(1.02, 1);
        background: #01734b;
    }
    98% {
        opacity: 1;
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) * 0.973)), -50%) scale(1.01, 1.02);
        background: #01734b;
    }
    100% {
        opacity: 1;
        transform: translate(calc(-50% - var(--button-animation-move-distance)), -50%) scale(1, 1);
        border-radius: 50%;
        background: #01734b;
    }
}

/* Žele efekti za zelene gumene loptice */
@keyframes button-animation-jellyRight {
    0%, 100% {
        transform: translate(calc(-50% + var(--button-animation-move-distance)), -50%) scale(1, 1);
    }
    15% {
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) + 1.2px)), -50%) scale(1.08, 0.92);
    }
    30% {
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) - 0.9px)), -50%) scale(0.96, 1.04);
    }
    45% {
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) + 0.5px)), -50%) scale(1.03, 0.97);
    }
    60% {
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) - 0.3px)), -50%) scale(0.99, 1.01);
    }
    75% {
        transform: translate(calc(-50% + calc(var(--button-animation-move-distance) + 0.15px)), -50%) scale(1.01, 0.99);
    }
    90% {
        transform: translate(calc(-50% + var(--button-animation-move-distance)), -50%) scale(1, 1);
    }
}

@keyframes button-animation-jellyLeft {
    0%, 100% {
        transform: translate(calc(-50% - var(--button-animation-move-distance)), -50%) scale(1, 1);
    }
    15% {
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) + 1.2px)), -50%) scale(1.08, 0.92);
    }
    30% {
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) - 0.9px)), -50%) scale(0.96, 1.04);
    }
    45% {
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) + 0.5px)), -50%) scale(1.03, 0.97);
    }
    60% {
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) - 0.3px)), -50%) scale(0.99, 1.01);
    }
    75% {
        transform: translate(calc(-50% - calc(var(--button-animation-move-distance) + 0.15px)), -50%) scale(1.01, 0.99);
    }
    90% {
        transform: translate(calc(-50% - var(--button-animation-move-distance)), -50%) scale(1, 1);
    }
}