/* FIXD — custom cursor.
   A small yellow dot that grows into a labelled disc over images and actions.
   Only ever enabled on fine-pointer devices with hover, and never on touch. */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--yellow);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity var(--dur-sm) linear,
              width var(--dur-sm) var(--ease-snap),
              height var(--dur-sm) var(--ease-snap),
              margin var(--dur-sm) var(--ease-snap),
              background var(--dur-sm) linear;
  display: grid;
  place-content: center;
}
html.has-cursor .cursor { opacity: 1; }

.cursor__word {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur-xs) linear, transform var(--dur-sm) var(--ease-snap);
  white-space: nowrap;
}

.cursor.is-active {
  width: 78px; height: 78px;
  margin: -39px 0 0 -39px;
}
.cursor.is-active .cursor__word { opacity: 1; transform: none; }

.cursor[data-tone="dark"] { background: var(--black); }
.cursor[data-tone="dark"] .cursor__word { color: var(--yellow); }

/* Hide the native pointer only where the custom one is genuinely active. */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .frame { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; }
}