text styling distorted

*{
    margin:0;
    padding:0;
    background:#000;

 }

 body{
    display:flex;
    justify-content:center;
    align-items: center;
    min-height: 100vh;
    background: #000;
    
   
 }
 h2{
    position:relative;
    margin:0;
   font-size: 4em;
    font-weight: 900;
    color:white;
    z-index:1;
    overflow:hidden
 }

 h2:before{
    content:'';
    position:absolute;
    left:0;
    width:120%;
    height:100%;
    background:linear-gradient(90deg, transparent 0%, #000 5%,#000 100%);
    animation:animate 5.5s linear forwards;
    animation-delay: 2.5s;
 }

 h2 span{
    color: #ff022c;
 }
 @keyframes animate{
0%{
    left:110%
}
100%{
    left:-20%
}
 }


 video{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    z-index:2;
    pointer-events: none;
    mix-blend-mode: screen;
 }