// プレビューボタンの強制ホバースタイル
// style-animations.scssの:hoverスタイルを.is-force-hoverクラスでも適用

.animation-preview-wrapper.wp-block-zenblocks-button-basic {
  > button.is-force-hover {
    .wp-block-zenblocks-button-basic-text {
      .default {
        opacity: 1 !important;
        visibility: visible !important;
      }
      .hover {
        opacity: 1 !important;
      }
    }
  }

  // 01: シンプル切替（transformなし）
  &.zenblocks-button-hover-animation-text-01 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-01.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        opacity: 0;
        transition: opacity 0.3s ease;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.015s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        opacity: 1;
        transition: opacity 0.3s ease;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.05s + $i * 0.015s};
          }
        }
      }
    }
  }

  // 02: 縦スライド（標準）
  &.zenblocks-button-hover-animation-text-02 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-02.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        transform: translateY(-10px);
        opacity: 0;
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      .hover .char {
        display: inline-block;
        transform: translateY(0);
        opacity: 1;
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.2s};
          }
        }
      }
    }
  }

  // 03: 縦スライド（遅延）
  &.zenblocks-button-hover-animation-text-03 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-03.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        transform: translateY(-10px);
        opacity: 0;
        transition: opacity 0.9s cubic-bezier(0.8, 0, 1, 1), transform 0.9s cubic-bezier(0.8, 0, 1, 1);
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.06s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        transform: translateY(0);
        opacity: 1;
        transition: opacity 0.9s cubic-bezier(0.8, 0, 1, 1), transform 0.9s cubic-bezier(0.8, 0, 1, 1);
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.3s + $i * 0.08s};
          }
        }
      }
    }
  }

  // 04: 横からスライドイン(左→右)
  &.zenblocks-button-hover-animation-text-04 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-04.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        transform: translateX(-20px);
        opacity: 0;
        transition: opacity 1s ease-out, transform 1s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.05s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        transform: translateX(0);
        opacity: 1;
        transition: opacity 1s ease-out, transform 1s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.3s + $i * 0.05s};
          }
        }
      }
    }
  }

  // 05: スケール＋フェード
  &.zenblocks-button-hover-animation-text-05 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-05.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        transform: scale(0.5);
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0, 0, 0.2, 1);
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.03s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        transform: scale(1);
        opacity: 1;
        transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0, 0, 0.2, 1);
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.15s + $i * 0.03s};
          }
        }
      }
    }
  }

  // 06: フェードイン・フェードアウト(動き最小限)
  &.zenblocks-button-hover-animation-text-06 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-06.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        opacity: 0;
        transition: opacity 0.5s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.025s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        opacity: 1;
        transition: opacity 0.5s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.1s + $i * 0.025s};
          }
        }
      }
    }
  }

  // 07: 波打つような縦移動(交互)
  &.zenblocks-button-hover-animation-text-07 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-07.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        opacity: 0;
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            @if $i % 2 == 0 {
              transform: translateY(-8px);
            } @else {
              transform: translateY(8px);
            }
            transition-delay: #{$i * 0.06s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        transform: translateY(0);
        opacity: 1;
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.15s + $i * 0.06s};
          }
        }
      }
    }
  }

  // 08: ブラー＋フェード
  &.zenblocks-button-hover-animation-text-08 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-08.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        filter: blur(10px);
        opacity: 0;
        transition: opacity 0.5s ease-out, filter 0.5s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.02s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        filter: blur(0);
        opacity: 1;
        transition: opacity 0.5s ease-out, filter 0.5s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.1s + $i * 0.02s};
          }
        }
      }
    }
  }

  // 09: スライトリフト(わずかに浮き上がる)
  &.zenblocks-button-hover-animation-text-09 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-09.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        transform: translateY(-3px);
        opacity: 0;
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.04s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        transform: translateY(0);
        opacity: 1;
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.15s + $i * 0.04s};
          }
        }
      }
    }
  }

  // 10: スケール拡大＋Y移動
  &.zenblocks-button-hover-animation-text-10 > button.is-force-hover,
  &.zenblocks-button-hover-animation-text-10.is-hover-enabled > button:hover {
    .wp-block-zenblocks-button-basic-text {
      .default .char {
        transform: scale(1.5) translateY(-10px);
        opacity: 0;
        transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0, 0, 0.2, 1);
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.03s};
          }
        }
      }
      .hover .char {
        display: inline-block;
        transform: scale(1) translateY(0);
        opacity: 1;
        transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0, 0, 0.2, 1);
        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            transition-delay: #{0.15s + $i * 0.03s};
          }
        }
      }
    }
  }
}