/* ============================================================
   The pointer is the mark.

   The native cursor is hidden and replaced by the ASCO chevron.
   At rest it is quiet — ghost stroke plus a solid dot. Over anything
   clickable it runs the SAME two animations as the header logo:
   markrun (a light travelling the chevron) and markdot (the pulse),
   at the same 1.6s cadence, so the pointer and the logo read as one
   object rather than two things that happen to look alike.
   ============================================================ */

/* Only claimed once the script confirms a fine pointer — a touch device
   never gets cursor:none, or it would hide nothing and cost everything. */
html.cursor-on, html.cursor-on * { cursor: none !important; }
/* Text entry keeps its native caret: a chevron floating over a field gives no
   clue where the insertion point is. Scoped to fields you actually TYPE into —
   a range slider is an <input> too, and it should keep the mark. */
html.cursor-on input:not([type]), html.cursor-on input[type="text"], html.cursor-on input[type="email"], html.cursor-on input[type="search"],
 html.cursor-on input[type="tel"], html.cursor-on input[type="url"], html.cursor-on input[type="password"], html.cursor-on input[type="number"],
 html.cursor-on textarea, html.cursor-on [contenteditable] { cursor: text !important; }
/* ...and the mark steps aside there, so there is never a caret AND a chevron */
.cursor.texting { opacity: 0; }

.cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  width: 26px; height: 26px;
  /* NEVER hit-testable. The cursor sits under the mouse by definition, so a
     single stray pixel of it would swallow every click on the site. */
  pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease;
  will-change: transform;
}
/* The outer element carries POSITION (written every frame by script); the inner
   carries SCALE. Keeping them apart means the press animation cannot clobber
   the translate, which is the classic way a custom cursor ends up stuck in a
   corner the moment it is clicked. */
.cursor-in {
  width: 100%; height: 100%;
  /* Tilted to 11:00 — the mark points up-left the way an arrow cursor does,
     instead of straight up. One clock hour is 30 degrees, counter-clockwise.
     The pivot is the APEX, not the centre: the apex is the hotspot, so
     rotating about anything else would swing the point away from the mouse
     and the cursor would aim somewhere you are not. 7/32 of the box = 21.875%. */
  transform-origin: 50% 21.875%;
  transform: rotate(-30deg);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor.ready { opacity: 1; }
.cursor.gone { opacity: 0; }
.cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cursor path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }

/* at rest — the mark, holding still */
.cursor .c-ghost { stroke: rgba(242, 241, 238, 0.38); }
.cursor .c-run { stroke: var(--bright); stroke-dasharray: 0.42 0.58; opacity: 0; transition: opacity 0.2s ease; }
.cursor .c-dot { fill: var(--signal); transform-origin: center; transform-box: fill-box; }

/* over something clickable — the header logo's own animation, same cadence */
.cursor.hot .c-ghost { stroke: rgba(242, 241, 238, 0.16); }
.cursor.hot .c-run {
  opacity: 1;
  animation: markrun 0.8s linear infinite;      /* twice the header's pace */
  filter: drop-shadow(0 0 5px rgba(11, 95, 255, 0.7));
}
.cursor.hot .c-dot {
  animation: markdot 0.8s ease-in-out infinite; /* kept in step with the sweep */
  filter: drop-shadow(0 0 7px rgba(11, 95, 255, 0.9));
}
/* the press itself, so a click feels answered */
.cursor.hot .cursor-in { transform: rotate(-30deg) scale(1.12); }
.cursor.press .cursor-in { transform: rotate(-30deg) scale(0.82); }

@media (prefers-reduced-motion: reduce) {
  .cursor .c-run, .cursor .c-dot { animation: none !important; }
  .cursor.hot .c-run { opacity: 1; }
}