/* === Custom Cursor Core ===
  .cursor-core {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #fbab18;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 10000;
  }

  === Outer Ring ===
  .cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(251,171,24,0.5);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 9999;
  }

  === Spark Particles ===
  .spark {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fbab18 0%, #fff 40%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
    mix-blend-mode: screen;
    z-index: 9998;
  } */


  /* ========== CUSTOM CURSOR ========== */
.cursor-core,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}

.cursor-core {
  width: 8px;
  height: 8px;
  background: #fbab18;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(251, 171, 24, 0.6);
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 2px solid #fbab18;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(0.3px);
  transition: all 0.3s ease;
}

/* Hover Interaction */
a:hover ~ .cursor-ring,
button:hover ~ .cursor-ring,
a:hover ~ .cursor-core,
button:hover ~ .cursor-core {
  transform: scale(1.4);
  opacity: 0.9;
}

/* Spark Particles */
/* .spark {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, #fbab18 0%, #fff8e1 60%, transparent 100%);
  box-shadow: 0 0 6px rgba(251, 171, 24, 0.8);
} */

/* Auto-adjust cursor color on white background */
section.white-bg, 
div.white-bg, 
body.white-mode {
  --cursor-color: #000;
}

section.white-bg .cursor-core,
section.white-bg .cursor-ring,
body.white-mode .cursor-core,
body.white-mode .cursor-ring {
  mix-blend-mode: normal;
  background: #000;
  border-color: #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}