src/modules/profile/recentTracks/styles/backgrounds/option-18.css
/* Option 18: EQ LG + Scrolling */

@keyframes bg-option-18-animation-before {
  from { background-position-y: calc(-50cqw + 50cqh); }
  to   { background-position-y: calc(50cqw + 50cqh); }
}

@keyframes bg-option-18-animation-after {
  0% {
    --bg-option-bar-1: 40; --bg-option-bar-2: 70; --bg-option-bar-3: 50; --bg-option-bar-4: 90;
    --bg-option-bar-5: 30; --bg-option-bar-6: 80; --bg-option-bar-7: 60; --bg-option-bar-8: 50;
    --bg-option-bar-9: 70; --bg-option-bar-10: 30; --bg-option-bar-11: 90; --bg-option-bar-12: 40;
  }

  10% {
    --bg-option-bar-1: 60; --bg-option-bar-2: 40; --bg-option-bar-3: 80; --bg-option-bar-4: 30;
    --bg-option-bar-5: 70; --bg-option-bar-6: 50; --bg-option-bar-7: 90; --bg-option-bar-8: 30;
    --bg-option-bar-9: 40; --bg-option-bar-10: 80; --bg-option-bar-11: 60; --bg-option-bar-12: 50;
  }

  25% {
    --bg-option-bar-1: 30; --bg-option-bar-2: 90; --bg-option-bar-3: 60; --bg-option-bar-4: 70;
    --bg-option-bar-5: 50; --bg-option-bar-6: 20; --bg-option-bar-7: 70; --bg-option-bar-8: 80;
    --bg-option-bar-9: 20; --bg-option-bar-10: 60; --bg-option-bar-11: 30; --bg-option-bar-12: 90;
  }

  40% {
    --bg-option-bar-1: 70; --bg-option-bar-2: 30; --bg-option-bar-3: 90; --bg-option-bar-4: 40;
    --bg-option-bar-5: 80; --bg-option-bar-6: 40; --bg-option-bar-7: 90; --bg-option-bar-8: 60;
    --bg-option-bar-9: 30; --bg-option-bar-10: 80; --bg-option-bar-11: 50; --bg-option-bar-12: 70;
  }

  60% {
    --bg-option-bar-1: 50; --bg-option-bar-2: 60; --bg-option-bar-3: 30; --bg-option-bar-4: 80;
    --bg-option-bar-5: 20; --bg-option-bar-6: 90; --bg-option-bar-7: 40; --bg-option-bar-8: 70;
    --bg-option-bar-9: 90; --bg-option-bar-10: 20; --bg-option-bar-11: 70; --bg-option-bar-12: 60;
  }

  75% {
    --bg-option-bar-1: 80; --bg-option-bar-2: 20; --bg-option-bar-3: 70; --bg-option-bar-4: 50;
    --bg-option-bar-5: 90; --bg-option-bar-6: 30; --bg-option-bar-7: 20; --bg-option-bar-8: 90;
    --bg-option-bar-9: 60; --bg-option-bar-10: 40; --bg-option-bar-11: 20; --bg-option-bar-12: 80;
  }

  90% {
    --bg-option-bar-1: 60; --bg-option-bar-2: 40; --bg-option-bar-3: 50; --bg-option-bar-4: 60;
    --bg-option-bar-5: 40; --bg-option-bar-6: 60; --bg-option-bar-7: 80; --bg-option-bar-8: 40;
    --bg-option-bar-9: 70; --bg-option-bar-10: 50; --bg-option-bar-11: 60; --bg-option-bar-12: 30;
  }

  100% {
    --bg-option-bar-1: 40; --bg-option-bar-2: 70; --bg-option-bar-3: 50; --bg-option-bar-4: 90;
    --bg-option-bar-5: 30; --bg-option-bar-6: 80; --bg-option-bar-7: 60; --bg-option-bar-8: 50;
    --bg-option-bar-9: 70; --bg-option-bar-10: 30; --bg-option-bar-11: 90; --bg-option-bar-12: 40;
  }
}

[data-element="rymstats-track-panel"] {
  container-type: size;
}

