/* ==========================================================================
   NIỆM - ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* 1. Sóng âm thanh lan tỏa (Sound Wave Ripple) */
.sound-wave-ripple {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  pointer-events: none;
  animation: rippleExpand 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.ripple-mo {
  border: 2px solid rgba(229, 179, 100, 0.7);
  box-shadow: 0 0 15px rgba(229, 179, 100, 0.4);
}

.ripple-chuong {
  border: 2px solid rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

@keyframes rippleExpand {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* 2. Hiệu ứng gõ Mõ nhún xuống (Mo Hit Bounce) */
@keyframes moHitAnim {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.92) translateY(5px);
  }
  60% {
    transform: scale(1.04) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.active-hit {
  animation: moHitAnim 0.16s ease-out;
}

/* 3. Hiệu ứng hoa sen bồng bềnh (Lotus Float) */
@keyframes floatLotus {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

/* 4. Hiệu ứng hào quang nhẹ (Subtle Aura Glow) */
@keyframes auraPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.aura-glow {
  animation: auraPulse 4s ease-in-out infinite;
}

/* 5. Chuyển động mượt mà khi xuất hiện */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}