/* ==========================================================================
   Micro-Animations, Keyframes & Interactive Polish
   ========================================================================== */

/* Pulse dot */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(212, 175, 55, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

/* Audio wave animation */
.audio-wave-bars {
  display: none;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.modal-play-audio-btn.audio-active .audio-wave-bars,
.hero-audio-btn.audio-active .audio-wave-bars {
  display: inline-flex;
}

.audio-wave-bars span {
  display: inline-block;
  width: 3px;
  height: 100%;
  background-color: var(--accent-gold);
  border-radius: 3px;
  animation: audio-bounce 0.8s ease infinite alternate;
}

.audio-wave-bars span:nth-child(2) { animation-delay: 0.2s; }
.audio-wave-bars span:nth-child(3) { animation-delay: 0.4s; }
.audio-wave-bars span:nth-child(4) { animation-delay: 0.1s; }

@keyframes audio-bounce {
  0% { height: 4px; }
  100% { height: 16px; }
}

/* Ripple effect on buttons */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-spread 0.6s linear;
  background-color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
  top: 50%;
  left: 50%;
}

@keyframes ripple-spread {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Confetti particles */
.confetti-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: particle-burst 1.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes particle-burst {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

/* Celebration toast */
.celebration-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(15, 23, 49, 0.95);
  border: 1px solid var(--accent-gold);
  box-shadow: 0 10px 35px rgba(212, 175, 55, 0.3);
  color: var(--text-primary);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(16px);
}

.celebration-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Ambient bar play animation */
#ambient-play-toggle.playing {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
}

/* Card hover glow */
@keyframes gold-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.supreme-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
  background-size: 200% 100%;
  animation: gold-shimmer 4s infinite linear;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}