/* ==========================================================================
   Cursor dot
   A small glowing dot trailing the pointer. Over anything clickable it grows
   and its glow intensifies — that is the whole interaction.
   Drawn under the native pointer, which stays visible on purpose.
   Injected by cursor.js on desktop, full perf tier only.
   ========================================================================== */

.cursor {
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  /* Two shadows: a tight core and a wider bloom. Scaling these up is what
     reads as "brighter" on hover. */
  box-shadow: 0 0 10px rgba(97, 206, 112, 0.65), 0 0 22px rgba(97, 206, 112, 0.35);
  /* Position comes from JS each frame; only size/glow are transitioned, so
     the growth eases while tracking stays frame-accurate. */
  will-change: transform;
  transition: width var(--dur-fast) var(--ease-out),
    height var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* ---- Over something clickable: bigger, brighter ---- */
.cursor.is-hovering .cursor__dot {
  width: 22px;
  height: 22px;
  background: var(--accent-hover);
  box-shadow: 0 0 18px rgba(97, 206, 112, 0.9), 0 0 44px rgba(97, 206, 112, 0.55),
    0 0 80px rgba(97, 206, 112, 0.28);
}

/* ---- Pressed: brief pinch, so the click has feedback ---- */
.cursor.is-down .cursor__dot {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 22px rgba(97, 206, 112, 1), 0 0 52px rgba(97, 206, 112, 0.6);
}

/* Hide where a custom cursor makes no sense. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor {
    display: none;
  }
}