// 追加アニメーション指定

.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  // -----------------------------------
  // animation none (アニメーションなし - スムーズな切り替えのみ)
  // -----------------------------------
  &.zenblocks-button-hover-animation-text-none {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        > .default {
          opacity: 1;
          transition: opacity var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);
        }
        > .hover {
          opacity: 0;
          transition: opacity var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          > .default {
            opacity: 0;
          }
          > .hover {
            opacity: 1;
          }
        }
      }
    }
  }

  // - ease-out: 最初は早く、後はゆっくり
  // - ease-in: 最初はゆっくり、後は早く
  // - ease-in-out: 最初と最後がゆっくり、中間が早い
  // - ease: デフォルト(ease-in-outに近い)

  //   ease-inより強い指定:
  // - cubic-bezier(0.6, 0, 1, 1) - 強めのease-in
  // - cubic-bezier(0.7, 0, 1, 1) - さらに強い
  // - cubic-bezier(0.8, 0, 1, 1) - かなり強い
  // - cubic-bezier(0.95, 0.05, 0.8, 0.04) - expo ease-in (非常に強い)

  // ease-outより強い指定:
  // - cubic-bezier(0, 0, 0.4, 1) - 強めのease-out
  // - cubic-bezier(0, 0, 0.3, 1) - さらに強い
  // - cubic-bezier(0, 0, 0.2, 1) - かなり強い

  // 参考:
  // - ease-in = cubic-bezier(0.42, 0, 1, 1)
  // - ease-out = cubic-bezier(0, 0, 0.58, 1)
  // - ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

  // 01: シンプル切替（transformなし）
  &.zenblocks-button-hover-animation-text-01 {
    $char-delay-step: 0.015s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            opacity: 1;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 300ms) var(--text-animation-easing, ease);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            opacity: 0;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease);
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              opacity: 0;
              transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              opacity: 1;
              transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 50ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 02: 縦スライド（標準）
  &.zenblocks-button-hover-animation-text-02 {
    $default-char-hover-translate-y: -10px;
    $hover-char-initial-translate-y: 10px;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: translateY(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 400ms) var(--text-animation-easing, ease);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            transform: translateY($hover-char-initial-translate-y);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out),
              transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
            transition-delay: calc(var(--text-animation-delay, 0ms) + 400ms);
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              transform: translateY($default-char-hover-translate-y);
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
              transition-delay: var(--text-animation-delay, 0ms);
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: translateY(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
              transition-delay: calc(var(--text-animation-delay, 0ms) + 100ms);
            }
          }
        }
      }
    }
  }

  // 03: 縦スライド（遅延）
  &.zenblocks-button-hover-animation-text-03 {
    $default-char-hover-translate-y: -6px;
    $hover-char-initial-translate-y: 6px;
    $char-delay-step: 0.02s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: translateY(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1));
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 800ms) var(--text-animation-easing, cubic-bezier(0.6, 0, 1, 1));
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            transform: translateY($hover-char-initial-translate-y);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1)),
              transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1));
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              transform: translateY($default-char-hover-translate-y);
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1)),
                transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1));
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: translateY(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1)),
                transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0.8, 0, 1, 1));
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 100ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 04: 横からスライドイン(左→右)
  &.zenblocks-button-hover-animation-text-04 {
    $default-char-hover-translate-x: -20px;
    $hover-char-initial-translate-x: 20px;
    $char-delay-step: 0.02s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: translateX(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            transform: translateX($hover-char-initial-translate-x);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out),
              transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              transform: translateX($default-char-hover-translate-x);
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: translateX(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 100ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 05: スケール＋フェード
  &.zenblocks-button-hover-animation-text-05 {
    $default-char-hover-scale: 0.5;
    $hover-char-initial-scale: 0.5;
    $char-delay-step: 0.02s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: scale(1);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            transform: scale($hover-char-initial-scale);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
              transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0, 0, 0.2, 1));
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              transform: scale($default-char-hover-scale);
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0, 0, 0.2, 1));
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: scale(1);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0, 0, 0.2, 1));
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 100ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 06: フェードイン・フェードアウト(動き最小限)
  &.zenblocks-button-hover-animation-text-06 {
    $char-delay-step: 0.015s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            opacity: 1;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            opacity: 0;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              opacity: 0;
              transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              opacity: 1;
              transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 50ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 07: 波打つような縦移動(交互)
  &.zenblocks-button-hover-animation-text-07 {
    $default-char-hover-translate-y: -8px;
    $hover-char-initial-translate-y: 8px;
    $char-delay-step: 0.04s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: translateY(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out),
              transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out);
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                @if $i % 2 == 0 {
                  transform: translateY(-#{$hover-char-initial-translate-y});
                } @else {
                  transform: translateY($hover-char-initial-translate-y);
                }
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out),
                transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  @if $i % 2 == 0 {
                    transform: translateY($default-char-hover-translate-y);
                  } @else {
                    transform: translateY(-#{$default-char-hover-translate-y});
                  }
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: translateY(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out),
                transform var(--text-animation-duration, 400ms) var(--text-animation-easing, ease-in-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 100ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 08: ブラー＋フェード
  &.zenblocks-button-hover-animation-text-08 {
    $default-char-hover-blur: 10px;
    $hover-char-initial-blur: 10px;
    $char-delay-step: 0.01s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            filter: blur(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            filter: blur($hover-char-initial-blur);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
              filter var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              filter: blur($default-char-hover-blur);
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
                filter var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              filter: blur(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
                filter var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 50ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 09: スライトリフト(わずかに浮き上がる)
  &.zenblocks-button-hover-animation-text-09 {
    $default-char-hover-translate-y: 3px;
    $hover-char-initial-translate-y: 3px;
    $char-delay-step: 0.015s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: translateY(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            transform: translateY($hover-char-initial-translate-y);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out),
              transform var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out);
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              transform: translateY(-#{$default-char-hover-translate-y});
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: translateY(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 250ms) var(--text-animation-easing, ease-out);
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 50ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }

  // 10: スケール拡大＋Y移動
  &.zenblocks-button-hover-animation-text-10 {
    $default-char-hover-scale: 1.5;
    $default-char-hover-translate-y: -10px;
    $hover-char-initial-scale: 0.3;
    $hover-char-initial-translate-y: 10px;
    $char-delay-step: 0.02s;
    $max-chars: 30;

    > a,
    > button {
      .wp-block-zenblocks-button-basic-text {
        .default {
          opacity: 1 !important;
          visibility: visible !important;
          .char {
            display: inline-block;
            transform: scale(1) translateY(0);
            opacity: 1;
            transition: opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
            transition-delay: var(--text-animation-delay, 0ms);
          }
        }
        .hover {
          opacity: 0;
          transition: all var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out);
          transition-delay: var(--text-animation-delay, 0ms);
          .char {
            display: inline-block;
            transform: scale($hover-char-initial-scale) translateY($hover-char-initial-translate-y);
            opacity: 0;
            transition:
              opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
              transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0, 0, 0.2, 1));
            @for $i from 1 through $max-chars {
              &:nth-child(#{$i}) {
                transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
              }
            }
          }
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-text {
          .default {
            opacity: 1 !important;
            visibility: visible !important;
            .char {
              transform: scale($default-char-hover-scale) translateY($default-char-hover-translate-y);
              opacity: 0;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0, 0, 0.2, 1));
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + #{$i * $char-delay-step});
                }
              }
            }
          }
          .hover {
            opacity: 1;
            transition-delay: var(--text-animation-delay, 0ms);
            .char {
              display: inline-block;
              transform: scale(1) translateY(0);
              opacity: 1;
              transition:
                opacity var(--text-animation-duration, 300ms) var(--text-animation-easing, ease-out),
                transform var(--text-animation-duration, 300ms) var(--text-animation-easing, cubic-bezier(0, 0, 0.2, 1));
              @for $i from 1 through $max-chars {
                &:nth-child(#{$i}) {
                  transition-delay: calc(var(--text-animation-delay, 0ms) + 100ms + #{$i * $char-delay-step});
                }
              }
            }
          }
        }
      }
    }
  }
}