/* ==========================================================================
   AGRIYANA — Custom cursor

   Ring + centre dot, native arrow hidden.

   ── THE ONE RULE ───────────────────────────────────────────────────────────

   `cursor: none` is applied ONLY under `html.ag-cursor-on`, and that class is
   set by req/js/cursor.js at runtime — never by this file, never in the
   markup. If the script does not run, the class never appears and the native
   arrow is simply still there.

   Do not "simplify" this by putting `cursor: none` on `body`. A page with no
   pointer at all is the one failure a visitor cannot work around, and it is
   why the previous two attempts were removed. Same fail-open contract as
   `html.m-ready` in the motion system.

   Loads after viewer.css, before mobile.css.
   ========================================================================== */

/* --- the handover -------------------------------------------------------- */
html.ag-cursor-on,
html.ag-cursor-on * { cursor: none; }

/* Text fields keep the native I-beam. It tells you a field is editable and
   shows where the caret will land, which a dot cannot do. cursor.js also
   drops the class entirely while the pointer is over one, so this is the
   belt to that braces. */
html.ag-cursor-on input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]),
html.ag-cursor-on textarea,
html.ag-cursor-on [contenteditable],
html.ag-cursor-on [data-native-cursor],
html.ag-cursor-on [data-native-cursor] * { cursor: auto; }

/* the 3D viewer keeps its grab affordance — the gesture is the point there */
html.ag-cursor-on .pdp-frame.has-3d.is-3d canvas { cursor: grab; }
html.ag-cursor-on .pdp-frame.has-3d.is-dragging canvas { cursor: grabbing; }

/* ==================================================================== parts */

.ag-cur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;           /* must never intercept a click */
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.ag-cur.is-on { opacity: 1; }
/* over a text field the companion stands down completely */
.ag-cur.is-text { opacity: 0; }

/* --- the dot -------------------------------------------------------------
   Written straight from the pointer event with no easing, so it is exactly
   where the mouse is. This is the part you aim with. */
.ag-cur-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
  will-change: transform;
  transition: width var(--dur-1) var(--ease-out),
              height var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}

/* --- the ring ------------------------------------------------------------
   Eased a few frames behind the dot. Decoration, deliberately, so the lag
   never costs precision. */
.ag-cur-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 42%, transparent);
  will-change: transform;
  transition: width var(--dur-2) var(--ease-spring),
              height var(--dur-2) var(--ease-spring),
              border-color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}

/* --- hover ---------------------------------------------------------------
   Over anything actionable the ring opens and takes the brand colour, and the
   dot shrinks so the centre of the target stays readable through it. */
.ag-cur.is-active .ag-cur-ring {
  width: 46px;
  height: 46px;
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.ag-cur.is-active .ag-cur-dot { width: 5px; height: 5px; background: var(--brand); }

/* --- press ---------------------------------------------------------------
   The ring closes onto the dot, so the click reads as the two meeting. */
.ag-cur.is-down .ag-cur-ring { width: 24px; height: 24px; background: color-mix(in srgb, var(--brand) 20%, transparent); }
.ag-cur.is-down .ag-cur-dot  { width: 9px; height: 9px; }

/* --- the label -----------------------------------------------------------
   Rides with the ring, offset below so it never sits under the dot. */
.ag-cur-label {
  position: fixed;
  left: 0;
  top: 0;
  margin-top: 34px;               /* clear of the ring at its widest */
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  transition: opacity var(--dur-1) var(--ease-out);
}
.ag-cur.has-label .ag-cur-label { opacity: 1; }

/* ==================================================================== off */

/* cursor.js returns before building anything in either of these cases; this
   is here for a preference that flips mid-session, and so a coarse pointer
   can never be left with a stranded ring and no arrow. */
@media (prefers-reduced-motion: reduce) {
  .ag-cur { display: none; }
  html.ag-cursor-on, html.ag-cursor-on * { cursor: auto; }
}
@media (hover: none), (pointer: coarse) {
  .ag-cur { display: none !important; }
  html.ag-cursor-on, html.ag-cursor-on * { cursor: auto !important; }
}