/* ============================================================
   cursor.css — ring + dot cursor (with blur glass on ring)
   ============================================================ */

.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cursor-ring {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;

  /* Glass blur on the ring */
  backdrop-filter: blur(8px) saturate(2) brightness(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(2) brightness(1.1);

  /* Subtle chromatic tint */
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(120, 180, 255, 0.03) 50%,
    rgba(255, 80, 150, 0.03) 100%
  );

  transition:
    opacity 0.3s ease,
    width 0.2s ease,
    height 0.2s ease,
    border-color 0.2s ease;
}

.cursor-dot.visible,
.cursor-ring.visible {
  opacity: 1;
}

/* Expand ring on hover over links/buttons */
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width: 70px;
  height: 70px;
  border-color: rgba(255, 255, 255, 0.5);
}

body:has(a:hover) .cursor-dot,
body:has(button:hover) .cursor-dot {
  opacity: 0.3;
}

/* Shrink on click */
body.cursor-pressing .cursor-ring {
  width: 60px;
  height: 60px;
}