/* ============================================================
   Global Custom Cursor Styling
   ============================================================ */

/* Hide standard cursor only on desktop/pointer screens */
@media (pointer: fine) {
  body {
    cursor: none !important;
  }
  
  a, button, input, select, textarea, [role="button"], label {
    cursor: none !important;
  }
}

.custom-cursor {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 99999; /* Ensure cursor is above ALL layers */
}

/* Gold core dot */
.cursor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--accent-gold, #C9A227);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.1s var(--transition-smooth, ease), height 0.1s var(--transition-smooth, ease), background-color 0.1s var(--transition-smooth, ease);
  pointer-events: none;
}

/* Outer smooth-lag trailing circle ring */
.cursor-ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--accent-gold, #C9A227);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  transition: width 0.18s var(--transition-smooth, ease), height 0.18s var(--transition-smooth, ease), opacity 0.18s var(--transition-smooth, ease), border-color 0.18s var(--transition-smooth, ease), background-color 0.18s var(--transition-smooth, ease);
  pointer-events: none;
}

/* Hovering trigger state style scale modifications */
.custom-cursor.hovering .cursor-ring {
  width: 52px;
  height: 52px;
  opacity: 0.3;
  background-color: rgba(201, 162, 39, 0.08);
  border-color: var(--accent-gold-hover, #E0B94B);
}

.custom-cursor.hovering .cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-gold-hover, #E0B94B);
}

/* Hide on mobile/touch interfaces */
@media (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}