@media (hover: hover) and (pointer: fine) {
  .js-cursor-follow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    width: 34px;
    height: 34px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-120px, -120px, 0) translate3d(-50%, -50%, 0);
    mix-blend-mode: multiply;
    transition:
      opacity 0.18s ease,
      width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      height 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .js-cursor-follow.is-active {
    opacity: 1;
  }

  .js-cursor-follow__ring,
  .js-cursor-follow__red,
  .js-cursor-follow__blue,
  .js-cursor-follow__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, opacity;
  }

  .js-cursor-follow__ring {
    width: 100%;
    height: 100%;
    border: 1.5px solid rgba(0, 153, 221, 0.78);
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 54%, rgba(0, 153, 221, 0.08) 56%, rgba(0, 153, 221, 0) 72%);
    box-shadow: 0 0 18px rgba(0, 153, 221, 0.16);
    opacity: 0.95;
    transition:
      border-color 0.22s ease,
      box-shadow 0.22s ease,
      transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.22s ease,
      opacity 0.22s ease;
  }

  .js-cursor-follow__ring::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(230, 0, 18, 0.44);
    clip-path: polygon(0 0, 45% 0, 45% 100%, 0 100%);
    opacity: 0.9;
  }

  .js-cursor-follow__red {
    width: 6px;
    height: 6px;
    background: #e60012;
    box-shadow: 0 0 12px rgba(230, 0, 18, 0.24);
    animation: cursorOrbitRed 2.7s linear infinite;
  }

  .js-cursor-follow__blue {
    width: 7px;
    height: 7px;
    background: #0099dd;
    box-shadow: 0 0 12px rgba(0, 153, 221, 0.24);
    animation: cursorOrbitBlue 2.7s linear infinite;
  }

  .js-cursor-follow__dot {
    display: none;
  }

  .js-cursor-follow.is-hovering {
    width: 44px;
    height: 44px;
  }

  .js-cursor-follow.is-hovering .js-cursor-follow__ring {
    border-color: rgba(230, 0, 18, 0.72);
    box-shadow: 0 0 20px rgba(230, 0, 18, 0.13);
    transform: translate3d(-50%, -50%, 0) rotate(18deg);
  }

  .js-cursor-follow.is-hovering .js-cursor-follow__red {
    animation-duration: 2.1s;
  }

  .js-cursor-follow.is-hovering .js-cursor-follow__blue {
    animation-duration: 2.1s;
  }

  .js-cursor-follow.is-pressed .js-cursor-follow__ring {
    transform: translate3d(-50%, -50%, 0) scale(0.78);
    opacity: 0.86;
  }

  .js-cursor-follow.is-pressed .js-cursor-follow__red,
  .js-cursor-follow.is-pressed .js-cursor-follow__blue {
    opacity: 0.35;
  }

  @keyframes cursorOrbitRed {
    from {
      transform: translate3d(-50%, -50%, 0) rotate(0deg) translateX(20px) rotate(0deg);
    }
    to {
      transform: translate3d(-50%, -50%, 0) rotate(360deg) translateX(20px) rotate(-360deg);
    }
  }

  @keyframes cursorOrbitBlue {
    from {
      transform: translate3d(-50%, -50%, 0) rotate(180deg) translateX(20px) rotate(-180deg);
    }
    to {
      transform: translate3d(-50%, -50%, 0) rotate(540deg) translateX(20px) rotate(-540deg);
    }
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .js-cursor-follow {
    display: none !important;
  }

  .js-cursor-follow__red,
  .js-cursor-follow__blue {
    animation: none !important;
  }
}