/* ============================================
   SUCCESS CELEBRATION — Confetti + Checkmark
   Lightweight CSS animations for booking
   confirmations, saves, and achievements
   ============================================ */

/* --- Celebration Overlay Container --- */
.celebration-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

/* --- Confetti Particles (CSS-only) --- */
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(-20vh) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) rotate(720deg) scale(0.5);
  }
}

@keyframes confetti-sway {
  0%, 100% { margin-left: 0; }
  25% { margin-left: 30px; }
  75% { margin-left: -30px; }
}

.confetti-particle {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 3s ease-in forwards, confetti-sway 1.5s ease-in-out infinite;
}

/* Color variants */
.confetti-particle--gold { background: #d4af37; }
.confetti-particle--amber { background: #f59e0b; }
.confetti-particle--blue { background: #3b82f6; }
.confetti-particle--green { background: #22c55e; }
.confetti-particle--purple { background: #8b5cf6; }
.confetti-particle--pink { background: #ec4899; }
.confetti-particle--white { background: #ffffff; box-shadow: 0 0 4px rgba(255,255,255,0.5); }

/* Shape variants */
.confetti-particle--circle { border-radius: 50%; width: 8px; height: 8px; }
.confetti-particle--rect { width: 6px; height: 14px; border-radius: 1px; }
.confetti-particle--star {
  width: 0; height: 0; background: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid currentColor;
}

/* --- Success Checkmark Animation --- */
@keyframes check-circle-grow {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  50% { transform: scale(1.1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes check-draw {
  0% { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

@keyframes check-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.3)); }
  50% { filter: drop-shadow(0 0 24px rgba(34, 197, 94, 0.6)); }
}

.success-check {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 100000;
  pointer-events: none;
  animation: check-circle-grow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.success-check svg {
  width: 80px;
  height: 80px;
}

.success-check .check-circle {
  fill: rgba(34, 197, 94, 0.15);
  stroke: #22c55e;
  stroke-width: 2;
  animation: check-glow 1.5s ease-in-out 0.6s infinite;
}

.success-check .check-mark {
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: check-draw 0.4s ease-out 0.3s forwards;
}

/* --- Gold Burst Ring --- */
@keyframes burst-ring {
  0% { transform: scale(0); opacity: 0.8; border-width: 4px; }
  60% { opacity: 0.4; }
  100% { transform: scale(3); opacity: 0; border-width: 0; }
}

.burst-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 4px solid #d4af37;
  pointer-events: none;
  z-index: 99998;
  animation: burst-ring 0.8s ease-out forwards;
}

/* --- Gold Star Scatter --- */
@keyframes star-scatter {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { opacity: 0; }
}

.star-particle {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 99999;
  color: #d4af37;
  font-size: 14px;
  animation: star-scatter 1s ease-out forwards;
}

/* --- Toast Success Enhancement --- */
.ds-toast--celebrate {
  border-left: 4px solid #22c55e;
  overflow: visible;
}
.ds-toast--celebrate::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(212, 175, 55, 0.1));
  z-index: -1;
  animation: check-glow 2s ease-in-out infinite;
}

/* --- Light Mode Overrides --- */
[data-theme="light"] .success-check .check-circle,
html.theme-light .success-check .check-circle {
  fill: rgba(34, 197, 94, 0.1);
}

[data-theme="light"] .burst-ring,
html.theme-light .burst-ring {
  border-color: #b45309;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .confetti-particle { animation: none !important; display: none; }
  .success-check { animation-duration: 0.01ms !important; }
  .success-check .check-mark { animation-duration: 0.01ms !important; stroke-dashoffset: 0; }
  .burst-ring { animation: none !important; display: none; }
  .star-particle { animation: none !important; display: none; }
}