.cursor-dot,
  .cursor-outline {
    display: block;
    position: fixed;
    top: -60px;
    left: -60px;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-circle);
    z-index: 10;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    pointer-events: none;
  }

  .cursor-dot {
    width: 60px;
    height: 60px;
    background-color: var(--bg-white);
    transform: translate(-50%, -50%) scale(0.1);
  }

  .cursor-dot.hovered {
    transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: exclusion;
  }

  .cursor-outline {
    width: 30px;
    height: 30px;
    border: 2px solid var(--border-white);
    opacity: 0.5;
    transition-duration: 100ms;
  }

  .cursor-outline.hovered { opacity: 0; }