/* ═══════════════════════════════════════════════════════════
   03 — CURSOR
   Custom cursor for the light theme. No mix-blend-difference —
   dark cursor reads cleanly on the cream background.
   States:
     .cur              idle      — dark ring + dark center dot
     .cur.touching     hovering a letter — slightly larger
     .cur.click        mouse held — accent ring + soft fill
   ═══════════════════════════════════════════════════════════ */

.cur {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--fg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition:
    width  .25s var(--ease-out),
    height .25s var(--ease-out),
    border-color .25s var(--ease-out),
    background   .25s var(--ease-out);
}

.cur::after {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--fg);
  border-radius: 50%;
  transition:
    background .25s var(--ease-out),
    transform  .25s var(--ease-out);
}

.cur.touching {
  width: 56px;
  height: 56px;
}

.cur.click {
  width: 88px;
  height: 88px;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cur.click::after {
  background: var(--accent);
  transform: scale(2.2);
}

@media (hover: none) {
  .cur { display: none; }
}