You can try using the css property mix blend mode for the text but you cannot apply transitions on it, but the hero section would need a background color of white, removing the z-index on the hero:before element would help. see below
https://codepen.io/Anurella/pen/ZEaMVxy
I think SVG masks would be great, you can use text in SVG. check out @PointC tutorial https://www.motiontricks.com/invert-svg-text-with-a-mask/