.bubbles-left, .bubbles-right {
    position: fixed;
    bottom: 0;
    width: 30%;
    height: 100%;
    pointer-events: none;
}

.bubbles-left {
    left: 5%;
}

.bubbles-right {
    right: 5%;
}

/* Контейнер для монеток */
.coins-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
}

/* Базові стилі бульок */
.bubble {
    position: absolute;
    background: url('img/buble.png') center/contain no-repeat;
    animation: floatBubble linear infinite;
    opacity: 0;
    bottom: 0;
}

/* Стилі для монеток */
.coin {
    position: absolute;
    background: url('img/coin.png') center/contain no-repeat;
    animation: fallCoin linear infinite;
    opacity: 0.8;
    top: -100px; /* Починають зверху */
}

/* Анімація підйому бульок */
@keyframes floatBubble {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) scale(1.2);
        opacity: 0;
    }
}

/* Анімація падіння монеток */
@keyframes fallCoin {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Індивідуальні налаштування бульок */
.bubble-1 { width: 80px; height: 80px; left: 20%; animation-duration: 8s; animation-delay: 0s; bottom: 50px; }
.bubble-2 { width: 120px; height: 120px; left: 50%; animation-duration: 10s; animation-delay: 2s; bottom: 30px; }
.bubble-3 { width: 60px; height: 60px; left: 70%; animation-duration: 7s; animation-delay: 1s; bottom: 100px; }
.bubble-4 { width: 100px; height: 100px; right: 30%; animation-duration: 9s; animation-delay: 0.5s; bottom: 80px; }
.bubble-5 { width: 150px; height: 150px; right: 10%; animation-duration: 12s; animation-delay: 3s; bottom: 20px; }
.bubble-6 { width: 90px; height: 90px; right: 50%; animation-duration: 11s; animation-delay: 1.5s; bottom: 60px; }

/* Індивідуальні налаштування монеток (менші за бульки) */
.coin-1 { width: 40px; height: 40px; left: 10%; animation-duration: 5s; animation-delay: 0s; }
.coin-2 { width: 30px; height: 30px; left: 30%; animation-duration: 7s; animation-delay: 1s; }
.coin-3 { width: 50px; height: 50px; left: 50%; animation-duration: 6s; animation-delay: 0.5s; }
.coin-4 { width: 35px; height: 35px; left: 70%; animation-duration: 8s; animation-delay: 1.5s; }
.coin-5 { width: 45px; height: 45px; left: 90%; animation-duration: 9s; animation-delay: 2s; }
.coin-6 { width: 25px; height: 25px; left: 20%; animation-duration: 10s; animation-delay: 2.5s; }

.whale-container {
    position: absolute;
    top: 17%;
    left: 72%;
}

.whale {
    position: absolute;
    width: 300px;
    height: 300px;
    background: url('/img/fisgmove-removebg-preview.png') center/contain no-repeat;
    animation: 
        swim 15s ease-in-out infinite,
        tail-move 3s ease-in-out infinite,
        body-float 4s ease-in-out infinite;
   
}


 /* @keyframes swim {
    0%, 100% {
        transform: translateX(-200px) scaleX(1);
    }
    50% {
        transform: translateX(200px) scaleX(-1);
    }
}

@keyframes tail-move {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-5deg);
    }
} */


@keyframes body-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}




@keyframes bubble-float {
    to {
        transform: translateY(-100px) translateX(20px);
        opacity: 0;
    }
}