@media (hover: hover) and (pointer: fine) {
  a,
  button,
  input,
  textarea,
  select,
  [role="button"],
  .btn,
  .project-card,
  .cs-side-link {
    cursor: none;
  }

  body {
    cursor: none;
  }

  #cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8264a;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition:
      width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.2s ease,
      opacity 0.2s ease;
    will-change: transform, width, height;
  }

  #cursor-dot.is-visible {
    opacity: 1;
  }

  #cursor-dot.is-hover {
    width: 28px;
    height: 28px;
    background: #e8264a;
    opacity: 0.6;
  }

  #cursor-dot.is-label {
    width: 119px;
    height: 37px;
    padding: 0.5rem 1rem;
    border-radius: 0 999px 999px 999px;
    opacity: 1;
  }

  #cursor-dot-label {
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #ffffff;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease 0.12s, transform 0.2s ease 0.12s;
  }

  #cursor-dot.is-label #cursor-dot-label {
    opacity: 1;
    transform: translateY(0);
  }
}