/* ==========================================================================
   OZE'S RESTAURANT — cursor.css
   The custom pointer's paint. js/cursor.js injects the two elements and the
   html.has-cursor flag; this file draws them.

   The native cursor is hidden ONLY under html.has-cursor — set by JS at the
   same moment the replacement pointer exists, so no path can leave a user
   cursorless. Touch devices and prefers-reduced-motion never get either
   side of the swap.
   ========================================================================== */

html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor [role="button"] {
  cursor: none;
}

.oz-cursor__dot,
.oz-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;              /* above header, drawer, everything */
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;                 /* hidden until the pointer enters */
  transition: opacity 240ms var(--ease-brand);
  will-change: transform;
}

.oz-cursor__dot.is-live,
.oz-cursor__ring.is-live {
  opacity: 1;
}

/* The dot: solid gold, 6 px — a point of light, not an arrowhead. */
.oz-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;      /* centre the 0,0 origin */
  background: var(--c-accent);
}

/* The ring: a hairline that trails the dot. Scale is driven by JS (it rides
   the same rAF as position), so colour is all CSS owns here. */
.oz-cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgb(239 218 172 / 0.4);
  background: rgb(239 218 172 / 0);
  transition:
    opacity 240ms var(--ease-brand),
    background-color 300ms var(--ease-brand),
    border-color 300ms var(--ease-brand);
}

/* Over something interactive: the ring fills faintly with gold. */
.oz-cursor__ring.is-hover {
  border-color: rgb(239 218 172 / 0.75);
  background: rgb(239 218 172 / 0.08);
}

/* Press: a brief squeeze toward the dot. */
.oz-cursor__ring.is-down {
  border-color: var(--c-accent);
}