Improve CSS layout of homepage wave animation

[Jeet-Bubna]

Problem: The CLS of the website is extremely high. Please view the attached screen shot to verify.

Why this happened: The CLS is calculated by google when layout of the content shifts unintentionally after the render is complete. This happens because:

1. The wave animation in the desktop version in the home page are causing shift in the layout because its using viewport as a unit of measurement. The wave-hero element has a height of 32vw. The viewport changes dynamically as the site loads, because of appearance of the scrollbar, font loading, etc. So this causes recalculation of the layout.
2. The wave-hero element has a predefined width hardcoded at 6400px. Then, we animate the element via the margin. This causes recalculation of the layout each frame.
3. Currently, the SVG is loaded in the stylesheet. If they arrive late, this could cause a repaint which would effect the CLI score.

Why this matters: I know that CLS does not seem that relevant, but google does consider it in their SEO rankings (https://developers.google.com/search/docs/appearance/core-web-vitals)

Fix:

1. We should use aspect ratio in the calculation for the height of the hero element.
2. We should use transform to animate the wave, as it doesn't trigger layout.
3. We can preload the SVG assets in the Django template using link rel="preload".

[Jeet-Bubna]

I'd be happy to work on this and open a PR if that's okay.

[jchristgit]

Sure, thanks! I assigned you, let me know if you need help.