Fix droplet color inconsistency, improve animation logic, and add accessibility support

[gauravsingh001-cyber]

Description

The RainfallDroplets component works well, but there are a few issues and improvements that can enhance consistency, accessibility, and animation behavior.

Issues Identified

1. Color inconsistency

   • The color prop correctly updates the droplet background using CSS variables.
   • However, the box-shadow color is hardcoded (rgba(34, 197, 94, 0.5)), causing a mismatch when a different color is passed.

2. Animation duration does not reach maximum value

   • Current logic:

     duration: durationMin + (i % 3) * ((durationMax - durationMin) / 3)

   • This never reaches durationMax.

3. Missing reduced motion support

   • The animation runs infinitely without respecting user accessibility preferences (prefers-reduced-motion).

4. Minor accessibility improvement

   • aria-hidden should explicitly be set to "true".

---

Proposed Changes

• Use CSS variable for box-shadow color
• Improve duration calculation using randomness for more natural animation
• Add prefers-reduced-motion media query
• Update aria-hidden attribute

---

Expected Impact

• Better visual consistency when using custom colors
• More natural animation behavior
• Improved accessibility compliance
• No breaking changes

---

Files Affected

• RainfallDroplets.jsx
• RainfallDroplets.scss