@keyframes bubble-move {
    0% { top: var(--start-top); left: var(--start-left); opacity: 0; }
    50% { top: var(--start-top); left: var(--start-left); opacity: 1; }
    100% { top: 40%; left: var(--start-left); opacity: 0; }
}
.bubble {
    opacity: 0;
    --bubble-radius: 15px;
    --bubble-border-radius: 50%;
    --start-top: 100%; /* Начальная позиция top */
    --start-left: 50%; /* Начальная позиция left */
     content: "";
     width: var(--bubble-radius);
     height: var(--bubble-radius);
     border-radius: var(--bubble-border-radius);
     position: relative;
     /* box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 rgba(0,0,0,0.4); */
     position: absolute;
     background-color: rgba(255,255,255,0.22);
     transition: transform 0.1s ease-out;
    -webkit-transition: border-radius 1s;
    -webkit-animation: bubble-move 2s linear infinite
 }
 .bubble:after {
     position: absolute;
     content: " ";
     background: #fff;
     width: 15%;
     height: 15%;
     border-radius: 50%;
     transform: skew(11deg, 2deg);
     top: 20%;
     left: 63%;
     z-index: 10;
     opacity: 0.9;
    
 }
 .bubble:before {
     position: absolute;
     content: "";
     background-color: #fff;
     width: 9%;
     height: 9%;
     border-radius: 50%;
     transform: skew(10deg, 0deg);
     top: 40%;
     left: 75%;
     z-index: 20;
     opacity: 0.4;
 }
 /*@media screen and (max-width: 730px) {
     @keyframes bubble-move-mobile {
    0% { top: var(--start-top); left: var(--start-left); opacity: 0; }
    50% { top: var(--start-top); left: var(--start-left); opacity: 1; }
    100% { top: 40%; left: var(--start-left); opacity: 0; }
  }
.bubble {
     width: 1px;
     height: 1px;
     -webkit-animation: bubble-move-mobile 2s linear infinite
 }
 .bubble:after {
     width: 7%;
     height: 7%;
    
 }
 .bubble:before {
     width: 4%;
     height:4%;
 }
 }*/