[data-element="rymstats-track-panel"] {
  &.bg-option-18:after {
    --gap: 0px;
    --n: 12;
    --bar-width: calc((100% / var(--n)) - var(--gap));

    --clr-1: var(--clr-palette-lightvibrant);
    --clr-3: var(--clr-palette-vibrant);
    --clr-5: var(--clr-palette-darkvibrant);
    --clr-7: var(--clr-palette-lightmuted);
    --clr-9: var(--clr-palette-muted);
    --clr-11: var(--clr-palette-darkmuted);
    --clr-2: color-mix(in lch, var(--clr-1) 50%, var(--clr-3));
    --clr-4: color-mix(in lch, var(--clr-3) 50%, var(--clr-5));
    --clr-6: color-mix(in lch, var(--clr-5) 50%, var(--clr-7));
    --clr-8: color-mix(in lch, var(--clr-7) 50%, var(--clr-9));
    --clr-10: color-mix(in lch, var(--clr-9) 50%, var(--clr-11));
    --clr-12: color-mix(in lch, var(--clr-11) 20%, var(--clr-1));

    --bar-1-x: calc((0 * 100%) / (var(--n) - 1));
    --bar-2-x: calc((1 * 100%) / (var(--n) - 1));
    --bar-3-x: calc((2 * 100%) / (var(--n) - 1));
    --bar-4-x: calc((3 * 100%) / (var(--n) - 1));
    --bar-5-x: calc((4 * 100%) / (var(--n) - 1));
    --bar-6-x: calc((5 * 100%) / (var(--n) - 1));
    --bar-7-x: calc((6 * 100%) / (var(--n) - 1));
    --bar-8-x: calc((7 * 100%) / (var(--n) - 1));
    --bar-9-x: calc((8 * 100%) / (var(--n) - 1));
    --bar-10-x: calc((9 * 100%) / (var(--n) - 1));
    --bar-11-x: calc((10 * 100%) / (var(--n) - 1));
    --bar-12-x: calc((11 * 100%) / (var(--n) - 1));

    background:
      linear-gradient(to top, var(--clr-1) calc(var(--bg-option-bar-1) * 1%), transparent calc(var(--bg-option-bar-1) * 1%))
        var(--bar-1-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-2) calc(var(--bg-option-bar-2) * 1%), transparent calc(var(--bg-option-bar-2) * 1%))
        var(--bar-2-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-3) calc(var(--bg-option-bar-3) * 1%), transparent calc(var(--bg-option-bar-3) * 1%))
        var(--bar-3-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-4) calc(var(--bg-option-bar-4) * 1%), transparent calc(var(--bg-option-bar-4) * 1%))
        var(--bar-4-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-5) calc(var(--bg-option-bar-5) * 1%), transparent calc(var(--bg-option-bar-5) * 1%))
        var(--bar-5-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-6) calc(var(--bg-option-bar-6) * 1%), transparent calc(var(--bg-option-bar-6) * 1%))
        var(--bar-6-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-7) calc(var(--bg-option-bar-7) * 1%), transparent calc(var(--bg-option-bar-7) * 1%))
        var(--bar-7-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-8) calc(var(--bg-option-bar-8) * 1%), transparent calc(var(--bg-option-bar-8) * 1%))
        var(--bar-8-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-9) calc(var(--bg-option-bar-9) * 1%), transparent calc(var(--bg-option-bar-9) * 1%))
        var(--bar-9-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-10) calc(var(--bg-option-bar-10) * 1%), transparent calc(var(--bg-option-bar-10) * 1%))
        var(--bar-10-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-11) calc(var(--bg-option-bar-11) * 1%), transparent calc(var(--bg-option-bar-11) * 1%))
        var(--bar-11-x) 0 / var(--bar-width) 100% no-repeat,

      linear-gradient(to top, var(--clr-12) calc(var(--bg-option-bar-12) * 1%), transparent calc(var(--bg-option-bar-12) * 1%))
        var(--bar-12-x) 0 / var(--bar-width) 100% no-repeat;

    opacity: 0.2;

    --bg-option-bar-1: 0;
    --bg-option-bar-2: 10;
    --bg-option-bar-3: 20;
    --bg-option-bar-4: 30;
    --bg-option-bar-5: 40;
    --bg-option-bar-6: 50;
    --bg-option-bar-7: 55;
    --bg-option-bar-8: 40;
    --bg-option-bar-9: 30;
    --bg-option-bar-10: 20;
    --bg-option-bar-11: 10;
    --bg-option-bar-12: 0;
  }

  &.bg-option-18:before {
    inset: 0;
    transform: none;
    background-position-x: 50%;
    background-position-y: calc(-50cqw + 50cqh);
    background-repeat: repeat-y;
    background-size: 100% 100cqw;
    will-change: background-position;
  }

  &.is-now-playing.bg-option-18:before {
    animation: bg-option-18-animation-before 60s infinite linear;
  }

  &.is-now-playing.bg-option-18:after {
    animation: bg-option-18-animation-after 1.5s linear infinite;
  }
}
