src/modules/profile/recentTracks/styles/backgrounds/option-8.css
/* Option 8: Glitch */

@keyframes bg-option-8-animation {
  0% {
    --angle-360: 0deg;
  }
  100% {
    --angle-360: 360deg;
  }
}

@keyframes bg-option-8-animation {
  0% {
    --angle-360: 0deg;
  }
  100% {
    --angle-360: 360deg;
  }
}

@keyframes bg-option-8-animation-image {
  0%   { transform: translate(0, -50%); }
  10%  { transform: translate(-10px, calc(5px - 50%)) scale(1.05); }
  10.1%  { transform: translate(0, -50%); }

  25%  { transform: translate(8px, calc(-4px - 50%)) scale(1.4); }
  25.51%  { transform: translate(0, -50%); }

  40%  { transform: translate(-6px, calc(3px - 50%)) scale(0.8); }
  40.1%  { transform: translate(0, -50%); }

  60%  { transform: translate(4px, calc(-6px - 50%)) skew(10deg, 10deg); }
  61%  { transform: translate(14px, calc(-16px - 50%)) skew(10deg, 10deg) scale(1.25); }
  65%  { transform: translate(0, -50%); }

  80%  { transform: translate(-40px, calc(2px - 50%)) scale(1.5); }
  82%  { transform: translate(140px, calc(-16px - 50%)) scale(0.5); }
  82.31%  { transform: translate(0, -50%); }
}

[data-element="rymstats-track-panel"] {
  &.bg-option-8:after {
    background-image:
      repeating-linear-gradient(
        90deg,
        var(--clr-palette-vibrant) 0px,
        var(--clr-palette-vibrant) 3px,
        var(--clr-palette-darkmuted) 3px,
        var(--clr-palette-darkmuted) 6px
      ),
      repeating-linear-gradient(
        91deg,
        var(--clr-palette-lightvibrant) 0px,
        var(--clr-palette-lightvibrant) 3px,
        transparent 3px,
        transparent 6px
      ),
      repeating-linear-gradient(
        89deg,
        var(--clr-palette-muted) 0px,
        var(--clr-palette-muted) 1px,
        transparent 1px,
        transparent 4px
      );
    background-blend-mode: difference;
    filter: hue-rotate(calc(var(--angle-360) + 90deg)) brightness(120%);
  }
  &.is-now-playing.bg-option-8:after {
    animation: bg-option-8-animation 5s linear infinite;
  }
  &.is-now-playing.bg-option-8:before {
    animation: bg-option-8-animation-image 30s steps(1, end) infinite;
  }
}
