/* ─── Custom Cursor ─────────────────────────────────────────────────────────── */

/* Outer ring — centered via negative margin to avoid transform conflicts with anime.js */
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid rgba(90, 174, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  /* Must stay above modals/lightboxes so it's always visible */
  z-index: var(--z-cursor);
  transform-origin: center center;
  transition:
    width  0.2s ease,
    height 0.2s ease,
    margin 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
  will-change: left, top, transform;
}

/* Inner dot — snaps to exact mouse position, centered via margin */
#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) + 1);
  transform-origin: center center;
  box-shadow: 0 0 4px var(--accent-glow);
  transition: opacity 0.2s ease;
  will-change: left, top;
}

/* Hover state — larger ring, glow */
#cursor-ring.hover {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(90,174,255,0.3);
}

/* Click state */
#cursor-ring.clicking {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-color: #fff;
}
#cursor-dot.clicking {
  transform: scale(1.3);
}

/* Hidden when cursor leaves window */
#cursor-ring.hidden,
#cursor-dot.hidden {
  opacity: 0;
}

/* ─── Mobile: disable custom cursor ─────────────────────────────────────────── */
@media (pointer: coarse) {
  #cursor-ring,
  #cursor-dot {
    display: none !important;
  }
  body.custom-cursor,
  body.custom-cursor * {
    cursor: auto !important;
  }
}