/* ── Hide default cursor (desktop only) ────────────────────── */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
}

@media not all and (hover: hover) and (pointer: fine) {
  #cursor-heart,
  #cursor-sparkle-canvas { display: none !important; }
}

/* ── Heart cursor ──────────────────────────────────────────── */
#cursor-heart,
#nav-logo {
  color: var(--heart-color, #d4a0e8);
}

#cursor-heart {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease;
}

#cursor-heart svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  transition: filter 0.15s ease;
}

#cursor-heart.hovering {
  transform: translate(-50%, -50%) scale(1.35);
}

#cursor-heart.hovering svg {
  filter: drop-shadow(0 0 7px rgba(184, 217, 248, 0.9)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

#cursor-heart.clicking {
  transform: translate(-50%, -50%) scale(0.72);
}

#cursor-heart.clicking svg {
  filter: drop-shadow(0 0 10px rgba(184, 217, 248, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* ── Sparkle canvas ────────────────────────────────────────── */
#cursor-sparkle-canvas {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
}