Как в Тильде анимировать градиент при наведении

<!--
 * Name: Плавная анимация градиента
 * Description: Код добавляет возможность плавно анимировать градиент при наведении
 * Author: ANKU
 * URL: https://anku.one/hover-gradient
-->
<style>
    /* Код для шейпов, кнопок, кнопки отправки формы в ZeroBlock */
    /*
    * Регистрируем цвета, как свойства 
    * То есть далее используете, как css переменныю --gradient-start / --gradient-end 
    */
    @property --gradient-start {
      syntax: "<color>";
      initial-value: red; /* Стартовый цвет */
      inherits: false;
    }
    @property --gradient-end {
      syntax: "<color>";
      initial-value: blue;  /* Конечный цвет */
      inherits: false;
    }
    
    /* 
    * Можете добавить больше цветов и включить их в градиент, например --gradient-center.
    * Постройте градиент в любом онлайн-генераторе и просто замените цвета на переменные.
    * Если какой-то цвет не изменяется, можете его не регистрировать, как свойство.
    */
    
    /* Задаем класс элемента (.tn-atom не убираем - это стандартный класс дочернего элемента в ZeroBlock) */
    /* Задаем класс элемента (.tn-submit не убираем - это стандартный класс кнопки формы в ZeroBlock) */
    .hover-grdnt .tn-atom,
    .hover-grdnt-form .t-submit {
      --gradient-start: red;
      background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); /* Строим линейный градиент */
      transition: --gradient-start .5s, --gradient-end .5s!important; /* Скорость анимации, в примере 1 сек */
    }
    
    /* Делаем hover только на устройствах с мышью */
    @media (any-pointer: fine) {
        .hover-grdnt .tn-atom:hover,
        .hover-grdnt-form .t-submit:hover {
          --gradient-start: green; /* Перезаписываем цвет 1 при наведении */
          --gradient-end: aqua; /* Перезаписываем цвет 2 при наведении */
        }
    }
    /* Делаем active - чтобы срабатывало при нажатии на устройствах с тапом и не залипало, как hover на тачах */
    .hover-grdnt .tn-atom:active,
    .hover-grdnt-form .t-submit:active {
        --gradient-start: green; /* Перезаписываем цвет 1 при наведении */
        --gradient-end: aqua; /* Перезаписываем цвет 2 при наведении */
    }
</style>
<script>
    // Второй вариант регистрации CSS свойств
    // Используте какой-то один
    CSS.registerProperty({
      name: '--gradient-start',
      syntax: "<color>",
      initialValue: 'red', // Стартовый цвет
      inherits: false,
    });
    CSS.registerProperty({
      name: '--gradient-end',
      syntax: "<color>",
      initialValue: 'blue', // Конечный цвет
      inherits: false,
    });
</script>
<!-- Polyfill  -->
<script src="https://unpkg.com/css-paint-polyfill"></script>