/* ===========================
   CUSTOM CURSOR
   assets/css/cursor.css
=========================== */

/* Hide default cursor on desktop */
@media (pointer: fine) {
  * {
    cursor: none !important;
  }
}

/* Dot — snappy, follows cursor precisely */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease;
  will-change: transform;
}

/* Ring — lags behind for fluid feel */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(74, 222, 128, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  will-change: transform;
}

/* Hover state: dot expands, ring contracts and fills */
.cursor-dot.hover {
  width: 10px;
  height: 10px;
  background: #86efac;
}

.cursor-ring.hover {
  width: 42px;
  height: 42px;
  border-color: rgba(74, 222, 128, 0.25);
  background: rgba(74, 222, 128, 0.06);
}

/* Click state: squeeze both */
.cursor-dot.clicking {
  transform: translate(-50%, -50%) scale(0.6);
  background: #22c55e;
}

.cursor-ring.clicking {
  transform: translate(-50%, -50%) scale(0.85);
  border-color: rgba(74, 222, 128, 0.8);
}

/* On links/buttons: swap to crosshair-style */
.cursor-dot.on-link {
  width: 8px;
  height: 8px;
  background: #fff;
}

.cursor-ring.on-link {
  width: 44px;
  height: 44px;
  border-color: rgba(74, 222, 128, 0.7);
  background: rgba(74, 222, 128, 0.08);
  mix-blend-mode: difference;
}

/* Hide cursor elements on touch devices */
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}