/* Transaction Celebration - BALANCED */

/* ===== FLASH ===== */
.celeb-flash {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  animation: celeb-flash-anim 0.4s ease-out forwards;
}
.celeb-flash.small { background: radial-gradient(circle at center, rgba(255,215,0,0.4) 0%, transparent 60%); }
.celeb-flash.medium { background: radial-gradient(circle at center, rgba(255,215,0,0.5) 0%, rgba(255,180,0,0.2) 40%, transparent 70%); }
.celeb-flash.large { background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(255,215,0,0.5) 30%, transparent 70%); }
.celeb-flash.mega { background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(255,215,0,0.6) 25%, rgba(255,100,0,0.3) 50%, transparent 80%); }

@keyframes celeb-flash-anim {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== RING ===== */
.celeb-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border: 4px solid #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 20px #ffd700;
  z-index: 99999;
  pointer-events: none;
  animation: celeb-ring-anim 0.5s ease-out forwards;
}

@keyframes celeb-ring-anim {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(5); opacity: 0; }
}

/* ===== BURST (nổ tung) ===== */
.celeb-burst-container {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100000;
  pointer-events: none;
}

.celeb-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: celeb-burst-anim 0.5s ease-out forwards;
  animation-delay: var(--delay);
}

@keyframes celeb-burst-anim {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ===== CONFETTI ===== */
.celeb-confetti-container {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  pointer-events: none;
}

.celeb-confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: celeb-confetti-anim 1s ease-out forwards;
  animation-delay: var(--delay);
}

@keyframes celeb-confetti-anim {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.3); opacity: 0; }
}

/* ===== COINS ===== */
.celeb-coin-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 99997;
  pointer-events: none;
}

.celeb-coin {
  position: absolute;
  top: -50px;
  font-size: 28px;
  animation: celeb-coin-anim 2s ease-in forwards;
  animation-delay: var(--delay);
}

@keyframes celeb-coin-anim {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ===== POPUP ===== */
.celeb-popup {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 100001;
  pointer-events: none;
  animation: celeb-popup-anim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes celeb-popup-anim {
  0% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.5); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ===== AMOUNT ===== */
.celeb-amount {
  font-weight: 900;
  font-family: 'Arial Black', Arial, sans-serif;
  white-space: nowrap;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
}

.celeb-amount.micro { font-size: 1.5rem; }
.celeb-amount.small { font-size: 2rem; }
.celeb-amount.medium {
  font-size: 2.5rem;
  color: #ffa500;
  animation: celeb-popup-anim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, celeb-pulse 0.3s ease-in-out 0.4s 2;
}
.celeb-amount.large {
  font-size: 3rem;
  color: #ff8c00;
  text-shadow: 0 0 15px rgba(255,140,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
  animation: celeb-popup-anim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, celeb-pulse 0.25s ease-in-out 0.4s 3;
}
.celeb-amount.mega {
  font-size: 3.5rem;
  color: #ff6600;
  text-shadow: 0 0 20px rgba(255,100,0,0.9), 0 0 40px rgba(255,50,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
  animation: celeb-popup-anim 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, celeb-pulse 0.2s ease-in-out 0.5s 5;
}

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

/* ===== MESSAGE ===== */
.celeb-msg {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-top: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ===== STREAK ===== */
.celeb-streak {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ff6600;
  margin-top: 5px;
  text-shadow: 0 0 8px rgba(255,100,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
  animation: celeb-streak-anim 0.3s ease-out 0.3s forwards;
  opacity: 0;
}

@keyframes celeb-streak-anim {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===== DEVICE NAME ===== */
.celeb-device {
  font-size: 1rem;
  font-weight: 600;
  color: #88ccff;
  margin-bottom: 5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ===== TODAY TOTAL ===== */
.celeb-today {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  margin-top: 10px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
  border-radius: 20px;
  display: inline-block;
  animation: celeb-today-anim 0.4s ease-out 0.5s forwards;
  opacity: 0;
}

.celeb-today strong {
  color: #ffd700;
}

@keyframes celeb-today-anim {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== SHAKE ===== */
.celeb-shake {
  animation: celeb-shake-anim 0.4s ease-out;
}

@keyframes celeb-shake-anim {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, -3px); }
  20% { transform: translate(6px, 3px); }
  30% { transform: translate(-5px, -2px); }
  40% { transform: translate(5px, 2px); }
  50% { transform: translate(-3px, -1px); }
  60% { transform: translate(3px, 1px); }
  70% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .celeb-amount.micro { font-size: 1.3rem; }
  .celeb-amount.small { font-size: 1.6rem; }
  .celeb-amount.medium { font-size: 2rem; }
  .celeb-amount.large { font-size: 2.4rem; }
  .celeb-amount.mega { font-size: 2.8rem; }
  .celeb-msg { font-size: 1.1rem; }
  .celeb-streak { font-size: 1.1rem; }
  .celeb-coin { font-size: 22px; }
}