.wp-block-zenblocks-button-basic {
  > a,
  > button {
    // フレームアニメーション用のコンテナ
    // 角丸は PHPのclass-responsive-css-generator.phpで計算・出力される
    // (内側の角丸 = 親の角丸 - ボーダー幅)
    .wp-block-zenblocks-button-basic-frame {
      position: absolute;
      inset: 0;
      z-index: 1001;
      pointer-events: none;
      overflow: hidden;
      transition: border-radius var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);
    }
  }
}

.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  &.zenblocks-button-frame-animation-shine-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          width: 50%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
          );
          animation: frame-shine-01 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-shine-02 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: -150%;
          width: 80%;
          height: 100%;
          background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.3),
            transparent
          );
          transform: skewX(-25deg);
          animation: frame-shine-02 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-shine-03 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
          transform: translate(-50%, -50%);
          border-radius: 50%;
          animation: frame-shine-03 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-pulse-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          border: 2px solid rgba(255, 255, 255, 0.6);
          border-radius: inherit;
          opacity: 0;
          animation: frame-pulse-01 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-pulse-02 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, 0.15);
          border-radius: inherit;
          opacity: 0;
          animation: frame-pulse-02 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-glow-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: -4px;
          background: transparent;
          border-radius: inherit;
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
          animation: frame-glow-01 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-sparkle-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 14px;
          height: 14px;
          background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 70%);
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }
        // 星1: 不規則なタイミングで移動
        &::before {
          animation: frame-sparkle-01a var(--frame-animation-duration, 2000ms) ease-in-out infinite;
        }
        // 星2: 星1とは異なるリズムで移動（少しずらして開始）
        &::after {
          animation: frame-sparkle-01b var(--frame-animation-duration, 2000ms) ease-in-out infinite;
          animation-delay: 150ms;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-border-run-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%
          );
          background-size: 50% 3px;
          background-repeat: no-repeat;
          background-position: -50% 0;
          animation: frame-border-run-01 var(--frame-animation-duration, 2000ms) linear infinite;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-neon-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          animation: frame-neon-01 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-rainbow-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: -3px;
          background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0080ff, #8000ff, #ff0080, #ff0000);
          background-size: 200% 100%;
          border-radius: inherit;
          z-index: -1;
          animation: frame-rainbow-01 var(--frame-animation-duration, 2000ms) linear infinite;
                  }
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: inherit;
          border-radius: inherit;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-flip-shine-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 30%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent
          );
          animation: frame-flip-shine-01 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-corner-flash-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          width: 10px;
          height: 10px;
          background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
          animation: frame-corner-flash-01 var(--frame-animation-duration, 2000ms) linear infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-wave-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.3) 40%,
            rgba(255, 255, 255, 0.3) 60%,
            rgba(255, 255, 255, 0.1) 80%,
            transparent 100%
          );
          animation: frame-wave-01 var(--frame-animation-duration, 2000ms) var(--frame-animation-easing, ease-in-out) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-electric-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: 
            linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
          background-size: 200% 100%;
          mix-blend-mode: overlay;
          animation: frame-electric-01 var(--frame-animation-duration, 2000ms) steps(5) infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-laser-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before,
        &::after {
          content: "";
          position: absolute;
          background: linear-gradient(90deg, transparent, #fff, transparent);
          height: 2px;
          width: 100%;
          left: 0;
        }
        &::before {
          top: 0;
          animation: frame-laser-horizontal var(--frame-animation-duration, 2000ms) linear infinite;
                  }
        &::after {
          bottom: 0;
          animation: frame-laser-horizontal var(--frame-animation-duration, 2000ms) linear infinite reverse;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-spiral-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          inset: -5px;
          background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.8) 30deg,
            transparent 60deg
          );
          border-radius: inherit;
          animation: frame-spiral-01 var(--frame-animation-duration, 2000ms) linear infinite;
                  }
        &::after {
          content: "";
          position: absolute;
          inset: 3px;
          background: inherit;
          border-radius: inherit;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-explosion-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 10px;
          height: 10px;
          background: radial-gradient(circle, #fff 0%, rgba(255, 200, 100, 0.8) 30%, transparent 70%);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          animation: frame-explosion-01 var(--frame-animation-duration, 2000ms) ease-out infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-glitch-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before,
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, 0.1);
          border-radius: inherit;
        }
        &::before {
          animation: frame-glitch-01a var(--frame-animation-duration, 2000ms) steps(2) infinite;
                  }
        &::after {
          animation: frame-glitch-01b var(--frame-animation-duration, 2000ms) steps(3) infinite;
          animation-delay: 100ms;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-meteor-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: -50%;
          left: -50%;
          width: 20px;
          height: 2px;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
          transform: rotate(45deg);
          animation: frame-meteor-01 var(--frame-animation-duration, 2000ms) linear infinite;
                  }
        &::after {
          content: "";
          position: absolute;
          top: -30%;
          left: -30%;
          width: 15px;
          height: 2px;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
          transform: rotate(45deg);
          animation: frame-meteor-01 var(--frame-animation-duration, 2000ms) linear infinite;
          animation-delay: 300ms;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-scanner-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), transparent);
          animation: frame-scanner-01 var(--frame-animation-duration, 2000ms) ease-in-out infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-double-border-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before,
        &::after {
          content: "";
          position: absolute;
          border: 2px solid rgba(255, 255, 255, 0.8);
          border-radius: inherit;
        }
        &::before {
          inset: 0;
          animation: frame-double-border-01a var(--frame-animation-duration, 2000ms) ease-in-out infinite;
                  }
        &::after {
          inset: -6px;
          animation: frame-double-border-01b var(--frame-animation-duration, 2000ms) ease-in-out infinite;
                  }
      }
    }
  }

  &.zenblocks-button-frame-animation-particle-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 6px;
          height: 6px;
          background: #fff;
          border-radius: 50%;
          animation: frame-particle-01 var(--frame-animation-duration, 2000ms) ease-out infinite;
                  }
        &::before {
          top: 50%;
          left: 0;
        }
        &::after {
          top: 50%;
          right: 0;
          left: auto;
          animation-delay: 500ms;
          animation-direction: reverse;
        }
      }
    }
  }

  &.zenblocks-button-frame-animation-ripple-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-frame {
        &::before,
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          border: 2px solid rgba(255, 255, 255, 0.6);
          border-radius: inherit;
          animation: frame-ripple-01 var(--frame-animation-duration, 2000ms) ease-out infinite;
                  }
        &::after {
          animation-delay: 500ms;
        }
      }
    }
  }
}

