/* ==========================================
   CUSTOM CURSOR
========================================== */

.custom_cursor_dot,
.custom_cursor_circle {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
}

/* ==========================================
   SMALL BLACK DOT
========================================== */

.custom_cursor_dot {
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  background: #000000;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    opacity 0.2s ease;
}

/* ==========================================
   FOLLOWER CIRCLE
========================================== */

.custom_cursor_circle {
  width: 35px;
  height: 35px;
  margin-left: -19px;
  margin-top: -19px;

  border: 1px solid #000000;
  background: transparent;

  transition:
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    border-color 0.35s ease;
}

/* ==========================================
   HOVER STATE
========================================== */

.custom_cursor_circle.cursor-hover-active {
  width: 40px;
  height: 40px;
  margin-left: -30px;
  margin-top: -30px;

  background: rgba(0, 0, 0, 0.08);
  border-color: #000000;
}

.custom_cursor_dot:has(+ .custom_cursor_circle.cursor-hover-active) {
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
}

/* ==========================================
   LINKS / BUTTONS
========================================== */

a,
button {
  cursor: none;
}

/* ==========================================
   INPUTS
========================================== */

input,
textarea,
select {
  cursor: none;
}

/* ==========================================
   DISABLE ON TOUCH DEVICES
========================================== */

@media (hover: none), (pointer: coarse) {
  .custom_cursor_dot,
  .custom_cursor_circle {
    display: none;
  }

  a,
  button,
  input,
  textarea,
  select {
    cursor: auto;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
  .custom_cursor_dot,
  .custom_cursor_circle {
    display: none;
  }

  a,
  button,
  input,
  textarea,
  select {
    cursor: auto;
  }
}