:root {
  --meteor-color: #ffffff; /* JS 會自動覆蓋 */
}

.meteors {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    var(--meteor-color) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(-45deg);
  opacity: 0;
  animation: meteor-fall 6s linear infinite;
  box-shadow: 0 0 10px var(--meteor-color);
}

.meteor::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--meteor-color), transparent);
  animation: tail 3s linear infinite;
}

@keyframes meteor-fall {
  0% { transform: translateY(-150%) translateX(-50%) rotate(-45deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(150vh) translateX(50vw) rotate(-45deg); opacity: 0; }
}

.meteor.delay-1 { animation-delay: 1.5s; }
.meteor.delay-2 { animation-delay: 3s; }
.meteor.delay-3 { animation-delay: 5s; }
.meteor.delay-4 { animation-delay: 7s; }

.meteor:nth-child(1) { left: 20%; top: -10%; animation-duration: 2.5s; }
.meteor:nth-child(2) { left: 45%; top: -20%; animation-duration: 3.2s; }
.meteor:nth-child(3) { left: 70%; top: -5%;  animation-duration: 2.8s; }
.meteor:nth-child(4) { left: 85%; top: -15%; animation-duration: 4.2s; }