styles.css

.waves-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background-color: #9ce3f995;
    z-index: 2147483647;
    animation: move-up var(--animation-duration) linear;
    transform-origin: bottom;
  }
  
  .fish-animate {
    position: absolute;
    bottom: 1;
    left: -1;
    animation: fish-swim 25s infinite linear;
  }
  
  @keyframes move-up {
    from {
        height: 0%;
    }
    to {
        height: 100%;
    }
  }
  
  @keyframes fish-swim {
    0% {
      transform: translateX(-90px) scaleX(-1); /* Swim left to right */
    }
    49.99% {
      transform: translateX(calc(100vw + 70px)) scaleX(-1); /* Flip fish*/
    }
    50% {
      transform: translateX(calc(100vw + 70px)) scaleX(1); /* Swim right to left */
    }
    100% {
      transform: translateX(-90px) scaleX(1); /* Swim left to right */
    }
  }