/* ============================================
   SHARED CUSTOM CURSOR (dot + trailing outline)
   Desktop/fine-pointer only — see cursor.js for the
   pointer:fine gate. Purely decorative: pointer-events
   is disabled so it never blocks clicks, text selection,
   or keyboard navigation.
   ============================================ */
.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--secondary, #06B6D4);
}

.cursor-outline {
  width: 40px;
  height: 40px;
  border: 1px solid var(--secondary, #06B6D4);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
}

body:hover .cursor-outline {
  opacity: 1;
}

body.hovering .cursor-outline {
  background-color: rgba(6, 182, 212, 0.1);
  width: 60px;
  height: 60px;
}