/* ══════════════════════════════════════════
   LINEIGE — CUSTOM CURSOR
   Single magnetic dot with blend mode.
   The ring from the old version is removed.
══════════════════════════════════════════ */

#cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--acid);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999; /* Higher z-index to stay on top of everything */
  transform: translate(-50%, -50%);
  transition:
    width 0.22s var(--ease-out-quint),
    height 0.22s var(--ease-out-quint),
    background 0.22s ease;
  will-change: left, top;
}

#cursor.hovered {
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--acid) 15%, transparent);
  border: 1.5px solid var(--acid);
  box-sizing: border-box;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4); /* subtle white glow for dark background/buttons */
}

#cursor.clicking {
  width: 6px;
  height: 6px;
  background: var(--acid);
}

/* Light theme cursor adjustments */
[data-theme="light"] #cursor.hovered {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.22); /* subtle dark shadow for light background */
}