<!-- Анимация текста при наведении https://mikeandco.ru/skripty-dlya-tildy/effekt-zakruchivaniya-teksta-pri-navedenii -->

<style>
  .rolling-text .tn-atom a {
    display: inline-block;
    line-height: 115%;
    height: 1.1em !important;
    overflow: hidden;
    position: relative;
  }

  .rolling-text .tn-atom a .letter {
    display: inline-block;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  }

  .rolling-text .tn-atom a:hover .letter,
  .rolling-text.play .letter {
    transform: translateY(-100%);
  }

  .rolling-text .block:last-child {
    color: #404040;
  }
</style>

<!-- Библиотека для удобной работы с DOM -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Формирование посимвольной структуры текста для анимации -->
<script>
  const links = document.querySelectorAll('.rolling-text .tn-atom a');

  links.forEach(link => {
    const text = link.innerText;
    link.innerHTML = '';

    // Создаём два слоя текста для анимации
    for (let i = 0; i < 2; i++) {
      const block = document.createElement('div');
      block.classList.add('block');

      let delay = 0;

      for (const char of text) {
        const span = document.createElement('span');
        span.innerText = char.trim() === '' ? '\u00A0' : char;
        span.classList.add('letter');
        span.style.transitionDelay = `${delay}s`;
        block.appendChild(span);
        delay += 0.03;
      }

      link.appendChild(block);
    }
  });
</script>