/* ─────────────────────────────────────────────────────────────────────────
   HG LABS · CUSTOM CURSOR · hglabs.net
   Drop-in stylesheet. Pair with hg-cursor.js.

   Design language: etched circuitry / phosphor signal.
   - The dot is the "signal" — exact pointer position, instant.
   - The ring is the "trace" — eases toward the dot with a slight delay.
   - On hover/click/text, the ring shape morphs to read as a PCB pad,
     a connector node, or an I-beam terminal cursor.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --hg-phosphor:        #A8E89C;
  --hg-phosphor-bright: #C8F2BE;
  --hg-phosphor-dim:    #5C8C54;
  --hg-board:           #0A0E0A;
  --hg-solder:          #C97B3D;
}

/* Hide native cursor everywhere. We re-show it inside form fields below
   so screen-reader / accessibility users keep system caret behaviour. */
@media (hover: hover) and (pointer: fine) {
  html.hg-cursor-on,
  html.hg-cursor-on * {
    cursor: none !important;
  }

  /* But: keep the system caret in real text fields so people can still see
     where they're typing. The visual cursor still hovers; native caret
     does its job. */
  html.hg-cursor-on input,
  html.hg-cursor-on textarea,
  html.hg-cursor-on [contenteditable="true"] {
    cursor: text !important;
  }
}

/* Wrapper holds both layers; positioned dead-centre on the pointer via
   transform translate(-50%, -50%). */
.hg-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;     /* above everything; same trick devtools uses */
  mix-blend-mode: normal;
  will-change: transform;
}

/* ─── DOT (the signal) ────────────────────────────────────────────────── */
.hg-cursor__dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;       /* centre on the pointer */
  border-radius: 50%;
  background: var(--hg-phosphor);
  box-shadow:
    0 0 6px var(--hg-phosphor),
    0 0 14px rgba(168, 232, 156, 0.55);
  transition:
    width 180ms ease,
    height 180ms ease,
    margin 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

/* ─── RING (the trace catching up) ────────────────────────────────────── */
.hg-cursor__ring {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid var(--hg-phosphor-dim);
  box-shadow: 0 0 10px rgba(168, 232, 156, 0.10) inset;
  transition:
    width 220ms cubic-bezier(.2, .8, .2, 1),
    height 220ms cubic-bezier(.2, .8, .2, 1),
    margin 220ms cubic-bezier(.2, .8, .2, 1),
    border-color 200ms ease,
    border-width 200ms ease,
    background 200ms ease,
    opacity 200ms ease;
}

/* ─── PCB PAD TICKS (cardinal connectors, only shown on hover) ─────────── */
/* Four tiny phosphor traces extending out from the ring at N/E/S/W —
   makes the ring read as an etched "pad" on the board. */
.hg-cursor__ticks {
  position: fixed;
  top: 0; left: 0;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
  transform: scale(0.8);
}
.hg-cursor__ticks::before,
.hg-cursor__ticks::after,
.hg-cursor__ticks > i,
.hg-cursor__ticks > i + i {
  content: "";
  position: absolute;
  background: var(--hg-phosphor);
  box-shadow: 0 0 4px var(--hg-phosphor);
}
/* horizontal arms */
.hg-cursor__ticks::before { top: 50%; left: -8px;  width: 8px; height: 1px; margin-top: -0.5px; }
.hg-cursor__ticks::after  { top: 50%; right: -8px; width: 8px; height: 1px; margin-top: -0.5px; }
/* vertical arms */
.hg-cursor__ticks > i             { left: 50%; top: -8px;    width: 1px; height: 8px; margin-left: -0.5px; }
.hg-cursor__ticks > i + i         { left: 50%; bottom: -8px; width: 1px; height: 8px; margin-left: -0.5px; top: auto; }

/* ─── STATE: hover an interactive element ─────────────────────────────── */
.hg-cursor[data-state="hover"] .hg-cursor__ring {
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-color: var(--hg-phosphor);
  border-width: 1.5px;
  background: rgba(168, 232, 156, 0.06);
  box-shadow:
    0 0 14px rgba(168, 232, 156, 0.35),
    0 0 24px rgba(168, 232, 156, 0.15) inset;
}
.hg-cursor[data-state="hover"] .hg-cursor__dot {
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  background: var(--hg-phosphor-bright);
}
.hg-cursor[data-state="hover"] .hg-cursor__ticks {
  opacity: 1;
  transform: scale(1);
}

/* ─── STATE: hover a text node (paragraphs, headings) ─────────────────── */
/* Becomes an I-beam terminal cursor — a thin phosphor bar. */
.hg-cursor[data-state="text"] .hg-cursor__ring {
  width: 3px; height: 26px;
  margin: -13px 0 0 -1.5px;
  border-radius: 0;
  border: none;
  background: var(--hg-phosphor);
  box-shadow:
    0 0 8px var(--hg-phosphor),
    0 0 18px rgba(168, 232, 156, 0.6);
  animation: hg-blink 1s steps(2, end) infinite;
}
.hg-cursor[data-state="text"] .hg-cursor__dot {
  opacity: 0;
}

@keyframes hg-blink {
  50% { opacity: 0.35; }
}

/* ─── STATE: pressed (click) ─────────────────────────────────────────── */
.hg-cursor[data-state="press"] .hg-cursor__ring,
.hg-cursor[data-state="hover"][data-pressed="true"] .hg-cursor__ring {
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-color: var(--hg-solder);
  background: rgba(201, 123, 61, 0.10);
}
.hg-cursor[data-state="press"] .hg-cursor__dot,
.hg-cursor[data-pressed="true"] .hg-cursor__dot {
  background: var(--hg-solder);
  box-shadow:
    0 0 6px var(--hg-solder),
    0 0 14px rgba(201, 123, 61, 0.6);
}

/* ─── PULSE LAYER (signal-fire on click) ─────────────────────────────── */
.hg-cursor__pulse {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid var(--hg-phosphor);
  opacity: 0;
  pointer-events: none;
}
.hg-cursor__pulse.is-firing {
  animation: hg-pulse 520ms cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes hg-pulse {
  0%   { opacity: 0.85; transform: scale(0.6); border-color: var(--hg-phosphor-bright); }
  100% { opacity: 0;    transform: scale(2.6); border-color: var(--hg-phosphor); }
}

/* ─── HIDDEN STATE (cursor leaves window) ─────────────────────────────── */
.hg-cursor.is-hidden .hg-cursor__dot,
.hg-cursor.is-hidden .hg-cursor__ring,
.hg-cursor.is-hidden .hg-cursor__ticks {
  opacity: 0;
}

/* ─── Reduced motion: disable trailing & pulses, keep state changes ──── */
@media (prefers-reduced-motion: reduce) {
  .hg-cursor__ring,
  .hg-cursor__dot,
  .hg-cursor__ticks {
    transition-duration: 0ms !important;
  }
  .hg-cursor__ring {
    /* ring follows the dot exactly — no easing */
  }
  .hg-cursor__pulse.is-firing {
    animation: none;
  }
  .hg-cursor[data-state="text"] .hg-cursor__ring {
    animation: none;
  }
}

/* ─── Touch devices: hide entirely ────────────────────────────────────── */
@media (hover: none) or (pointer: coarse) {
  .hg-cursor { display: none !important; }
  html.hg-cursor-on,
  html.hg-cursor-on * { cursor: auto !important; }
}