/* 🎆 Feuerwerk-Effekt für Silvester */

.fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

/* Raketen */
.rocket {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 15px;
  background: linear-gradient(to top, #ff6b00, #ffd700, #fff);
  border-radius: 50% 50% 0 0;
  opacity: 0;
}

.rocket:nth-child(1) { left: 10%; animation: launch 2s ease-out 0s infinite; }
.rocket:nth-child(2) { left: 20%; animation: launch 2s ease-out 0.7s infinite; }
.rocket:nth-child(3) { left: 35%; animation: launch 2s ease-out 1.4s infinite; }
.rocket:nth-child(4) { left: 50%; animation: launch 2s ease-out 2.1s infinite; }
.rocket:nth-child(5) { left: 65%; animation: launch 2s ease-out 2.8s infinite; }
.rocket:nth-child(6) { left: 80%; animation: launch 2s ease-out 3.5s infinite; }
.rocket:nth-child(7) { left: 90%; animation: launch 2s ease-out 4.2s infinite; }

@keyframes launch {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-80vh);
    opacity: 0;
  }
}

/* Explosionen */
.explosion-container {
  position: absolute;
  width: 8px;
  height: 8px;
}

.explosion-container:nth-child(8) { left: 10%; top: 20%; }
.explosion-container:nth-child(9) { left: 20%; top: 25%; }
.explosion-container:nth-child(10) { left: 35%; top: 18%; }
.explosion-container:nth-child(11) { left: 50%; top: 22%; }
.explosion-container:nth-child(12) { left: 65%; top: 20%; }
.explosion-container:nth-child(13) { left: 80%; top: 25%; }
.explosion-container:nth-child(14) { left: 90%; top: 18%; }

.explosion-container:nth-child(8) .explosion { animation-delay: 1s; }
.explosion-container:nth-child(9) .explosion { animation-delay: 1.7s; }
.explosion-container:nth-child(10) .explosion { animation-delay: 2.4s; }
.explosion-container:nth-child(11) .explosion { animation-delay: 3.1s; }
.explosion-container:nth-child(12) .explosion { animation-delay: 3.8s; }
.explosion-container:nth-child(13) .explosion { animation-delay: 4.5s; }
.explosion-container:nth-child(14) .explosion { animation-delay: 5.2s; }

.explosion {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: explode 1.5s ease-out infinite;
}

/* Partikel-Richtungen */
.explosion:nth-child(1) { --x: -50px; --y: -50px; background: #ff4444; box-shadow: 0 0 8px #ff4444; }
.explosion:nth-child(2) { --x: 0px; --y: -70px; background: #ffff44; box-shadow: 0 0 8px #ffff44; }
.explosion:nth-child(3) { --x: 50px; --y: -50px; background: #44ff44; box-shadow: 0 0 8px #44ff44; }
.explosion:nth-child(4) { --x: -70px; --y: 0px; background: #44ffff; box-shadow: 0 0 8px #44ffff; }
.explosion:nth-child(5) { --x: 70px; --y: 0px; background: #4444ff; box-shadow: 0 0 8px #4444ff; }
.explosion:nth-child(6) { --x: -50px; --y: 50px; background: #ff44ff; box-shadow: 0 0 8px #ff44ff; }
.explosion:nth-child(7) { --x: 0px; --y: 70px; background: #ffd700; box-shadow: 0 0 8px #ffd700; }
.explosion:nth-child(8) { --x: 50px; --y: 50px; background: #ff6b6b; box-shadow: 0 0 8px #ff6b6b; }
.explosion:nth-child(9) { --x: -35px; --y: -60px; background: #fff; box-shadow: 0 0 8px #fff; }
.explosion:nth-child(10) { --x: 35px; --y: -60px; background: #ff4444; box-shadow: 0 0 8px #ff4444; }
.explosion:nth-child(11) { --x: -60px; --y: 35px; background: #44ff44; box-shadow: 0 0 8px #44ff44; }
.explosion:nth-child(12) { --x: 60px; --y: 35px; background: #ffd700; box-shadow: 0 0 8px #ffd700; }

@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0.3);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rocket, .explosion {
    display: none;
  }
}

@media (max-width: 768px) {
  .rocket:nth-child(n+5),
  .explosion-container:nth-child(n+12) {
    display: none;
  }
}