/* =========================================================================
   cursor.css — custom cursor, crumb trail, magnetic affordances.
   Every rule here is gated on a fine pointer: on touch the whole layer is
   never built (see cursor.js) and these rules never match anything.
   ========================================================================= */

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  /* Hidden until the pointer actually moves. Otherwise both parts sit
     parked at viewport centre on load and read as a stray UI element —
     visible in the first §7 capture before this was added. */
  opacity: 0;
  transition: opacity .2s linear;
}
html.cursor-live .cursor,
html.cursor-live .cursor-ring { opacity: 1; }

.cursor {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ink);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(var(--ink-rgb), .55);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: transparent;
  transition: width .28s var(--ease-out), height .28s var(--ease-out),
              margin .28s var(--ease-out), background-color .28s var(--ease-out),
              border-color .28s var(--ease-out), color .2s linear;
}

/* Over anything interactive. */
.cursor-ring.is-hot {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(255, 79, 163, .28);
  border-color: var(--hot-pink);
}
/* Over a product card the ring carries the arrow, so the CARD must not also
   slide one in. One arrow per hover. */
.cursor-ring.is-card { color: var(--ink); }
html.has-cursor .card:hover .card__go span { transform: none !important; }

/* Native cursor is hidden only once ours is actually running. */
html.has-cursor,
html.has-cursor a,
html.has-cursor button { cursor: none; }

/* =========================================================================
   CRUMB TRAIL — hero only, pooled, capped at 30 nodes.
   ========================================================================= */
.crumb {
  position: fixed;
  z-index: calc(var(--z-cursor) - 1);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 40% 60% 55% 45%;
  background: var(--cocoa);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

@media (hover: none) {
  .cursor, .cursor-ring, .crumb { display: none !important; }
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; }
}

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