.button-animation-preview-selector {
  padding: 0;
}

.button-animation-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.button-animation-preview-item {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.2s ease;
  background: #f0f0f0;
}

.button-animation-preview-item:hover {
  border-color: #2669e6;
  background: #e8f4fd;
}

.button-animation-preview-item.is-active {
  border-color: #2669e6;
  background: #e8f4fd;
  box-shadow: 0 0 0 1px #2669e6;
}

.button-animation-preview-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
}

.button-animation-preview-button {
  position: relative;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 3px;
  background: #1e1e1e;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
}

.button-animation-preview-button .wp-block-zenblocks-button-basic-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-animation-preview-button .wp-block-zenblocks-button-basic-text {
  display: block;
}

.button-animation-preview-button .wp-block-zenblocks-button-basic-text .default {
  display: block;
}

.button-animation-preview-button .wp-block-zenblocks-button-basic-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}

.button-animation-preview-button .wp-block-zenblocks-button-basic-bg-color {
  position: absolute;
  inset: 0;
  background: #1e1e1e;
}
.button-animation-preview-label {
  text-align: center;
}

.button-animation-preview-label .button-animation-name {
  font-size: 11px;
  color: #1e1e1e;
  font-weight: 500;
}

/* ====================================
   プレビュー用キーフレーム（0-100%でアニメーション完了）
   実際のボタンは別のキーフレーム（静止期間付き）を使用
   ==================================== */

@keyframes button-preview-shake-01 {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

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

@keyframes button-preview-heartbeat-01 {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.05); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

@keyframes button-preview-wobble-01 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-4px) rotate(-3deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  45% { transform: translateX(-2px) rotate(-1deg); }
  60% { transform: translateX(1px) rotate(1deg); }
  75% { transform: translateX(-1px) rotate(0deg); }
}

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

@keyframes button-preview-rubberband-01 {
  0%, 100% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.15, 0.85, 1); }
  40% { transform: scale3d(0.85, 1.15, 1); }
  50% { transform: scale3d(1.08, 0.92, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.03, 0.97, 1); }
}

@keyframes button-preview-tada-01 {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.95) rotate(-2deg); }
  30%, 50%, 70%, 90% { transform: scale(1.05) rotate(2deg); }
  40%, 60%, 80% { transform: scale(1.05) rotate(-2deg); }
}

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

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

@keyframes button-preview-headshake-01 {
  0%, 100% { transform: translateX(0) rotateY(0deg); }
  6.5% { transform: translateX(-4px) rotateY(-6deg); }
  18.5% { transform: translateX(3px) rotateY(5deg); }
  31.5% { transform: translateX(-2px) rotateY(-3deg); }
  43.5% { transform: translateX(1px) rotateY(2deg); }
  50% { transform: translateX(0) rotateY(0deg); }
}

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

@keyframes button-preview-vibrate-01 {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-1px, 1px); }
  20% { transform: translate(1px, -1px); }
  30% { transform: translate(-1px, -1px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, 0); }
  60% { transform: translate(1px, 0); }
  70% { transform: translate(0, -1px); }
  80% { transform: translate(0, 1px); }
  90% { transform: translate(-1px, 1px); }
}

/* ====================================
   ボタンアニメーション プレビュー用スタイル
   ==================================== */

/* shake-01: 左右に揺れる */
.button-animation-preview-shake-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-shake-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-shake-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* bounce-01: 上下に跳ねる */
.button-animation-preview-bounce-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-bounce-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-bounce-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* heartbeat-01: 心臓の鼓動のように拡縮 */
.button-animation-preview-heartbeat-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-heartbeat-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-heartbeat-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* wobble-01: グラグラ揺れる */
.button-animation-preview-wobble-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-wobble-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-wobble-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* swing-01: 振り子のように揺れる */
.button-animation-preview-swing-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-swing-01.is-hover-enabled .button-animation-preview-button:hover {
  transform-origin: top center;
  animation: button-preview-swing-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* rubberband-01: ゴムのように伸縮 */
.button-animation-preview-rubberband-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-rubberband-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-rubberband-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* tada-01: 注目を集める動き */
.button-animation-preview-tada-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-tada-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-tada-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* pulse-01: 拡大縮小を繰り返す */
.button-animation-preview-pulse-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-pulse-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-pulse-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* flash-01: 点滅する */
.button-animation-preview-flash-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-flash-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-flash-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* headshake-01: 首を横に振る */
.button-animation-preview-headshake-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-headshake-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-headshake-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* pop-01: ポンと飛び出す */
.button-animation-preview-pop-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-pop-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-pop-01 var(--button-animation-duration, 2000ms) var(--button-animation-easing, ease-in-out) infinite;
}

/* vibrate-01: 細かく振動する */
.button-animation-preview-vibrate-01 .button-animation-preview-button.is-force-animation,
.button-animation-preview-vibrate-01.is-hover-enabled .button-animation-preview-button:hover {
  animation: button-preview-vibrate-01 var(--button-animation-duration, 2000ms) linear infinite;
}