/* perf-overrides.css
   Overrides raindrop styles to reduce count and lower CPU usage.
   Uses strong selectors and !important to ensure it overrides earlier rules.
*/

/* Only show first 4 raindrops; hide the rest if templates still render 10 */
.raindrops .raindrop:nth-child(n+5) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Slow down and GPU-accelerate visible raindrops */
.raindrops .raindrop {
  animation: raindrop 6s linear infinite !important;
  will-change: transform !important;
  /* make drops slightly larger for fewer elements to remain visible */
  width: 3px !important;
  height: 24px !important;
}

/* Reposition the visible 4 drops for even spacing */
.raindrops .raindrop:nth-child(1) { left: 20% !important; }
.raindrops .raindrop:nth-child(2) { left: 40% !important; }
.raindrops .raindrop:nth-child(3) { left: 60% !important; }
.raindrops .raindrop:nth-child(4) { left: 80% !important; }

/* Ensure the keyframes still use transform (kept in original CSS). */
/* No other overrides to avoid side-effects. */