@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes floatUp {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}
@keyframes comet {
  0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  100% { transform: translateX(200vw) translateY(200vh) rotate(-45deg); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
body {
  background: #1c1c22;
}
#contenu {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  margin-top: 85px;
  padding: 15px;
}
.anim-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: rgba(85,85,95,0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: floatUp linear infinite;
}
.anim-particle:nth-child(1) { left: 5%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 0s; background: rgba(85,85,95,0.2); }
.anim-particle:nth-child(2) { left: 15%; width: 5px; height: 5px; animation-duration: 22s; animation-delay: 2s; background: rgba(85,85,95,0.25); }
.anim-particle:nth-child(3) { left: 25%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: 4s; background: rgba(85,85,95,0.15); }
.anim-particle:nth-child(4) { left: 35%; width: 6px; height: 6px; animation-duration: 25s; animation-delay: 1s; background: rgba(69,69,80,0.2); }
.anim-particle:nth-child(5) { left: 45%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: 3s; background: rgba(85,85,95,0.25); }
.anim-particle:nth-child(6) { left: 55%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 5s; background: rgba(85,85,95,0.15); }
.anim-particle:nth-child(7) { left: 65%; width: 2px; height: 2px; animation-duration: 23s; animation-delay: 0s; background: rgba(85,85,95,0.3); }
.anim-particle:nth-child(8) { left: 75%; width: 5px; height: 5px; animation-duration: 19s; animation-delay: 6s; background: rgba(69,69,80,0.25); }
.anim-particle:nth-child(9) { left: 85%; width: 3px; height: 3px; animation-duration: 21s; animation-delay: 2s; background: rgba(85,85,95,0.2); }
.anim-particle:nth-child(10) { left: 95%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: 4s; background: rgba(85,85,95,0.2); }
.anim-particle:nth-child(11) { left: 10%; width: 2px; height: 2px; animation-duration: 24s; animation-delay: 7s; background: rgba(85,85,95,0.15); }
.anim-particle:nth-child(12) { left: 30%; width: 5px; height: 5px; animation-duration: 14s; animation-delay: 1s; background: rgba(85,85,95,0.3); }
.anim-particle:nth-child(13) { left: 50%; width: 3px; height: 3px; animation-duration: 26s; animation-delay: 5s; background: rgba(85,85,95,0.25); }
.anim-particle:nth-child(14) { left: 70%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 3s; background: rgba(69,69,80,0.15); }
.anim-particle:nth-child(15) { left: 90%; width: 2px; height: 2px; animation-duration: 22s; animation-delay: 8s; background: rgba(85,85,95,0.2); }
.anim-comet {
  position: fixed;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(85,85,95,0.5), rgba(180,180,190,0.4));
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
  animation: comet linear infinite;
  filter: blur(0.5px);
}
.anim-comet::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 6px;
  background: rgba(180,180,190,0.7);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(85,85,95,0.5), 0 0 12px rgba(85,85,95,0.2);
}
.anim-comet:nth-child(16) { top: 10%; animation-duration: 8s; animation-delay: 0s; }
.anim-comet:nth-child(17) { top: 30%; animation-duration: 12s; animation-delay: 5s; width: 80px; }
.anim-comet:nth-child(18) { top: 60%; animation-duration: 10s; animation-delay: 10s; width: 100px; }
.anim-comet:nth-child(19) { top: 80%; animation-duration: 14s; animation-delay: 3s; width: 60px; }
.anim-comet:nth-child(20) { top: 45%; animation-duration: 9s; animation-delay: 7s; width: 90px; }