.starfall-container {
  position: fixed;
  inset: 0;
  height: calc(100 * var(--vh, 1vh));
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.starfall-container .starfield {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateZ(45deg);
}

.starfall-container .falling-star {
  position: absolute;
  height: 2px;
  background: linear-gradient(-45deg, var(--color-white), rgba(255, 255, 255, 0));
  border-radius: var(--radius-pill);
  filter: drop-shadow(0 0 6px var(--color-white-70));
  animation:
    star-tail 3000ms ease-in-out infinite,
    star-falling 3000ms ease-in-out infinite;
}

.starfall-container .falling-star::before,
.starfall-container .falling-star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0), var(--color-white), rgba(255, 255, 255, 0));
  border-radius: 100%;
  animation: star-glow 3000ms ease-in-out infinite;
}

.starfall-container .falling-star::before {
  transform: translateX(50%) rotateZ(45deg);
}

.starfall-container .falling-star::after {
  transform: translateX(50%) rotateZ(-45deg);
}

@keyframes star-tail {
  0%   { width: 0; }
  30%  { width: 100px; }
  100% { width: 0; }
}

@keyframes star-glow {
  0%   { width: 0; }
  50%  { width: 30px; }
  100% { width: 0; }
}

@keyframes star-falling {
  0%   { transform: translateX(0); }
  100% { transform: translateX(300px); }
}