/* ============================================
   CUSTOM CURSOR — Premium Interactive Design
   ============================================ */

/* Hide the default cursor globally */
*, *::before, *::after {
  cursor: none !important;
}

/* Cursor dot — the sharp precise inner point */
#dp-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  will-change: transform;
}

/* Cursor ring — the trailing outer circle */
#dp-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999998;
  transform: translate(-50%, -50%);
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.25s ease,
              opacity 0.25s ease;
  will-change: transform;
}

/* Hover state — ring expands on clickable elements */
body.dp-cursor-hover #dp-cursor-ring {
  width: 56px;
  height: 56px;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

body.dp-cursor-hover #dp-cursor-dot {
  width: 5px;
  height: 5px;
  background: #ffffff;
}

/* Click state — both compress */
body.dp-cursor-click #dp-cursor-ring {
  width: 28px;
  height: 28px;
  border-color: #ffffff;
}

body.dp-cursor-click #dp-cursor-dot {
  width: 10px;
  height: 10px;
}

/* Hidden when mouse leaves the window */
body.dp-cursor-hidden #dp-cursor-dot,
body.dp-cursor-hidden #dp-cursor-ring {
  opacity: 0;
}

/* Disable custom cursor on mobile and touch devices */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    cursor: auto !important;
  }
  
  #dp-cursor-dot,
  #dp-cursor-ring {
    display: none !important;
  }
}