/* Cursor is only hidden once JS has confirmed a fine pointer is present and
   has successfully attached a replacement — see cursor.js. No-JS and
   touch/imprecise-pointer visitors keep the normal system cursor. */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor [role="button"] {
  cursor: none;
}

.bt-cursor-dot,
.bt-cursor-ring,
.bt-cursor-reticle,
.bt-cursor-terminal,
.bt-cursor-pulsering,
.bt-cursor-comet-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}

/* ── Dot (red default, green variant, crosshair variant) ── */
.bt-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--red);
  transition: opacity .2s ease, transform .05s linear, width .15s ease, height .15s ease, margin .15s ease, border-radius .15s ease, background .15s ease;
}
.bt-cursor-dot--active { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.bt-cursor-dot--green { background: var(--green); }

/* Crosshair: same dot element reshaped into a plus mark via box-shadow arms */
.bt-cursor-dot--crosshair {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: var(--red);
  border-radius: 0;
  box-shadow:
    -9px 0 0 -0.5px var(--red), 9px 0 0 -0.5px var(--red),
    0 -9px 0 -0.5px var(--red), 0 9px 0 -0.5px var(--red);
}
.bt-cursor-dot--crosshair.bt-cursor-dot--active {
  box-shadow:
    -13px 0 0 -0.5px var(--red), 13px 0 0 -0.5px var(--red),
    0 -13px 0 -0.5px var(--red), 0 13px 0 -0.5px var(--red);
}

/* ── Ring (lagging outline, red default + green variant) ── */
.bt-cursor-ring {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid var(--red-mid);
  transition: opacity .2s ease, width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease, background .2s ease;
}
.bt-cursor-ring--active {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-color: var(--red);
  background: var(--red-dim);
}
.bt-cursor-ring--green { border-color: var(--green-mid); }
.bt-cursor-ring--green.bt-cursor-ring--active { border-color: var(--green); background: var(--green-dim); }

/* ── Reticle: ring + four tick marks, slow continuous rotation.
   The outer element's transform is set every frame by JS (position
   tracking) — the rotation lives on a nested child instead, so the two
   transforms never fight over the same property. ── */
.bt-cursor-reticle {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  transition: opacity .2s ease, width .15s ease, height .15s ease, margin .15s ease;
}
.bt-cursor-reticle-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--red-mid);
  animation: bt-cursor-spin 6s linear infinite;
  transition: border-color .15s ease;
}
.bt-cursor-reticle span {
  position: absolute;
  background: var(--red-mid);
  transition: background .15s ease;
}
.bt-cursor-reticle span:nth-child(1) { top: -5px; left: 50%; width: 1px; height: 5px; margin-left: -0.5px; }
.bt-cursor-reticle span:nth-child(2) { bottom: -5px; left: 50%; width: 1px; height: 5px; margin-left: -0.5px; }
.bt-cursor-reticle span:nth-child(3) { left: -5px; top: 50%; height: 1px; width: 5px; margin-top: -0.5px; }
.bt-cursor-reticle span:nth-child(4) { right: -5px; top: 50%; height: 1px; width: 5px; margin-top: -0.5px; }
.bt-cursor-reticle--active { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.bt-cursor-reticle--active .bt-cursor-reticle-spin { border-color: var(--red); }
.bt-cursor-reticle--active span { background: var(--red); }
@keyframes bt-cursor-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Terminal block: blinking monospace cursor ── */
.bt-cursor-terminal {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  line-height: 1;
  color: var(--green);
  margin: -10px 0 0 0;
  animation: bt-cursor-blink 1s step-end infinite;
}
.bt-cursor-terminal--active { color: var(--white); }
@keyframes bt-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── Radar pulse: dot + an expanding, fading ring ── */
.bt-cursor-pulsering {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1px solid var(--red);
  transition: none;
}

/* ── Comet trail: small fading dots ── */
.bt-cursor-comet-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--red);
  transition: opacity .1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .bt-cursor-reticle, .bt-cursor-terminal { animation: none; }
}

/* ── CURSOR PICKER UI (sits next to the theme toggle) ── */
.has-cursor-picker .cursor-picker { display: flex; }
.cursor-picker { display: none; position: relative; }

.cursor-picker-panel {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border-m);
  border-radius: 8px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cursor-picker-panel[hidden] { display: none; }

.cursor-picker-title {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white-35);
  padding: 6px 10px 8px;
}

.cursor-picker-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--white-60);
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cursor-picker-opt:hover { background: var(--white-06); color: var(--white); }
.cursor-picker-opt.active { background: var(--red-dim); color: var(--red); }

/* Mobile menu: render the panel inline instead of as a floating popover */
.nav-mobile-menu .cursor-picker { display: flex; width: 100%; }
.nav-mobile-menu .cursor-picker-panel {
  position: static;
  width: 100%;
  margin-top: 6px;
  box-shadow: none;
  border-color: var(--border);
}