/* ════════════════════════════════════════════════════════════════════════════
   Pointer layer — a cursor that behaves like an instrument, not a decoration.

   The idea is a targeting reticle rather than a glowing blob: a small solid dot
   that tracks the pointer exactly, and a ring that lags behind it with spring
   physics. The lag is what reads as "engineered" — the ring overshoots slightly
   and settles, the way a servo does, instead of sliding on a timer.

   Over something interactive the ring snaps to that element's own bounds and
   squares off into corner brackets, so the cursor appears to lock on to its
   target. That is the whole trick: the state change is driven by what is under
   the pointer, so the effect carries information instead of just moving.

   Off entirely for touch devices, for a coarse pointer, and under
   prefers-reduced-motion. Never intercepts a click — the layer is inert.
   ════════════════════════════════════════════════════════════════════════════ */

.fb-cursor,
.fb-cursor-ring,
.fb-cursor-trail{
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
  transition: opacity .3s;
}
.fb-cursor.on,
.fb-cursor-ring.on,
.fb-cursor-trail.on{ opacity: 1; }

/* the dot: exact, no lag — this is where the pointer actually is */
.fb-cursor{
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 10px rgba(22,103,214,.7);
  transition: width .18s, height .18s, margin .18s, background .18s, opacity .3s;
}

/* the ring: lags, overshoots, settles */
.fb-cursor-ring{
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--brand) 52%, transparent);
  transition: width .22s cubic-bezier(.2,.9,.3,1.4),
              height .22s cubic-bezier(.2,.9,.3,1.4),
              margin .22s cubic-bezier(.2,.9,.3,1.4),
              border-radius .22s, border-color .22s, background .22s, opacity .3s;
}

/* ── locked on to an interactive element ─────────────────────────────────── */
.fb-cursor-ring.locked{
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--brand) 78%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
/* corner brackets — drawn with gradients so no extra elements are needed */
.fb-cursor-ring.locked::before{
  content: "";
  position: absolute; inset: -4px;
  border-radius: 12px;
  background:
    linear-gradient(var(--brand),var(--brand)) 0 0/9px 1.5px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 0 0/1.5px 9px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 100% 0/9px 1.5px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 100% 0/1.5px 9px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 0 100%/9px 1.5px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 0 100%/1.5px 9px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 100% 100%/9px 1.5px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 100% 100%/1.5px 9px no-repeat;
  opacity: .85;
  animation: fbCurLock .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes fbCurLock{ from{ inset: 2px; opacity: 0 } }
.fb-cursor.locked{ width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }

/* over text: the ring becomes a thin caret rule */
.fb-cursor-ring.text{
  width: 2px; height: 22px;
  margin: -11px 0 0 -1px;
  border-radius: 1px;
  border: none;
  background: color-mix(in srgb, var(--brand) 75%, transparent);
}
.fb-cursor.text{ opacity: 0; }

/* pressed */
.fb-cursor-ring.down{ transform-origin: center; filter: brightness(1.25); }
.fb-cursor.down{ width: 10px; height: 10px; margin: -5px 0 0 -5px; }

/* ── the trail: a short comet of the last few positions ──────────────────── */
.fb-cursor-trail{
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--brand);
}

/* dark theme wants a cooler, brighter instrument against the dark ground */
:root[data-theme="dark"] .fb-cursor{
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 12px rgba(90,162,255,.85);
}

/* the real cursor is hidden only once ours is running, and only on a device
   that has a precise pointer — losing the system cursor on a touchpad-less
   machine or a screen reader setup would be worse than having no effect */
html.fb-cursor-active,
html.fb-cursor-active body,
html.fb-cursor-active a,
html.fb-cursor-active button,
html.fb-cursor-active .fx,
html.fb-cursor-active [role="button"]{ cursor: none; }
/* text entry keeps its own cursor: people need the I-beam to place a caret */
html.fb-cursor-active input,
html.fb-cursor-active textarea,
html.fb-cursor-active select,
html.fb-cursor-active [contenteditable]{ cursor: auto; }

@media (hover: none), (pointer: coarse){
  .fb-cursor, .fb-cursor-ring, .fb-cursor-trail{ display: none !important; }
  html.fb-cursor-active, html.fb-cursor-active *{ cursor: auto !important; }
}
@media (prefers-reduced-motion: reduce){
  .fb-cursor, .fb-cursor-ring, .fb-cursor-trail{ display: none !important; }
  html.fb-cursor-active, html.fb-cursor-active *{ cursor: auto !important; }
}