/*  My code */

.scene{
    position:relative;
    width:180px;
 }

.bottle{
    position:absolute;
    left:0%;
    bottom:0;
    width:180px;
    transform:translateX(-50%);
    z-index:10;
    animation:bottleFloat 4s ease-in-out infinite;
}

@keyframes bottleFloat{  
    0%,100%{
        transform:translateX(-50%) translateY(0);
    }
    50%{
        transform:translateX(-50%) translateY(-10px);
    }
}

 
.heroimg {
    display: flex;
    max-width: 600px; 
    position: absolute;
    top: 20%;
right: 0;}

.bubbles{
    position:absolute;
    inset:0;
}

.bubble{
    position:absolute;
    bottom:-20px;
    border-radius:50%;
    background:rgba(255,255,255,.15); 
    border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(2px);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,.6),
        0 0 15px rgba(255,255,255,.3);
    animation:rise linear infinite;
}

.bubble::before{
    content:'';
    position:absolute;
    width:30%;
    height:30%;
    background:rgba(255,255,255,.8);
    border-radius:50%;
    top:10%;
    left:0%;
}

@keyframes rise{
    0%{
        transform:translateY(0) translateX(0) scale(.4);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{
        transform:translateY(-350px)
                   translateX(25px)
                   scale(1);
    }

    100%{
        transform:translateY(-800px)
                   translateX(-20px)
                   scale(1.3);
        opacity:0;
    }
}