Me gustaría aplicar un fondo negro con opacity 0.5 debajo del texto y mantener el efecto de animación para -webkit-mask-image . así que cuando el texto se muestra de izquierda a derecha. el fondo negro se encogerá de izquierda a derecha. ¿Alguien sabe si es posible hacerlo? He intentado agregar un div más pero no ayuda

 import "./styles.css"; export default function App() { return ( <div className="App"> <div className="text-animations"> <div className="backdrop" /> <div className="animation-text-wipe animate-in anim-delay"> <p> real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies, from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and showed antibody levels wane rapidly after two doses of vaccine "especially among men, among persons 65 years of age or older, and among persons with immunosuppression." Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors "We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary medical center in Israel," Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection against infection, but for this study they studied only antibody levels. </p> </div> </div> </div> ); }

códigos y caja: https://codesandbox.io/s/autumn-water-owbbc?file=/src/App.tsx