<!-- ???? Настраиваемая анимация для кнопки .animate-button -->

<style>
  :root {
    /* === ЦВЕТА === */
    --button-bg-hover: #F8B133;       /* Фон при наведении */
    --button-text-hover: #ffffff;     /* Цвет текста при наведении */
    --button-border-color: #202020;   /* Цвет рамки */

    /* === ИКОНКИ === */
    --icon-default: url(https://static.tildacdn.com/tild3835-6132-4630-b030-346134643765/Polygon_1.svg); /* Иконка по умолчанию */
    --icon-hover: url(https://static.tildacdn.com/tild3336-3032-4137-b464-613061383830/Polygon_2.svg);   /* Иконка при наведении */

    /* === РАЗМЕРЫ ДЛЯ ДЕСКТОПА === */
    --icon-size: 14px;
    --icon-right: 32px;
    --icon-scale-hover: 50;
    --text-margin-right: 15px;

    /* === РАЗМЕРЫ ДЛЯ МОБИЛЬНЫХ (до 640px) === */
    --icon-size-mobile: 10px;
    --icon-right-mobile: 20px;
    --icon-scale-hover-mobile: 50;
  }

  .animate-button .tn-atom {
    border: 2px solid var(--button-border-color) !important; /* Толщина обводки */
    position: relative;
    overflow: hidden;   
  }

  .animate-button:hover .tn-atom {
    background: var(--button-bg-hover) !important;
    transition: background 2.3s ease-in-out !important;
    transition-delay: 0.2s;
  }

  .animate-button .tn-atom:after,
  .animate-button .tn-atom:before {
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    right: var(--icon-right);
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .animate-button .tn-atom:after {
    content: '';
    background-image: var(--icon-default);
    transition: transform 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
  }

  .animate-button:hover .tn-atom:after {
    transform: scale(var(--icon-scale-hover));
  }

  .animate-button .tn-atom:before {
    content: "";
    background-image: var(--icon-hover);
    opacity: 0;
    z-index: 9;
    transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
  }

  .animate-button:hover .tn-atom:before {
    opacity: 1;
  }

  .animate-button div {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-right: var(--text-margin-right);
    transition: color 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
  }

  .animate-button:hover div {
    color: var(--button-text-hover);
  }

  @media (max-width: 640px) {
    .animate-button .tn-atom:after,
    .animate-button .tn-atom:before {
      width: var(--icon-size-mobile);
      height: var(--icon-size-mobile);
      right: var(--icon-right-mobile);
    }

    .animate-button:hover .tn-atom:after {
      transform: scale(var(--icon-scale-hover-mobile));
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.animate-button .tn-atom').forEach(btn => {
      const wrapper = document.createElement('div');
      wrapper.textContent = btn.textContent;
      btn.innerHTML = '';
      btn.appendChild(wrapper);
    });
  });
</script>