/* ====================================
   キラキラ演出（限定価格用・豪華版・改良版）
   ==================================== */

/* 親コンテナ */
.section8-limited-price-amount {
  position: relative !important;
  overflow: visible;
}

/* キラ共通 */
.sparkle {
  position: absolute;
  width: clamp(18px, 4.5vw, 34px);
  height: clamp(18px, 4.5vw, 34px);
  pointer-events: none;
  opacity: 1 !important; /* 親の.appearの影響を受けないように */
  z-index: 2;
  display: block;
}

/* 右上（内側に） */
.sparkle-1 {
  top: clamp(6px, 1.6vw, 14px);
  right: clamp(8px, 2.0vw, 16px);
}

/* 左下（内側に） */
.sparkle-2 {
  bottom: clamp(0px, 0.5vw, 8px);
  left: clamp(0px, 0.5vw, 8px);
}

/* 中央：金額の下 */
.sparkle-3 {
  bottom: clamp(0px, 1vw, 10px);
  left: 50%;
  transform: translateX(-50%); /* 位置固定用 */
  opacity: 0;
}

/* 画像（見た目はここ） */
.sparkle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background-image: url('../images/sparkle.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* グロー弱め（今のは強すぎ＆安っぽくなりやすい） */
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.65))
          drop-shadow(0 0 18px rgba(255, 215, 0, 0.35));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

/* 右上のキラキラ：100px */
.sparkle-1::before {
  width: 100px;
  height: 100px;
}

/* 左下のキラキラ：80px */
.sparkle-2::before {
  width: 80px;
  height: 80px;
}

/* 背景グロー（あってもいいが弱め） */
.sparkle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.35) 0%,
    rgba(255, 215, 0, 0.18) 30%,
    transparent 70%
  );
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

/* アニメ（pseudoに適用） */
@keyframes sparkle-pop {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.6);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.6);
  }
}

@keyframes glow-pop {
  0% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

/* 発火時：金額表示完了後（5.5秒後）に開始・3回繰り返し */
.sparkle-active .sparkle-1::before {
  animation: sparkle-pop 1800ms ease-out 5500ms 3;
}
.sparkle-active .sparkle-1::after {
  animation: glow-pop 1800ms ease-out 5500ms 3;
}

.sparkle-active .sparkle-2::before {
  animation: sparkle-pop 1800ms ease-out 5900ms 3;
}
.sparkle-active .sparkle-2::after {
  animation: glow-pop 1800ms ease-out 5900ms 3;
}

.sparkle-active .sparkle-3::before {
  animation: sparkle-pop 1800ms ease-out 6300ms 3;
}
.sparkle-active .sparkle-3::after {
  animation: glow-pop 1800ms ease-out 6300ms 3;
}

/* アニメーション無効化（アクセシビリティ対応） */
@media (prefers-reduced-motion: reduce) {
  .sparkle {
    display: none;
  }
}

/* デバッグ用：常に表示 */
/*
.sparkle::before,
.sparkle::after {
  opacity: 1 !important;
  animation: none !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
}
*/