@keyframes frame-shine-01 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 150%;
  }
}

@keyframes frame-shine-02 {
  0% {
    left: -150%;
  }
  50%, 100% {
    left: 150%;
  }
}

@keyframes frame-shine-03 {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  50% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
  100% {
    width: 0;
    height: 0;
    opacity: 0;
  }
}

@keyframes frame-pulse-01 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes frame-pulse-02 {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes frame-glow-01 {
  0%, 100% {
    box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5);
  }
}

// 星1: 不規則なタイミングで3箇所を移動
@keyframes frame-sparkle-01a {
  // 位置1: 右寄り上
  0% {
    top: 18%; left: 72%;
    opacity: 0; transform: scale(0) rotate(0deg);
  }
  3% {
    top: 18%; left: 72%;
    opacity: 1; transform: scale(1.1) rotate(30deg);
  }
  12% {
    top: 18%; left: 72%;
    opacity: 1; transform: scale(0.9) rotate(120deg);
  }
  18% {
    top: 18%; left: 72%;
    opacity: 0; transform: scale(0) rotate(180deg);
  }
  // 位置2: 左下寄り
  28% {
    top: 65%; left: 22%;
    opacity: 0; transform: scale(0) rotate(0deg);
  }
  32% {
    top: 65%; left: 22%;
    opacity: 1; transform: scale(1) rotate(45deg);
  }
  45% {
    top: 65%; left: 22%;
    opacity: 1; transform: scale(1) rotate(150deg);
  }
  52% {
    top: 65%; left: 22%;
    opacity: 0; transform: scale(0) rotate(200deg);
  }
  // 位置3: 中央やや右上
  68% {
    top: 35%; left: 58%;
    opacity: 0; transform: scale(0) rotate(0deg);
  }
  73% {
    top: 35%; left: 58%;
    opacity: 1; transform: scale(1.2) rotate(60deg);
  }
  82% {
    top: 35%; left: 58%;
    opacity: 1; transform: scale(0.85) rotate(140deg);
  }
  90%, 100% {
    top: 35%; left: 58%;
    opacity: 0; transform: scale(0) rotate(180deg);
  }
}

