/* ============================================================================
   PERFECT PREMIUM CURSOR SYSTEM
   ============================================================================
   No offset, true position, premium styling
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   HIDE DEFAULT CURSOR
   ══════════════════════════════════════════════════════════════════════════ */

* {
  cursor: none !important;
}

/* Re-enable on touch devices */
@media (pointer: coarse) {
  * {
    cursor: auto !important;
  }
  
  #cursor-dot,
  #cursor-ring,
  #cursor-halo {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CURSOR DOT - Perfect Center, No Offset
   ══════════════════════════════════════════════════════════════════════════ */

#cursor-dot {
  width: 6px;
  height: 6px;
  background: #D4BA89;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 10px rgba(212, 186, 137, 0.5),
    0 0 20px rgba(212, 186, 137, 0.3);
  transition: 
    width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   CURSOR RING - Smooth Follow, No Offset
   ══════════════════════════════════════════════════════════════════════════ */

#cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(212, 186, 137, 0.4);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  transition: 
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   CURSOR HALO - Ambient Glow, No Offset
   ══════════════════════════════════════════════════════════════════════════ */

#cursor-halo {
  width: 140px;
  height: 140px;
  background: radial-gradient(
    circle,
    rgba(212, 186, 137, 0.06) 0%,
    transparent 60%
  );
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  filter: blur(15px);
  opacity: 0.25;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOVER STATES - Premium Interactions
   ══════════════════════════════════════════════════════════════════════════ */

/* Default Hover State */
body.is-hovering #cursor-dot {
  width: 10px;
  height: 10px;
  background: #EBE1CE;
  box-shadow: 
    0 0 15px rgba(212, 186, 137, 0.7),
    0 0 30px rgba(212, 186, 137, 0.4);
}

body.is-hovering #cursor-ring {
  width: 48px;
  height: 48px;
  border-color: rgba(212, 186, 137, 0.6);
  border-width: 2px;
}

body.is-hovering #cursor-halo {
  opacity: 0.2;
  filter: blur(25px);
}

/* ══════════════════════════════════════════════════════════════════════════
   SPECIFIC ELEMENT STATES
   ══════════════════════════════════════════════════════════════════════════ */

/* Buttons & CTAs */
body.is-hovering-button #cursor-dot {
  width: 0;
  height: 0;
  opacity: 0;
}

body.is-hovering-button #cursor-ring {
  width: 60px;
  height: 60px;
  border-color: rgba(212, 186, 137, 0.8);
  border-width: 2.5px;
  background: rgba(212, 186, 137, 0.05);
}

/* Links */
body.is-hovering-link #cursor-dot {
  width: 8px;
  height: 8px;
  background: #D4BA89;
}

body.is-hovering-link #cursor-ring {
  width: 40px;
  height: 40px;
  border-color: rgba(212, 186, 137, 0.5);
}

/* Text Inputs */
body.is-hovering-input #cursor-dot {
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: #D4BA89;
}

body.is-hovering-input #cursor-ring {
  width: 24px;
  height: 24px;
  border-color: rgba(212, 186, 137, 0.3);
}

/* Cards */
body.is-hovering-card #cursor-ring {
  width: 56px;
  height: 56px;
  border-color: rgba(212, 186, 137, 0.4);
}

/* ══════════════════════════════════════════════════════════════════════════
   CLICK STATE
   ══════════════════════════════════════════════════════════════════════════ */

body.is-clicking #cursor-dot {
  transform: translate(-50%, -50%) scale(0.8);
}

body.is-clicking #cursor-ring {
  transform: translate(-50%, -50%) scale(0.9);
}

/* ══════════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ══════════════════════════════════════════════════════════════════════════ */

#cursor-dot,
#cursor-ring,
#cursor-halo {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #cursor-dot,
  #cursor-ring,
  #cursor-halo {
    display: none !important;
  }
  
  * {
    cursor: auto !important;
  }
}