/* ═══════════════════════════════════════════════
   Custom Cursor
   To remove: delete this file and js/cursor.js
   and their two <link>/<script> tags in index.html.
═══════════════════════════════════════════════ */

/* ── Tuning knobs ───────────────────────────── */
/* To make it even clearer: lower --cursor-bg alpha toward 0.02,
   lower --cursor-blur toward 1px, or reduce --cursor-highlight alpha.
   To make follow even snappier: raise CURSOR_EASE in cursor.js toward 0.5. */
:root {
  --cursor-size:        40px;                          /* base diameter */
  --cursor-size-hover:  64px;                          /* diameter over links/buttons */
  --cursor-size-click:  36px;                          /* diameter on mousedown (≈ 90%) */
  --cursor-blur:        2px;                           /* backdrop blur — low keeps text readable */
  --cursor-saturate:    120%;                          /* subtle saturation boost */
  --cursor-bg:          rgba(255, 255, 255, 0.04);    /* nearly invisible fill */
  --cursor-bg-hover:    rgba(255, 255, 255, 0.04);    /* same on hover — size change is enough */
  --cursor-border:      rgba(255, 255, 255, 0.50);    /* crisp rim carries the glass read */
  --cursor-highlight:   rgba(255, 255, 255, 0.30);    /* inner top-left glow */
  --cursor-shadow:      0 2px 10px rgba(0, 0, 0, 0.10); /* soft outer depth */
  --cursor-z:           99999;
}

/* ── Hide native cursor on fine-pointer desktops ── */
@media (hover: hover) and (pointer: fine) {
  body.cursor-active,
  body.cursor-active * {
    cursor: none !important;
  }
  /* Restore text caret on editable fields */
  body.cursor-active input,
  body.cursor-active textarea,
  body.cursor-active [contenteditable] {
    cursor: text !important;
  }
}

/* ── Cursor element ─────────────────────────── */
.custom-cursor {
  display: none; /* activated by JS via media query check */
  position: fixed;
  top: 0;
  left: 0;
  width:  var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--cursor-z);

  /* Nearly clear glass body */
  background: var(--cursor-bg);

  /* Crisp rim — main visual cue that there is a circle here */
  border: 1px solid var(--cursor-border);

  /* Very light backdrop blur — enough to read as glass, not enough to bleed over text */
  -webkit-backdrop-filter: blur(var(--cursor-blur)) saturate(var(--cursor-saturate));
          backdrop-filter: blur(var(--cursor-blur)) saturate(var(--cursor-saturate));

  /* Inner top-left specular + hair-thin bottom-right shadow for depth */
  box-shadow:
    inset 2px 2px 5px var(--cursor-highlight),
    inset -1px -1px 2px rgba(0, 0, 0, 0.04),
    var(--cursor-shadow);

  /* Size + opacity transitions — snappier */
  transition:
    width  170ms cubic-bezier(0.22, 1, 0.36, 1),
    height 170ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    background 160ms ease;

  opacity: 0;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .custom-cursor { display: block; }
}

/* Hover state — bigger only; fill stays the same to keep text legible */
.custom-cursor.is-hovering {
  width:  var(--cursor-size-hover);
  height: var(--cursor-size-hover);
  background: var(--cursor-bg-hover);
}

/* Click state — quick shrink */
.custom-cursor.is-clicking {
  width:  var(--cursor-size-click);
  height: var(--cursor-size-click);
  transition:
    width  60ms ease,
    height 60ms ease,
    opacity 180ms ease;
}

/* Over text fields — hide custom cursor, native caret takes over */
.custom-cursor.is-text {
  opacity: 0 !important;
}

/* Visible */
.custom-cursor.is-visible {
  opacity: 1;
}

/* Reduced motion — no size transitions, just opacity */
@media (prefers-reduced-motion: reduce) {
  .custom-cursor,
  .custom-cursor.is-clicking {
    transition: opacity 180ms ease;
  }
}