(S)CSS z-index pseudo elements with absolute positioned parent

Question

After searching around i found some answers that said to use negative z-index on the pseudo elements, but for some reason this doesn't work for me. Maybe because the "parent" is also position: absolute?

The "original" .branding div should be on top (the one with no filters), and beneath that the pseudo-elements that are modified with filters.

Here is a fiddle that shows how it is now with SCSS: https://jsfiddle.net/luffyyyyy/0oys1tj8/4/

Can somebody help me get the order right?

.branding {
     position: relative;
     width: 7.5rem;
     height: 7.5rem;
}
 .branding div {
     background: url(https://upload.wikimedia.org/wikipedia/commons/6/6d/Volkswagen_logo_2019.svg) no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     content: '';
     position: absolute;
     opacity: 1;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}
 .branding div::before {
     background: url(https://upload.wikimedia.org/wikipedia/commons/6/6d/Volkswagen_logo_2019.svg) no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     content: '';
     position: absolute;
     opacity: 1;
     left: 2px;
     filter: saturate(3) hue-rotate(80deg);
}
 .branding div::after {
     background: url(https://upload.wikimedia.org/wikipedia/commons/6/6d/Volkswagen_logo_2019.svg) no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     content: '';
     position: absolute;
     opacity: 1;
     filter: saturate(12);
     left: -2px;
}
 .branding div:nth-child(1) {
     animation: glitch1 3s infinite steps(1, end);
}
 .branding div:nth-child(2) {
     animation: glitch2 3s infinite steps(1, end);
}
 .branding div:nth-child(3) {
     animation: glitch3 3s infinite steps(1, end);
}
 .branding div:nth-child(4) {
     animation: glitch4 3s infinite steps(1, end);
}
 .branding div:nth-child(5) {
     animation: glitch5 3s infinite steps(1, end);
}
 @keyframes glitch1 {
     20% {
         clip-path: polygon(0 0%, 100% 0%, 100% 33%, 0 33%);
         transform: translate(-50%, -50%);
    }
     30% {
         clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
         transform: translate(-50%, -50%);
    }
     47% {
         transform: translate(-45%, -45%);
    }
     48% {
         transform: translate(-50%, -50%);
    }
     49% {
         transform: translate(-55%, -45%);
    }
     50% {
         transform: translate(-50%, -50%);
    }
}
 @keyframes glitch2 {
     0% {
         opacity: 0;
    }
     20% {
         opacity: 1;
         clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0% 60%);
         transform: translate(-50%, -50%);
    }
     21% {
         transform: translate(-46%, -46%);
    }
     22% {
         transform: translate(-54%, -54%);
    }
     30% {
         clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
         transform: translate(-50%, -50%);
    }
     35% {
         transform: translate(-45%, -55%);
    }
     36% {
         transform: translate(-50%, -50%);
    }
     37% {
         transform: translate(-40%, -45%);
    }
     38% {
         transform: translate(-50%, -50%);
    }
     50% {
         transform: translate(-45%, -55%);
    }
     51% {
         transform: translate(-50%, -60%);
    }
     52% {
         transform: translate(-45%, -50%);
    }
     53% {
         transform: translate(-50%, -50%);
    }
     71% {
         transform: translate(-40%, -60%);
    }
     72% {
         transform: translate(-45%, -50%);
    }
     73% {
         transform: translate(-40%, -50%);
    }
     77% {
         transform: translate(-50%, -50%);
    }
}
 @keyframes glitch3 {
     0% {
         opacity: 0;
    }
     20% {
         opacity: 1;
         clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0% 100%);
         transform: translate(-50%, -50%);
    }
     30% {
         transform: translate(-40%, -40%);
    }
     31% {
         transform: translate(-50%, -50%);
    }
     35% {
         clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
         transform: translate(-50%, -50%);
    }
     45% {
         transform: translate(-60%, -60%);
    }
     46% {
         transform: translate(-50%, -50%);
    }
     47% {
         clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
         transform: translate(-50%, -50%);
    }
     69% {
         transform: translate(-40%, -40%);
    }
     71% {
         transform: translate(-50%, -50%);
    }
}
 @keyframes glitch4 {
     0% {
         opacity: 0;
    }
     22% {
         opacity: 1;
         clip-path: polygon(0 32%, 100% 32%, 100% 41%, 0% 41%);
         transform: translate(-48%, -50%);
    }
     24% {
         clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
         transform: translate(-50%, -50%);
    }
}
 @keyframes glitch5 {
     0% {
         opacity: 0;
    }
     20% {
         opacity: 1;
         clip-path: polygon(0 59%, 100% 59%, 100% 71%, 0% 71%);
         transform: translate(-52%, -50%);
    }
     25% {
         clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
         transform: translate(-50%, -50%);
    }
}
 

<div class="branding">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>