.cabane-celebration {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.cabane-celebration-burst span {
  position: absolute;
  left: var(--origin-x);
  top: var(--origin-y);
  opacity: 0;
  animation: cabane-celebration-burst var(--duration) cubic-bezier(.2,.7,.3,1) var(--delay, 0s) both;
  will-change: opacity, transform;
}

.cabane-celebration-rectangle {
  width: 11px;
  height: 15px;
  border-radius: 3px;
  background: var(--particle-color);
}

.cabane-celebration-star {
  width: 16px;
  height: 16px;
  background: var(--particle-color);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.cabane-celebration-burst .cabane-celebration-firefly {
  width: 5px;
  height: 7px;
  border-radius: 50%;
  background: #fff3b4;
  box-shadow: 0 0 7px 2px #d5b95e66;
  animation: cabane-firefly 1.1s ease-out var(--delay, 0s) both;
}

@keyframes cabane-firefly {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.5); }
  20% { opacity: 1; }
  60% { opacity: .8; }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--drift-x)), calc(var(--y) - 100px)) scale(.7); }
}

@keyframes cabane-celebration-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(var(--start-scale));
  }
  12% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--x), var(--y)) translateX(var(--drift-x)) rotate(var(--rotation)) scale(var(--end-scale));
  }
}

@media(max-width: 480px) {
  .cabane-celebration-rectangle {
    width: 14px;
    height: 18px;
  }

  .cabane-celebration-star {
    width: 20px;
    height: 20px;
  }
}

@media(prefers-reduced-motion: reduce) {
  .cabane-celebration-burst span {
    animation: none;
    display: none;
  }
}