#meteor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.meteor-shower-item {
    position: absolute;
    width: 300px; /* Tail length */
    height: 1px;  /* Tail thickness */
    transform: rotate(-45deg); /* All meteors at -45 degree angle */
    background-image: linear-gradient(to right, #fff, rgba(255,255,255,0));
    animation-name: meteor-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0; /* Start hidden, animation will make it visible */
}

.meteor-shower-item::before {
    content: "";
    position: absolute;
    /* Position head at the start of the tail gradient */
    /* The tail gradient starts from left (white) to right (transparent) */
    /* So the head should be at the left end of the .meteor-shower-item */
    left: 0; 
    top: 50%; /* Vertically center relative to the 1px tail height */
    width: 4px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    box-shadow: 0 0 15px 3px #fff;
    /* Adjust margin-top to align with the 1px height tail */
    margin-top: -2.5px; /* (5px height / 2) - (1px tail height / 2) = 2.5px - 0.5px = -2px, but -2.5px centers it better */
    /* margin-left: -2px; /* If head is slightly wider than tail start */
}

/* 
  Animation based on user's reference.
  The margins will move the element relative to its rotated state.
  A rotate(-45deg) means:
  - Positive margin-top moves it towards bottom-right.
  - Negative margin-top moves it towards top-left.
  - Positive margin-left moves it towards bottom-left.
  - Negative margin-left moves it towards top-right.
  - Positive margin-right (effectively negative margin-left for LTR) moves it towards top-right.
  - Negative margin-right (effectively positive margin-left for LTR) moves it towards bottom-left.

  User's keyframes:
  0%   { opacity: 1; margin-top: -300px; margin-right: -300px; }
       This means move towards top-left (margin-top negative) and further top-leftish/top-rightish (margin-right negative).
       For a -45deg rotated element, this combination should make it appear from top-left off-screen.
  12%  { opacity: 0; }
  15%  { margin-top: 300px; margin-left: -600px; opacity: 0; }
       Move towards bottom-right (margin-top positive) and top-rightish (margin-left negative).
       This means it has crossed the screen and is exiting.
  100% { opacity: 0; }

  The animation makes the meteor appear, cross a short distance, then disappear and reset.
  The `top` and `left` in JS will set its starting "track".
  The animation will then move it relative to this starting point using margins.
*/
@keyframes meteor-fall {
  0% {
    opacity: 1;
    /* Initial offset from the JS-set top/left.
       These margins are applied *after* the transform: rotate(-45deg).
       So they move the element along its rotated axes.
       margin-top: -300px moves it "up" along its rotated Y-axis.
       margin-right: -300px pushes content from its right, effectively moving it "left" along its rotated X-axis.
    */
    margin-top: -300px;
    margin-right: -300px; 
    /* The element itself still has transform: rotate(-45deg) set by its class or JS */
  }
  12% {
    opacity: 0; /* Meteor becomes invisible quickly */
  }
  15% {
    /* Teleport to a new position for the next loop, still invisible */
    margin-top: 300px;
    margin-left: -600px; /* Note: original was margin-left, not margin-right */
    opacity: 0;
  }
  100% {
    /* Stay invisible and at the teleported position until the loop restarts */
    opacity: 0;
    margin-top: 300px; /* Maintain position from 15% to avoid jump at 0% of next cycle if margins differ */
    margin-left: -600px;
  }
}