<style>

.btn-sonneto-primary .tn-atom, .btn-sonneto-primary .tn-atom a {
--duration: .7s;
--move-hover: -8px;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
transition: background-color 0.3s ease-in
}


.btn-sonneto-primary .tn-atom div, .btn-sonneto-primary .tn-atom a div {
display: flex;
justify-content: center
}

.btn-sonneto-primary .tn-atom div span, .btn-sonneto-primary .tn-atom a div span {
display: block;
min-width: 5px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-style: normal
}

.btn-sonneto-primary .tn-atom:hover, .btn-sonneto-primary .tn-atom:hover {
--y: var(--move-hover);
--shadow: var(--shadow-hover);
--move: -3px
}

.btn-sonneto-primary .tn-atom:hover span, .btn-sonneto-primary .tn-atom:hover span {
-webkit-animation: move var(--duration) linear var(--d) infinite;
animation: move var(--duration) linear var(--d) infinite
}

@-webkit-keyframes move {
40% {
transform: translateY(var(--move))
}
}

@keyframes move {
40% {
transform: translateY(var(--move))
}
}

.t-col-flex {
display: flex
}
</style>

<script>
window.onload = function() {
function processElements(selector) {
let elements = document.querySelectorAll(selector);
elements.forEach(element => {
let originalText = element.textContent.trim();
let wrappedText = '<div><span>' + originalText.split('').join('</span><span>') + '</span></div>';
element.innerHTML = wrappedText;
});

let delay = 0.03;

elements.forEach(el => {
let spanElements = el.querySelectorAll('div span');
spanElements.forEach((span, index) => {
span.style.setProperty("--d", (delay * (index + 1)) + "s");
});
});
}

// элементы с кнопкой
processElements('.btn-sonneto-primary .tn-atom');

// текстовые элементы с ссылкой
processElements('.btn-sonneto-primary .tn-atom a');
};

</script>