/* сама кнопка */
.zb-menu-btn {
  position: relative;
  overflow: visible !important;
}

/* линия */
.zb-menu-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;     /* можно подрегулировать */
  width: 17px;
  height: 3px;
  background: #F85A4E;
  border-radius: 30px;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

/* анимация */
.zb-menu-btn:hover::after {
  transform: scaleX(1);
}/* Общие стили для анимации */
@keyframes floatSquare {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-10px) rotate(5deg); }
  50%  { transform: translateY(0px) rotate(0deg); }
  75%  { transform: translateY(10px) rotate(-5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes floatArrow {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-15px) rotate(10deg); }
  50%  { transform: translateY(0px) rotate(0deg); }
  75%  { transform: translateY(15px) rotate(-10deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Анимация квадрата */
.inflatable-square {
  animation: floatSquare 6s ease-in-out infinite;
}

/* Анимация стрелки */
.inflatable-arrow {
  animation: floatArrow 4s ease-in-out infinite;
}
.float-arrow {
  animation: floatArrow 7s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes floatArrow {
  0% {
    transform: translateY(0px) rotate(-2deg);
  }
  25% {
    transform: translateY(-8px) rotate(1deg);
  }
  50% {
    transform: translateY(-18px) rotate(3deg);
  }
  75% {
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-2deg);
  }
}


