.title-bee{
  position: relative;

  svg {
    overflow: visible;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    /* Fix Safari rendering bug */
    transform: translateZ(0);

    path {
      /* stroke-width: 1; */
      /* stroke: gray; */
      fill: transparent;
    }
  }
}

.bee1 {
  position: absolute;
  top: 20%;
  background: url(../img/bee1.webp);
  background-position: 0% 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  width: calc(55 / 600 * 100%);
  height: auto;
  aspect-ratio: 55 / 50;
  max-width: 55px;
  animation: spriteAnim 0.1s steps(2, end) infinite;
}
@keyframes spriteAnim {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.bee2{
  width: calc(86 / 600 * 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 86px;
  background: url(../img/bee2.webp);
  background-position: 0% 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: spriteAnim 0.1s steps(2, end) infinite, bee2-fly 1s infinite alternate ease-in-out;
  position: absolute;
  bottom: 34%;
  left: 10%;
}
.bee3{
  width: calc(156 / 600 * 100%);
  height: auto;
  aspect-ratio: 156 / 60;
  max-width: 156px;
  background: url(../img/bee3.webp);
  background-position: 0% 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: spriteAnim 0.1s steps(2, end) infinite, bee3-fly 1s infinite alternate ease-in-out;
  animation-delay: 0s, -1s;
  position: absolute;
  top: 10%;
  right: 15%;
}

@keyframes bee2-fly {
  0% { transform: translateY(calc(-100% * 0.25)); }
  100% { transform: translateY(calc(100% * 0.25)); }
}
@keyframes bee3-fly {
  0% { transform: translateY(calc(-100% * 1.387 * 0.25));}
  100% { transform: translateY(calc(100% * 1.387 * 0.25));}
}