/* ════════════════════════════════════════════
   CUSTOM CURSOR — shared across every page
   Glowing dot by default, morphs into a reticle
   when hovering a clickable element.
   ════════════════════════════════════════════ */

html, body {
  cursor: none;
}

/* On touch / coarse-pointer devices (and at mobile widths generally) there's no
   pointer to follow, so the custom cursor would just strand its glowing dot at
   the last tap point. Disable it and restore native cursor behaviour. */
@media (hover: none), (pointer: coarse), (max-width: 860px) {
  html, body { cursor: auto; }
  .cursor { display: none; }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999999;
  transform: translate3d(-100px, -100px, 0);
}

.cursor-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 224, 160, 0.35), transparent 70%);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cursor-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--c-shipped);
  box-shadow: 0 0 9px rgba(128, 224, 160, 0.8);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cursor-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 2px solid var(--c-shipped);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cursor-tick {
  position: absolute;
  background: var(--c-shipped);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cursor-tick.t, .cursor-tick.b { width: 2px; height: 9px; left: 50%; margin-left: -1px; }
.cursor-tick.l, .cursor-tick.r { height: 2px; width: 9px; top: 50%; margin-top: -1px; }
.cursor-tick.t { top: 50%; margin-top: -26px; transform: scaleY(0.3); transform-origin: bottom; }
.cursor-tick.b { top: 50%; margin-top: 17px;  transform: scaleY(0.3); transform-origin: top; }
.cursor-tick.l { left: 50%; margin-left: -26px; transform: scaleX(0.3); transform-origin: right; }
.cursor-tick.r { left: 50%; margin-left: 17px;  transform: scaleX(0.3); transform-origin: left; }

/* Hovering a clickable element morphs the dot into a reticle */
.cursor.pin-hover .cursor-dot  { transform: scale(0.6); }
.cursor.pin-hover .cursor-ring { opacity: 1; transform: scale(1); }
.cursor.pin-hover .cursor-tick { opacity: 1; transform: scale(1); }
.cursor.pin-hover .cursor-glow { opacity: 0.6; transform: scale(1.3); }