/* ============================================================
   Custom cursor — a small dot whose colour adapts to whatever is
   behind it (mix-blend-mode: difference on the design-system muted
   tone, so it's an opposite-ish but never harsh colour). Motion is
   driven by cursor.js. Progressive enhancement: the native cursor is
   hidden ONLY while `cursor-on` is set (added by the script), so a
   no-JS / unsupported environment keeps its normal pointer.
   ============================================================ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-muted);
  mix-blend-mode: difference;     /* opposite of the background, not intense */
  pointer-events: none;
  z-index: 10000;                 /* above the intro veil (9999) */
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  html.cursor-on,
  html.cursor-on * { cursor: none; }
}

/* Touch / no fine pointer → no custom cursor at all. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ------------------------------------------------------------------
   Footer Contact logo cursor — the dot morphs into the hovered social
   link's logo. The footer ships on every page (base.html), so this
   overlay + its hide-the-dot rule live here, not in landing.css.
   Driven by cursor_interactions.js.
   ------------------------------------------------------------------ */
.cursor-icon {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 10002;
  will-change: transform;
}
.cursor-icon #icon-shape { fill: var(--dark-fg); }   /* cream on the dark footer */

/* Hide the plain dot while the logo cursor is driving. */
html.icon-active .cursor { opacity: 0; }

/* ------------------------------------------------------------------
   Lobby hand cursor — the dot morphs into a tiny hand: a grab hand over
   the light lever, a pointing hand over a TV screen. The lobby is its own
   page (extends base.html), so this overlay + its hide-the-dot rule live
   here next to the footer logo morph. Driven by cursor_interactions.js.
   ------------------------------------------------------------------ */
.cursor-hand {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  pointer-events: none;
  z-index: 10002;
  mix-blend-mode: difference;     /* adapts to the lobby bg + lights-off invert, like the dot */
  will-change: transform;
}
.cursor-hand__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cursor-hand__palm,
.cursor-hand rect { fill: var(--color-muted); }

/* Hide the plain dot while the hand cursor is driving. */
html.hand-active .cursor { opacity: 0; }