.glitchlogo {
font-family: Inzation;
    font-size: 103px;
    display: flex;
    line-height: 0.75;
    position: relative;
    color: white;
    animation: glitch-p 11s infinite alternate;
    writing-mode: vertical-rl;
    text-orientation: upright;

  &::before,
  &::after {
    --top: 0;
    --left: 0;
    --v-height: 30%;

    --n-tenth: calc(var(--f-size) * 0.1 * var(--top));
    --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
    --b-cut: calc(var(--t-cut) + var(--v-height));

    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;

    transform: translateX(calc(var(--left) * 100%));

   
    filter: drop-shadow(0 0 transparent);

    text-shadow: calc(var(--left) * -3em) 0 0.02em rgb(0, 238, 255),
      calc(var(--left) * -6em) 0 0.02em #ff00e1;

    background-color: var(--bg);
    clip-path: polygon(
      0% var(--t-cut),
      100% var(--t-cut),
      100% var(--b-cut),
      0% var(--b-cut)
    );
  }

  &::before {
    animation: glitch-b 1.7s infinite alternate-reverse;
  }
  &::after {
    animation: glitch-a 3.1s infinite alternate;
  }
}

@keyframes glitch-a {
  10%,
  30%,
  50%,
  70%,
  90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
  }
  20% {
    --left: 0.005;
  }
  40% {
    --left: 0.01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: 0.03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: 0.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: 0.083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
  10%,
  30%,
  50%,
  70%,
  90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
    --top: 10;
  }
  20% {
    --left: -0.005;
  }
  40% {
    --left: -0.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -0.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -0.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -0.083;
    --v-height: 30%;
    --top: 1;
  }
}