// 星2: 星1とは異なるリズムで3箇所を移動
@keyframes frame-sparkle-01b {
  // 位置1: 左上
  0% {
    top: 12%; left: 15%;
    opacity: 0; transform: scale(0) rotate(0deg);
  }
  5% {
    top: 12%; left: 15%;
    opacity: 1; transform: scale(0.95) rotate(50deg);
  }
  18% {
    top: 12%; left: 15%;
    opacity: 1; transform: scale(1.05) rotate(160deg);
  }
  26% {
    top: 12%; left: 15%;
    opacity: 0; transform: scale(0) rotate(210deg);
  }
  // 位置2: 右下
  42% {
    top: 72%; left: 78%;
    opacity: 0; transform: scale(0) rotate(0deg);
  }
  47% {
    top: 72%; left: 78%;
    opacity: 1; transform: scale(1.15) rotate(35deg);
  }
  56% {
    top: 72%; left: 78%;
    opacity: 1; transform: scale(0.9) rotate(110deg);
  }
  62% {
    top: 72%; left: 78%;
    opacity: 0; transform: scale(0) rotate(170deg);
  }
  // 位置3: 中央やや左
  78% {
    top: 48%; left: 38%;
    opacity: 0; transform: scale(0) rotate(0deg);
  }
  82% {
    top: 48%; left: 38%;
    opacity: 1; transform: scale(1) rotate(40deg);
  }
  92% {
    top: 48%; left: 38%;
    opacity: 1; transform: scale(1) rotate(130deg);
  }
  98%, 100% {
    top: 48%; left: 38%;
    opacity: 0; transform: scale(0) rotate(180deg);
  }
}

