TVアニメ「８６-エイティシックス-」のウェブサイトのマウスカーソルについて

TVアニメ「８６-エイティシックス-」のウェブサイトのマウスカーソルが凝っていたので，どうやって実装しているか見てみました．

トップページでマウスを移動させると，赤いような青いような円形のカーソルが追従します．よく見ると背景によって色が変わるようになっています．

カーソルの html はこのようになっていました．.l-cursor__decoと.l-cursor__point にマウスカーソルの座標を javascript で書き込む仕組みのようです．

<div class="l-cursor js-cursor">
  <div class="l-cursor__deco js-cursor-bg" style="transform: translate(898px, 1132px);">
    <div class="l-cursor__outer">
      <div class="l-cursor__outer-deco">
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="l-cursor__inner">
      <div class="l-cursor__cross"></div>
    </div>
  </div>
  <div class="l-cursor__point js-cursor-point" style="transform: translate(898px, 1132px);"></div>
</div>

以下のような CSS が設定されています．

https://anime-86.com/assets/css/86.default.css より引用．

.l-cursor__point {
  position: fixed;
  top: -3px;
  left: -3px;
  z-index: 20;
  z-index: 15;
  mix-blend-mode: difference;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  width: 6px;
  height: 6px;
  pointer-events: none;
}

.l-cursor__deco {
  position: fixed;
  top: -25px;
  left: -25px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  z-index: 20;
  z-index: 15;
  mix-blend-mode: difference;
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.4s ease, -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.4s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.4s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 50px;
  height: 50px;
  pointer-events: none;
}