.celebration-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 210px;
  margin: 0 auto 17px;
  overflow: hidden;
  border: 1px solid #405b4929;
  border-radius: 16px;
  background: #344e44;
  pointer-events: none;
}
.celebration-pony { position: absolute; width: 200px; height: 160px; left: 50%; bottom: -2px; transform: translateX(-50%); z-index: 2; }
.celebration-pony svg { width: 100%; height: 100%; }

.celebration-landscape,
.celebration-fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.celebration-firework {
  position: absolute;
  width: var(--celebration-size);
  height: var(--celebration-size);
  transform: translate(-50%, -50%);
  color: var(--celebration-color);
}

.celebration-rocket {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 9px;
  border-radius: 50%;
  background: #fff2ca;
  box-shadow: 0 0 7px var(--celebration-color);
  opacity: 0;
  animation: celebration-launch .65s cubic-bezier(.15, .65, .3, 1) var(--celebration-delay) both;
}

.celebration-rocket::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 1px;
  width: 2px;
  height: 37px;
  background: linear-gradient(var(--celebration-color), transparent);
}

.celebration-burst {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.celebration-rays,
.celebration-sparks {
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation-delay: calc(var(--celebration-delay) + .61s);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

.celebration-rays {
  animation-name: celebration-bloom;
  animation-duration: 1.14s;
  animation-timing-function: cubic-bezier(.14, .66, .2, 1);
}

.celebration-sparks {
  animation-name: celebration-stardust;
  animation-duration: 1.35s;
  animation-timing-function: ease-out;
}

.celebration-ground-glow {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 181px;
  height: 54px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, #e4d49a33, transparent 70%);
}

.celebration-mole {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 157px;
  height: 157px;
  overflow: visible;
  transform: translateX(-50%);
}

.celebration-mole-cheer {
  transform-origin: 80px 135px;
  animation: celebration-cheer .78s ease-in-out .25s 2;
}

.celebration-gold-star {
  position: absolute;
  width: 22px;
  height: 22px;
  animation: celebration-star-arrive .65s ease-out 1.1s both;
}

.celebration-gold-star-left {
  left: calc(50% - 104px);
  bottom: 55px;
  rotate: -17deg;
}

.celebration-gold-star-right {
  right: calc(50% - 101px);
  bottom: 87px;
  width: 16px;
  height: 16px;
  rotate: 14deg;
  animation-delay: 1.5s;
}

@keyframes celebration-launch {
  0% { opacity: 0; transform: translate(-50%, 160px); }
  12% { opacity: .95; }
  84% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

@keyframes celebration-bloom {
  0% { opacity: 0; transform: scale(.12); }
  14% { opacity: .95; }
  46% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.13); }
}

@keyframes celebration-stardust {
  0% { opacity: 0; transform: scale(.12); }
  18% { opacity: .95; }
  55% { opacity: .85; }
  100% { opacity: .48; transform: scale(1.1); }
}

@keyframes celebration-cheer {
  0%, 100% { transform: translateY(0) scale(1); }
  44% { transform: translateY(-5px) scale(1.025, 1); }
  76% { transform: translateY(1px) scale(1.01, .98); }
}

@keyframes celebration-star-arrive {
  from { opacity: 0; transform: translateY(7px) scale(.4); }
  to { opacity: .9; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .celebration-scene { height: 180px; border-radius: 12px; }
  .celebration-mole { width: 143px; height: 143px; }
  .celebration-firework { width: calc(var(--celebration-size) * .86); height: calc(var(--celebration-size) * .86); }
}

@media (max-width: 480px) {
  .celebration-scene { height: 170px; }
  .celebration-mole { width: 135px; height: 135px; }
  .celebration-gold-star-left { left: calc(50% - 88px); bottom: 48px; }
  .celebration-gold-star-right { right: calc(50% - 86px); bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-scene *,
  .celebration-scene *::before,
  .celebration-scene *::after { animation: none !important; }
  .celebration-rocket,
  .celebration-rays { display: none; }
  .celebration-sparks { opacity: .55; transform: scale(1.1); }
  .celebration-gold-star { opacity: .9; }
}

.celebration-pet { position: absolute; width: 145px; height: 166px; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 2; }
.celebration-pet svg { display: block; width: 100%; height: 100%; }