@keyframes frame-border-run-01 {
  0% {
    background-position: -50% 0;
    background-size: 50% 3px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  25% {
    background-position: 150% 0;
    background-size: 50% 3px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  25.1% {
    background-position: 100% -50%;
    background-size: 3px 50%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  50% {
    background-position: 100% 150%;
    background-size: 3px 50%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  50.1% {
    background-position: 150% 100%;
    background-size: 50% 3px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  75% {
    background-position: -50% 100%;
    background-size: 50% 3px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  75.1% {
    background-position: 0 150%;
    background-size: 3px 50%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
  100% {
    background-position: 0 -50%;
    background-size: 3px 50%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  }
}

@keyframes frame-neon-01 {
  0%, 100% {
    box-shadow: 
      inset 0 0 5px rgba(255, 255, 255, 0.5),
      0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 
      inset 0 0 10px rgba(255, 255, 255, 0.8),
      0 0 15px rgba(255, 255, 255, 0.5),
      0 0 30px rgba(255, 255, 255, 0.4),
      0 0 50px rgba(255, 255, 255, 0.2);
  }
}

@keyframes frame-rainbow-01 {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes frame-flip-shine-01 {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  50%, 100% {
    transform: translateX(200%) rotate(45deg);
  }
}

@keyframes frame-corner-flash-01 {
  0%, 100% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }
  25% {
    opacity: 0;
  }
  37.5% {
    opacity: 1;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
  }
  50% {
    opacity: 0;
  }
  62.5% {
    opacity: 1;
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    opacity: 1;
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
  }
}

@keyframes frame-wave-01 {
  0% {
    transform: translateX(-100%);
  }
  50%, 100% {
    transform: translateX(100%);
  }
}

@keyframes frame-electric-01 {
  0%, 100% {
    opacity: 0;
    background-position: 0% 0%;
  }
  10%, 30%, 50%, 70%, 90% {
    opacity: 1;
    background-position: 100% 0%;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
    background-position: 50% 0%;
  }
}

@keyframes frame-laser-horizontal {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes frame-spiral-01 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes frame-explosion-01 {
  0% {
    opacity: 1;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 10px 5px rgba(255, 200, 100, 0.8);
  }
  50% {
    opacity: 0.8;
    width: 150%;
    height: 150%;
    box-shadow: 0 0 30px 15px rgba(255, 200, 100, 0.4);
  }
  100% {
    opacity: 0;
    width: 200%;
    height: 200%;
    box-shadow: 0 0 0 0 rgba(255, 200, 100, 0);
  }
}

@keyframes frame-glitch-01a {
  0%, 100% {
    clip-path: inset(0 0 100% 0);
    transform: translateX(0);
  }
  20% {
    clip-path: inset(20% 0 60% 0);
    transform: translateX(-5px);
  }
  40% {
    clip-path: inset(50% 0 30% 0);
    transform: translateX(5px);
  }
  60% {
    clip-path: inset(10% 0 70% 0);
    transform: translateX(-3px);
  }
  80% {
    clip-path: inset(70% 0 10% 0);
    transform: translateX(3px);
  }
}

@keyframes frame-glitch-01b {
  0%, 100% {
    clip-path: inset(100% 0 0 0);
    transform: translateX(0);
  }
  25% {
    clip-path: inset(30% 0 50% 0);
    transform: translateX(4px);
  }
  50% {
    clip-path: inset(60% 0 20% 0);
    transform: translateX(-4px);
  }
  75% {
    clip-path: inset(0% 0 80% 0);
    transform: translateX(2px);
  }
}

@keyframes frame-meteor-01 {
  0% {
    top: -50%;
    left: -50%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 150%;
    left: 150%;
    opacity: 0;
  }
}

@keyframes frame-scanner-01 {
  0%, 100% {
    top: 0;
    opacity: 1;
  }
  45% {
    top: calc(100% - 4px);
    opacity: 1;
  }
  50% {
    top: calc(100% - 4px);
    opacity: 0;
  }
  55% {
    top: 0;
    opacity: 0;
  }
  60% {
    top: 0;
    opacity: 1;
  }
}

@keyframes frame-double-border-01a {
  0%, 100% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes frame-double-border-01b {
  0%, 100% {
    opacity: 0;
    transform: scale(1.1);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes frame-particle-01 {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(50%) translateY(-80%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) translateY(-50%) scale(0.3);
  }
}

@keyframes frame-ripple-01 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

.frame-animation-preview-button.is-force-animation {
  .wp-block-zenblocks-button-basic-frame::before {
    animation-play-state: running !important;
  }
}

.frame-animation-preview-wrapper {
  &.zenblocks-button-frame-animation-shine-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-shine-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-shine-02 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-shine-02 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-shine-03 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-shine-03 2000ms ease-out infinite;
  }
  &.zenblocks-button-frame-animation-pulse-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-pulse-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-pulse-02 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-pulse-02 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-glow-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-glow-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-sparkle-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-sparkle-01a 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-sparkle-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-sparkle-01b 2000ms ease-in-out infinite;
    animation-delay: 150ms;
  }
  &.zenblocks-button-frame-animation-border-run-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-border-run-01 2000ms linear infinite;
  }
  &.zenblocks-button-frame-animation-neon-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-neon-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-rainbow-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-rainbow-01 2000ms linear infinite;
  }
  &.zenblocks-button-frame-animation-flip-shine-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-flip-shine-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-corner-flash-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-corner-flash-01 2000ms linear infinite;
  }
  &.zenblocks-button-frame-animation-wave-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-wave-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-electric-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-electric-01 2000ms steps(5) infinite;
  }
  &.zenblocks-button-frame-animation-laser-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-laser-horizontal 2000ms linear infinite;
  }
  &.zenblocks-button-frame-animation-laser-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-laser-horizontal 2000ms linear infinite reverse;
  }
  &.zenblocks-button-frame-animation-spiral-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-spiral-01 2000ms linear infinite;
  }
  &.zenblocks-button-frame-animation-explosion-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-explosion-01 2000ms ease-out infinite;
  }
  &.zenblocks-button-frame-animation-glitch-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-glitch-01a 2000ms steps(2) infinite;
  }
  &.zenblocks-button-frame-animation-glitch-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-glitch-01b 2000ms steps(3) infinite;
  }
  &.zenblocks-button-frame-animation-meteor-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before,
  &.zenblocks-button-frame-animation-meteor-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-meteor-01 2000ms linear infinite;
  }
  &.zenblocks-button-frame-animation-scanner-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-scanner-01 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-double-border-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before {
    animation: frame-double-border-01a 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-double-border-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-double-border-01b 2000ms ease-in-out infinite;
  }
  &.zenblocks-button-frame-animation-particle-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before,
  &.zenblocks-button-frame-animation-particle-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-particle-01 2000ms ease-out infinite;
  }
  &.zenblocks-button-frame-animation-ripple-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::before,
  &.zenblocks-button-frame-animation-ripple-01 .is-force-animation .wp-block-zenblocks-button-basic-frame::after {
    animation: frame-ripple-01 2000ms ease-out infinite;
  }
}