/* ランダムポップアニメーション用CSS */

/* ポップアニメーションの基本スタイル */
.random-pop-item {
  cursor: pointer;
}

/* ポップアニメーションがアクティブな時のスタイル */
.random-pop-item.pop-active {
  animation: popAnimation 1.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
  will-change: transform, filter;
}

/* ポップアニメーションのキーフレーム */
@keyframes popAnimation {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  30% {
    transform: scale(1.03);
    filter: brightness(1.08) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }

  70% {
    transform: scale(1.03);
    filter: brightness(1.08) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}