/* ── Party Popper & Confetti Overlay ─────────────────────────── */

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#confetti-canvas.active {
  opacity: 1;
}

/* Party popper emojis anchored to left/right edges */
.party-popper {
  position: fixed;
  bottom: 40%;
  font-size: 5rem;
  line-height: 1;
  z-index: 9001;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.25));
}

.party-popper-left {
  left: -6rem;
  transform: rotate(20deg);
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.party-popper-right {
  right: -6rem;
  transform: scaleX(-1) rotate(20deg);
  transition: right 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Active state — slide in from both sides */
.party-popper-left.pop-in {
  left: 1.5rem;
  opacity: 1;
}

.party-popper-right.pop-in {
  right: 1.5rem;
  opacity: 1;
  transform: scaleX(-1) rotate(20deg);
}

/* Bounce animation once fully on-screen */
@keyframes popperBounce {
  0%, 100% { transform: rotate(20deg) scale(1); }
  25%       { transform: rotate(28deg) scale(1.15); }
  50%       { transform: rotate(14deg) scale(0.95); }
  75%       { transform: rotate(24deg) scale(1.08); }
}

@keyframes popperBounceRight {
  0%, 100% { transform: scaleX(-1) rotate(20deg) scale(1); }
  25%       { transform: scaleX(-1) rotate(28deg) scale(1.15); }
  50%       { transform: scaleX(-1) rotate(14deg) scale(0.95); }
  75%       { transform: scaleX(-1) rotate(24deg) scale(1.08); }
}

.party-popper-left.bounce  { animation: popperBounce      0.6s ease 0.55s both; }
.party-popper-right.bounce { animation: popperBounceRight 0.6s ease 0.55s both; }

/* Slide back out */
.party-popper-left.pop-out {
  left: -6rem;
  opacity: 0;
  transform: rotate(20deg);
}

.party-popper-right.pop-out {
  right: -6rem;
  opacity: 0;
  transform: scaleX(-1) rotate(20deg);
}