.confetti-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--confetti-celebration-z, 999);
  overflow: hidden;
  pointer-events: none;
}

.confetti-celebration-message {
  position: absolute;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 980px);
  padding: clamp(18px, 3.2vw, 34px) clamp(28px, 5vw, 64px);
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(234, 251, 255, 0.96), rgba(207, 245, 255, 0.92));
  box-shadow: 0 22px 54px rgba(80, 180, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #2b8fbd;
  font-size: clamp(2.25rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  transform: translateX(-50%) scale(0.86);
  animation: confetti-celebration-message var(--confetti-celebration-duration, 2500ms)
    cubic-bezier(0.16, 0.88, 0.2, 1) both;
}

.confetti-celebration-message.is-center {
  top: 42%;
}

.confetti-celebration-message.is-top {
  top: max(92px, 12vh);
}

.confetti-celebration-piece {
  position: absolute;
  left: var(--confetti-start-x);
  top: var(--confetti-start-y);
  width: var(--confetti-size);
  height: var(--confetti-size);
  background: var(--confetti-color);
  opacity: 0.92;
  transform: translate(-50%, -50%) rotate(var(--confetti-rotate));
  animation: confetti-celebration-piece var(--confetti-duration) cubic-bezier(0.08, 0.78, 0.12, 1) both;
  animation-delay: var(--confetti-delay);
}

.confetti-celebration-piece.is-ribbon {
  width: calc(var(--confetti-size) * 0.42);
  height: calc(var(--confetti-size) * 1.9);
  border-radius: 999px;
}

.confetti-celebration-piece.is-circle {
  border-radius: 50%;
}

.confetti-celebration-piece.is-star {
  clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
}

.confetti-celebration-piece.is-heart {
  background: transparent;
}

.confetti-celebration-piece.is-heart::before,
.confetti-celebration-piece.is-heart::after {
  position: absolute;
  width: 54%;
  height: 84%;
  border-radius: 999px 999px 0 0;
  background: var(--confetti-color);
  content: "";
}

.confetti-celebration-piece.is-heart::before {
  left: 50%;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.confetti-celebration-piece.is-heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes confetti-celebration-piece {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(var(--confetti-rotate)) scale(0.62);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--confetti-end-x) * 0.46), var(--confetti-pop-y))
      rotate(calc(var(--confetti-rotate) + 160deg)) scale(1.12);
  }

  36% {
    opacity: 0.94;
    transform: translate(-50%, -50%)
      translate(calc(var(--confetti-end-x) * 0.72), calc(var(--confetti-end-y) * 0.46))
      rotate(calc(var(--confetti-rotate) + var(--confetti-spin) * 0.48)) scale(1);
  }

  78% {
    opacity: 0.56;
    transform: translate(-50%, -50%)
      translate(calc(var(--confetti-end-x) + var(--confetti-sway)), calc(var(--confetti-end-y) * 0.86))
      rotate(calc(var(--confetti-rotate) + var(--confetti-spin))) scale(0.9);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--confetti-end-x), var(--confetti-end-y))
      rotate(calc(var(--confetti-rotate) + var(--confetti-spin) + 80deg)) scale(0.72);
  }
}

@keyframes confetti-celebration-message {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(22px) scale(0.72);
  }

  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.1);
  }

  22%,
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-celebration-piece {
    animation-name: confetti-celebration-piece-reduced;
  }

  .confetti-celebration-message {
    animation-duration: 900ms !important;
  }
}

@keyframes confetti-celebration-piece-reduced {
  from {
    opacity: 0.7;
  }

  to {
    opacity: 0;
  }
}