/* ── Lightweight trailing cursor dot (pairs with assets/cursor-dot.js). ──────────────────────────────
   A small dot that trails the NATIVE arrow. pointer-events:none so it never blocks clicks, text selection,
   links, buttons or form inputs. Colour flips black↔white by section (class toggled from JS). The trailing
   smoothness is the JS lerp — so NO CSS transition on transform (that would double-smooth); only opacity +
   colour ease. No mix-blend-mode (that was the old GPU scroll-jank cause).

   Cuberto "preview" state (.is-view): over an example project card the dot SWELLS into a labelled disc
   ("Ansehen"/"View"/"Bekijk") with a restrained spring pop, then snaps back on leave. The size/label are CSS
   transitions fired only on hover enter/leave — no per-frame cost, no second animation loop. */
#gmx-cursor-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--ink,#0b0d10);
  opacity:0;
  display:grid; place-items:center;
  transition:opacity .3s ease, background-color .35s ease,
             width .5s var(--spring,cubic-bezier(.34,1.56,.64,1)),
             height .5s var(--spring,cubic-bezier(.34,1.56,.64,1));
  will-change:transform;
}
#gmx-cursor-dot.on{opacity:1}
#gmx-cursor-dot.on-dark{background:#fff}

/* the "Ansehen" preview disc — grows from the dot with a spring overshoot; the label scale-ins inside it.
   FIXED ink disc + white label (NOT section-inverted): the disc always sits over a project card's website
   screenshot (any colour), so an opaque ink fill + white text stays legible regardless, and the soft shadow +
   hairline ring give it an edge on both light and dark card imagery. Overrides the dot's .on-dark colour. */
#gmx-cursor-dot.is-view{
  width:74px; height:74px;
  background:var(--ink,#0b0d10);
  box-shadow:0 6px 22px rgba(10,12,18,.34), 0 0 0 1.5px rgba(255,255,255,.3);
}
.gmx-cursor-label{
  opacity:0; transform:scale(.4);
  font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1;
  color:#fff; white-space:nowrap; pointer-events:none; user-select:none;
  transition:opacity .28s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .42s var(--spring,cubic-bezier(.34,1.56,.64,1));
}
#gmx-cursor-dot.is-view .gmx-cursor-label{opacity:1;transform:scale(1)}

/* touch / reduced-motion: never show the dot (JS also bails, this is the belt-and-braces CSS guard) */
@media (pointer:coarse){#gmx-cursor-dot{display:none}}
@media (prefers-reduced-motion:reduce){#gmx-cursor-dot{display:none}}