Help replicating an animated header

I am trying to replicate the header on the following page https://injury.accident.com/

I tried to do this with a single nav bar, but it didn’t work right. There seems to be some strange intermediate color transition. see: https://accident-com.webflow.io

If there is a better way to do it - all ears!

Thanks!

Here is my public share link: https://preview.webflow.com/preview/accident-com?utm_source=accident-com&preview=86224c3b22742f01094ad5abd82186c8