document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.wp-block-zenblocks-button-basic');

  buttons.forEach((button) => {
    const textElement = button.querySelector('.wp-block-zenblocks-button-basic-text');
    
    if (!textElement) return;

    const defaultText = textElement.querySelector('.default');
    const hoverText = textElement.querySelector('.hover');

    if (defaultText) {
      const chars = defaultText.querySelectorAll('.char');
      chars.forEach((char, index) => {
        char.style.setProperty('--char-index', index);
      });
    }

    if (hoverText) {
      const chars = hoverText.querySelectorAll('.char');
      chars.forEach((char, index) => {
        char.style.setProperty('--char-index', index);
      });
    }
  });
});
