/* Room307 - the hand cursor
 *
 * Shared by every page, so it lives apart from any one page's layout. The grey
 * hand stands in for the pointer; main.js only switches it on for a fine pointer
 * that can hover, so touch devices are left alone entirely - and the class it
 * adds is what hides the native cursor, meaning a failed script leaves an
 * ordinary usable pointer rather than none at all.
 */
.has-hand, .has-hand * { cursor: none; }

.cursor {
  /* Where the claw tip sits on the sprite, printed by tools/build-assets.py.
     main.js reads this same value, so the hotspot is defined once. */
  --hot-x: 58.54%;

  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 91px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transform-origin: var(--hot-x) 0;   /* it leans about its own point */
  will-change: transform;
  transition: opacity .18s ease;
}
.cursor.is-on { opacity: 1; }

.cursor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / .18));
}
.cursor .c-side { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cursor { transition: none; }
}