/* ==========================================================================
   YANO STARS — CUSTOM CURSOR (gold glove, pointing finger)
   Site-wide branded pointer. The OS arrow is only hidden once cursor.js has
   confirmed a fine pointer AND the image has loaded — via body.y-cursor-active
   — so if the script/image ever fails, the normal cursor stays visible.
   ========================================================================== */

.y-cursor {
  position: fixed;
  left: var(--cx, 0); top: var(--cy, 0);
  z-index: var(--z-cursor);
  width: 38px; height: auto;
  pointer-events: none;
  opacity: 0;
  /* Anchor the fingertip (not the image center) to the real mouse point. */
  transform: translate(calc(-1 * var(--tip-x, 8%)), calc(-1 * var(--tip-y, 1%))) scale(1);
  transform-origin: var(--tip-x, 8%) var(--tip-y, 1%);
  will-change: left, top, transform;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 10px rgba(255,193,7,0.35));
  transition:
    opacity 250ms ease,
    transform 130ms var(--ease-spring),
    filter 200ms var(--ease-out);
}
.y-cursor img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.y-cursor.is-visible { opacity: 1; }

/* Hovering an interactive element: grow + brighten glow */
.y-cursor.is-hover {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(255,193,7,0.6));
}
.y-cursor.is-hover.is-visible {
  transform: translate(calc(-1 * var(--tip-x, 8%)), calc(-1 * var(--tip-y, 1%))) scale(1.25);
}

/* Click feedback */
.y-cursor.is-down.is-visible {
  transform: translate(calc(-1 * var(--tip-x, 8%)), calc(-1 * var(--tip-y, 1%))) scale(0.9);
}

/* Hide the OS cursor ONLY when JS has activated (never a blanket rule at the
   stylesheet root — this whole block is scoped under body.y-cursor-active,
   which JS only adds after confirming a fine pointer AND a loaded image).
   Applies to every element (not just body, since `cursor` is inherited but
   many elements/browser defaults set their own value that breaks
   inheritance — links default to `pointer`, etc.) so the OS arrow can never
   peek through on plain elements that fall outside a short allowlist. */
body.y-cursor-active * {
  cursor: none !important;
}

/* Touch / coarse-pointer devices never show the cursor image. cursor.js also
   bails before adding y-cursor-active, so this is a belt-and-suspenders guard. */
@media (max-width: 780px), (hover: none), (pointer: coarse) {
  .y-cursor { display: none !important; }
}