/* Custom Cursor */
.custom-cursor {
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  transform: translate(-50%, -50%);
  will-change: width, height, background-color, border-radius;
}

.custom-cursor.hover {
  width: 30px;
  height: 30px;
  background-color: rgba(245, 84, 0, 0.6);
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              border-radius 0.25s ease;
}

.custom-cursor.click {
  width: 50px;
  height: 50px;
  background-color: rgba(245, 84, 0, 0.4);
  transition: width 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              height 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              background-color 0.15s ease;
}

.custom-cursor.line {
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background-color: var(--primary);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.3s ease;
}