/* Branded animated pencil cursor — replaces the default OS cursor site-wide.
   Colours pull from the Fajr Media palette (orange body, teal eraser, warm
   ferrule) set on the SVG in pencil-cursor.js. Coarse pointers fall back to
   the native cursor because JavaScript does not add the root opt-in class.

   Hotspot geometry: the box is 50px and the drawn graphite tip sits at
   (12px, 40.5px) inside it. That point is the transform-origin (so the pencil
   pivots on its tip) and the anchor for the round focus dot. */

/* The synchronous head bootstrap adds the capability class before first paint.
   Root scoping keeps native touch/coarse-pointer behaviour available. */
@media (hover: hover) and (pointer: fine),
       (any-hover: hover) and (any-pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor body *,
  html.has-custom-cursor body *::before,
  html.has-custom-cursor body *::after,
  html.has-custom-cursor::view-transition,
  html.has-custom-cursor::view-transition-group(*),
  html.has-custom-cursor::view-transition-image-pair(*),
  html.has-custom-cursor::view-transition-old(*),
  html.has-custom-cursor::view-transition-new(*) {
    cursor: none !important;
  }
}

.custom-cursor,
.cursor,
.cursor-dot,
.cursor-ring,
.cursor-follower,
.pencil-cursor,
.pencil-cursor * {
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
}

/* Clicking a header/menu link runs a cross-document VIEW TRANSITION (see
   @view-transition in styles.css): the browser paints a snapshot of the outgoing +
   incoming pages in its TOP LAYER, above all normal DOM, and slides it for ~0.45s.
   The blanket `*` rule above can't reach that snapshot layer, so the native arrow
   showed for the whole slide whenever a nav item was clicked — this was the "default
   cursor on the menu bar items" leak. Pinning `cursor:none` onto the VT pseudo tree
   hides the OS cursor through the transition too; the pencil re-appears on the next
   mousemove once the new page settles. */
.pencil-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  pointer-events: none !important;
  z-index: 2147483647;
  transform-origin: 12px 40.5px;
  will-change: transform;
  /* No opacity transition: a 160ms fade made the pencil feel "detached" whenever it
     re-showed after a hide (right-click contextmenu suppress, mouseleave/enter on
     the window edge, tab switches). Native cursors appear/disappear INSTANTLY, so
     matching that keeps the pencil feeling like the real OS cursor at all times. */
}

.pencil-cursor.is-hidden {
  opacity: 0;
}

.pencil-cursor,
.pencil-cursor *,
.pencil-cursor::before,
.pencil-cursor::after,
.pencil-cursor *::before,
.pencil-cursor *::after {
  pointer-events: none !important;
}

/* No idle animation: a perpetual bob wiggles the pencil tip independently of the
   pointer, so the hotspot never sits still and the cursor reads as "not smooth"
   next to the rock-steady native cursor. The pencil now tracks the pointer with
   zero added motion, like a real cursor. (Click feedback still uses pencilTap.) */
.pencil-cursor__float {
  width: 100%;
  height: 100%;
}

.pencil-cursor__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* No `filter: drop-shadow()`. A CSS filter forces the cursor onto an off-screen
     filter buffer that the browser can re-rasterize whenever the busy page
     invalidates the layer — which is what made the pencil hitch vs the reference
     site (cancerrehabpakistan.com), whose cursor is a filter-free ring+dot and
     stays glassy. The pencil now paints as plain flat shapes (no filter pass), so
     moving it is a cheap composite. Its own multi-colour barrel (orange/teal/cream/
     espresso) carries enough internal contrast to read on the page without a shadow;
     if it ever gets lost on a matching background we add a baked outline, not a
     filter. */
}

/* Focus hotspot — NON-VISUAL. The click point lives at the pencil tip
   (9.6px, 30.4px) and drives the magnetic snap in JS, but nothing is drawn.
   Kept as a zero-size, invisible anchor so no dot/ring ever renders. */
.pencil-cursor__focus {
  position: absolute;
  left: 12px;
  top: 40.5px;
  width: 0;
  height: 0;
  visibility: hidden;
}

/* JavaScript owns the capability decision. Root-scoping visibility avoids a
   hybrid device's primary coarse pointer overriding its connected mouse. */
html:not(.has-custom-cursor) .pencil-cursor {
  display: none;
}