/*** 1st Generated Animation Ease Transition ***/
/* Wrapper for controlling position and animation space */
.animated-bounce-wrapper {
    position: relative;
    height: auto;
}

/* Central image (main banner) with reverse bounce */
.central-img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    animation: centralBounce 3s ease-in-out infinite;
    position: relative;
    z-index: 1;  /* Lower z-index to make it sit below floating images */
}

/* Coin animation settings */
.floating-img {
    position: absolute;
    width: 60px;
    animation: coinBounce 2.5s ease-in-out infinite;
    z-index: 2;  /* Higher z-index to ensure floating images are above the central image */

}

/* Position each coin individually */
.coin-1 { top: 5%; left: 15%; animation-delay: 0s; }
.coin-2 { top: 2%; right: 7%; animation-delay: 0.3s; }
.coin-3 { bottom: -3%; left: -1%; animation-delay: 0.6s; }
.coin-4 { bottom: 5%; right: 18%; animation-delay: 0.9s; }
.coin-5 { top: 50%; left: 14%; transform: translate(-50%, -40%); animation-delay: 1.4s; }

/* Coin bounce animation (up and down) */
@keyframes coinBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Central image bounce in opposite direction (down-up-down) */
@keyframes centralBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}