.walking-ball {
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  filter: blur(0.5px);

  &.ball-1 {
    width: 148px;
    height: 148px;
    background: linear-gradient(45deg, #6b7cff, #9b59b6);
    opacity: 0.08;
    animation: float1 15s linear infinite;
    top: 10%;
    left: 5%;
  }

  &.ball-2 {
    width: 92px;
    height: 92px;
    background: linear-gradient(135deg, #ffb5e8, #ff69b4);
    opacity: 0.08;
    animation: float2 12s linear infinite;
    top: 60%;
    right: 10%;
  }

  &.ball-3 {
    width: 116px;
    height: 116px;
    background: linear-gradient(225deg, #b5deff, #3498db);
    opacity: 0.12;
    animation: float3 18s linear infinite;
    top: 30%;
    right: 30%;
  }

  &.ball-4 {
    width: 76px;
    height: 76px;
    background: linear-gradient(315deg, #ffffb5, #f39c12);
    opacity: 0.09;
    animation: float4 14s linear infinite;
    bottom: 20%;
    left: 15%;
  }

  &.ball-5 {
    width: 132px;
    height: 132px;
    background: linear-gradient(45deg, #d4edda, #27ae60);
    opacity: 0.11;
    animation: float5 20s linear infinite;
    top: 5%;
    right: 5%;
  }

  &.ball-6 {
    width: 88px;
    height: 88px;
    background: linear-gradient(180deg, #e8d5ff, #8e44ad);
    opacity: 0.1;
    animation: float6 16s linear infinite;
    bottom: 40%;
    left: 40%;
  }
}

/* Анімації руху - тільки translate без scale і rotate */
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, -50px);
  }
  50% {
    transform: translate(200px, 20px);
  }
  75% {
    transform: translate(50px, 80px);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-80px, -60px);
  }
  66% {
    transform: translate(-150px, 30px);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-60px, 40px);
  }
  40% {
    transform: translate(-120px, -20px);
  }
  60% {
    transform: translate(-80px, 60px);
  }
  80% {
    transform: translate(-20px, 20px);
  }
}

@keyframes float4 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(60px, -40px);
  }
  70% {
    transform: translate(120px, -80px);
  }
}

@keyframes float5 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-50px, 60px);
  }
  50% {
    transform: translate(-100px, 0px);
  }
  75% {
    transform: translate(-30px, -40px);
  }
}

@keyframes float6 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(80px, 50px);
  }
  80% {
    transform: translate(20px, -30px);
  }
}

/* Видаліть hover ефекти які змінюють швидкість анімації */
.walking-ball:hover {
  opacity: 0.2 !important;
  z-index: 10;
  /* Видалено transform: scale та transition які впливали на анімацію */
}
