// ボタンアニメーション
// --button-animation-total = duration + interval を使用してループ間隔を実現
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  &.zenblocks-button-animation-shake-01 {
    > a,
    > button {
      animation: button-shake-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-bounce-01 {
    > a,
    > button {
      animation: button-bounce-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-heartbeat-01 {
    > a,
    > button {
      animation: button-heartbeat-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-wobble-01 {
    > a,
    > button {
      animation: button-wobble-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-swing-01 {
    > a,
    > button {
      transform-origin: top center;
      animation: button-swing-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-rubberband-01 {
    > a,
    > button {
      animation: button-rubberband-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-tada-01 {
    > a,
    > button {
      animation: button-tada-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-pulse-01 {
    > a,
    > button {
      animation: button-pulse-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-flash-01 {
    > a,
    > button {
      animation: button-flash-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-headshake-01 {
    > a,
    > button {
      animation: button-headshake-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-pop-01 {
    > a,
    > button {
      animation: button-pop-01 var(--button-animation-total, 3000ms) var(--button-animation-easing, ease-in-out) infinite;
    }
  }

  &.zenblocks-button-animation-vibrate-01 {
    > a,
    > button {
      animation: button-vibrate-01 var(--button-animation-total, 3000ms) linear infinite;
    }
  }
}

/*
 * Button Animation Keyframes
 * 0-50%: アニメーション部分
 * 50-100%: 休止部分（ループ間隔を実現）
 * --button-animation-total = duration + interval で使用
 */

@keyframes button-shake-01 {
  0%, 50%, 100% {
    transform: translateX(0);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: translateX(-2px);
  }
  10%, 20%, 30%, 40% {
    transform: translateX(2px);
  }
}

@keyframes button-bounce-01 {
  0%, 10%, 25%, 40%, 50%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-6px);
  }
  30% {
    transform: translateY(-3px);
  }
}

@keyframes button-heartbeat-01 {
  0%, 50%, 100% {
    transform: scale(1);
  }
  7% {
    transform: scale(1.05);
  }
  14% {
    transform: scale(1);
  }
  21% {
    transform: scale(1.08);
  }
  35% {
    transform: scale(1);
  }
}

@keyframes button-wobble-01 {
  0%, 50%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  8% {
    transform: translateX(-4px) rotate(-3deg);
  }
  16% {
    transform: translateX(3px) rotate(2deg);
  }
  24% {
    transform: translateX(-2px) rotate(-1deg);
  }
  32% {
    transform: translateX(1px) rotate(1deg);
  }
  40% {
    transform: translateX(-1px) rotate(0deg);
  }
}

@keyframes button-swing-01 {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-3deg);
  }
}

@keyframes button-rubberband-01 {
  0%, 50%, 100% {
    transform: scale3d(1, 1, 1);
  }
  15% {
    transform: scale3d(1.15, 0.85, 1);
  }
  20% {
    transform: scale3d(0.85, 1.15, 1);
  }
  25% {
    transform: scale3d(1.08, 0.92, 1);
  }
  33% {
    transform: scale3d(0.95, 1.05, 1);
  }
  40% {
    transform: scale3d(1.03, 0.97, 1);
  }
}

@keyframes button-tada-01 {
  0%, 50%, 100% {
    transform: scale(1) rotate(0deg);
  }
  5%, 10% {
    transform: scale(0.95) rotate(-2deg);
  }
  15%, 25%, 35%, 45% {
    transform: scale(1.05) rotate(2deg);
  }
  20%, 30%, 40% {
    transform: scale(1.05) rotate(-2deg);
  }
}

@keyframes button-pulse-01 {
  0%, 50%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.08);
  }
}

@keyframes button-flash-01 {
  0%, 25%, 50%, 100% {
    opacity: 1;
  }
  12%, 38% {
    opacity: 0.3;
  }
}

@keyframes button-headshake-01 {
  0%, 25%, 50%, 100% {
    transform: translateX(0) rotateY(0deg);
  }
  3% {
    transform: translateX(-4px) rotateY(-6deg);
  }
  9% {
    transform: translateX(3px) rotateY(5deg);
  }
  16% {
    transform: translateX(-2px) rotateY(-3deg);
  }
  22% {
    transform: translateX(1px) rotateY(2deg);
  }
}

@keyframes button-pop-01 {
  0%, 50%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(0.95);
  }
  30% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(0.98);
  }
}

@keyframes button-vibrate-01 {
  0%, 50%, 100% {
    transform: translate(0);
  }
  5% {
    transform: translate(-1px, 1px);
  }
  10% {
    transform: translate(1px, -1px);
  }
  15% {
    transform: translate(-1px, -1px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  25% {
    transform: translate(-1px, 0);
  }
  30% {
    transform: translate(1px, 0);
  }
  35% {
    transform: translate(0, -1px);
  }
  40% {
    transform: translate(0, 1px);
  }
  45% {
    transform: translate(-1px, 1px);
  }
}

.button-animation-preview-wrapper {
  &.zenblocks-button-animation-shake-01 .is-force-animation {
    animation: button-shake-01 200ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-bounce-01 .is-force-animation {
    animation: button-bounce-01 270ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-heartbeat-01 .is-force-animation {
    animation: button-heartbeat-01 270ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-wobble-01 .is-force-animation {
    animation: button-wobble-01 300ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-swing-01 .is-force-animation {
    transform-origin: top center;
    animation: button-swing-01 300ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-rubberband-01 .is-force-animation {
    animation: button-rubberband-01 350ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-tada-01 .is-force-animation {
    animation: button-tada-01 400ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-pulse-01 .is-force-animation {
    animation: button-pulse-01 250ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-flash-01 .is-force-animation {
    animation: button-flash-01 300ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-headshake-01 .is-force-animation {
    animation: button-headshake-01 300ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-pop-01 .is-force-animation {
    animation: button-pop-01 300ms ease-in-out infinite;
  }
  &.zenblocks-button-animation-vibrate-01 .is-force-animation {
    animation: button-vibrate-01 150ms linear infinite;
  }
}