/* ============================================================
   45-magnetic-cursor.css — soft pointer-follow cursor blob

   Adds a subtle 24px circle that follows the cursor with a tiny
   delay (driven by CSS transitions), painting wherever the user
   is hovering. On primary buttons it expands and changes colour.

   The blob is a fixed-position element rendered by JS once and
   tracked across the page. Pure CSS handles the appearance,
   transitions, and the "expand on button hover" behaviour.

   Hidden on touch devices (no cursor to follow) and on
   prefers-reduced-motion. Falls back gracefully.
   ============================================================ */

@property --btb-cursor-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

#btb-cursor {
  /* The cursor blob itself — sits above everything */
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px; /* centre on the recorded position */
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-yellow) 35%, transparent);
  border: 2px solid var(--c-yellow);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-yellow) 35%, transparent);
  pointer-events: none;
  z-index: 9998; /* below scroll-progress (9999), above everything else */
  /* The follow lag comes from the transition — JS only updates
     translate-x and translate-y on each frame, the transition
     smooths the gap so the blob feels weighted, not jittery. */
  transition:
    transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    margin 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 180ms ease,
    border-color 180ms ease,
    opacity 200ms ease;
  opacity: 0;
  mix-blend-mode: multiply;
}

/* Reveal once the cursor has moved at least once (JS adds .is-visible) */
#btb-cursor.is-visible {
  opacity: 1;
}

/* Expand state — JS adds .is-magnetic when hovering a button/link/CTA */
#btb-cursor.is-magnetic {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: color-mix(in srgb, var(--c-green) 18%, transparent);
  border-color: var(--c-green);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c-green) 30%, transparent);
}

/* Press state — slightly smaller, full saturation */
#btb-cursor.is-pressed {
  transform: translate3d(var(--btb-cursor-x, 0), var(--btb-cursor-y, 0), 0) scale(0.85);
  background: color-mix(in srgb, var(--c-green) 35%, transparent);
}

/* Touch + reduce-motion: hide */
@media (hover: none), (prefers-reduced-motion: reduce) {
  #btb-cursor { display: none; }
}

/* Mobile narrower than 720px: hide unconditionally */
@media (max-width: 720px) {
  #btb-cursor { display: none; }
}