Add a fade-in scroll animation

Implement smooth fade-in animations for different sections of the website as they come into the viewport while scrolling. This will make the site more engaging and modern.

We would need to :

-Intersection Observer API for better performance over traditional scroll event listeners and trigger the animation only when at least 20–30% of the element is visible in the viewport.

-Apply fade-in combined with slight upward or sideways translation for a dynamic effect with adjustable animation duration (0.5s–1.5s) and easing (ease, ease-in-out).

-Ensure animations work smoothly on all screen sizes.

Performance Optimization:
Lazy-load animations so they don’t affect initial page load speed.

Deliverables:
Fully implemented fade-in scroll animations for all targeted sections.