/* Rain streaks — shared by every page with a #rain element.
   Pairs with assets/js/rain.js, which builds the drops.

   This lived in landing.css, dashboard.css and auth.css as three copies that
   drifted apart: the alpha was 0.14 on two of them and 0.1 on the third, and
   the fall distance 240px against 160px, so the same effect rendered at
   different intensities depending on which page you were looking at.

   Load this BEFORE the page stylesheet so a page can still override .rain. */

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

.rl {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(160,155,165,0.2), transparent);
  animation: rfall linear infinite;
}

@keyframes rfall {
  from { transform: translateY(-240px); }
  to   { transform: translateY(110vh); }
}

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