/* ==========================================================================
   Button text wave + icon rotate (hero, services-news, news-card)
   ========================================================================== */

.btn-wave {
  --wave-duration: 0.65s;
  --wave-step: 0.045s;
  --wave-char-count: 12;
}

.btn-wave__text {
  display: inline-flex;
}

.btn-wave__char {
  display: inline-block;
  transform: translateY(0);
}

.btn-wave__icon {
  flex-shrink: 0;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

.btn-wave:hover .btn-wave__char {
  animation: btn-text-wave var(--wave-duration) cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--char-index) * var(--wave-step)) both;
}

.btn-wave:hover .btn-wave__icon {
  transform: rotate(-35deg);
  transition-delay: calc(
    (var(--wave-char-count) - 1) * var(--wave-step) + var(--wave-duration) * 0.65
  );
}

@keyframes btn-text-wave {
  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-6px);
  }

  70% {
    transform: translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-wave:hover .btn-wave__char {
    animation: none;
  }

  .btn-wave:hover .btn-wave__icon {
    transition-delay: 0s;
  }
}

@media (max-width: 767px) {
  .services-news__btn,
  .not-found__btn,
  [class*="__btn"]:not([class*="hero__btn"]):not(.header__lang-btn) {
    font-size: 16px;
    padding: 18px 24px;
  }

  .services-news__btn img,
  .not-found__btn img,
  .not-found__btn-icon,
  .btn-wave__icon,
  [class*="__btn"]:not([class*="hero__btn"]):not(.header__lang-btn) img {
    width: 21px;
    height: auto;
  }
}