/* ============================================================
   SOLEINE — Custom Cursor  (css01 version)
   ============================================================ */

#cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(200, 220, 232, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 9998;
  transition:
    width 0.22s ease,
    height 0.22s ease,
    border-color 0.22s ease,
    opacity 0.22s ease,
    left 0.12s ease,
    top 0.12s ease;
}

#cursor-dot {
  position: fixed;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-icon-common);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 9999;
  box-shadow: 0 0 6px var(--color-icon-common);
}

.cursor-spark {
  position: fixed;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-icon-common);
  pointer-events: none; z-index: 9997;
  animation: sparkFade 0.6s ease-out forwards;
}

@keyframes sparkFade {
  0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0); }
}

/* Hover: ring expands, dot turns gold */
body.cursor-hover #cursor-ring {
  width: 48px; height: 48px;
  border-color: rgba(212, 184, 120, 0.6);
  box-shadow: 0 0 12px rgba(212, 184, 120, 0.15);
}

body.cursor-hover #cursor-dot {
  background: var(--gold-200);
  box-shadow: 0 0 6px var(--gold-200);
}

/* Click: shrinks */
body.cursor-click #cursor-ring {
  width: 20px; height: 20px;
  border-color: rgba(200, 220, 232, 1);
}

body.cursor-click #cursor-dot {
  transform: translate(-50%, -50%) scale(2.5);
  box-shadow: 0 0 16px var(--color-icon-common);
}

@media (hover: none), (pointer: coarse) {
  #cursor-ring,
  #cursor-dot,
  .cursor-spark {
    display: none;
  }
}