/**
 * cursor.css — Novagroup Custom Cursor
 * Desktop only (pointer: fine + min-width 1024px).
 * Dot 6px navy + ring 28px copper. Scoped to [data-cursor-zone].
 * ALL values reference tokens from css/tokens.css.
 */

/* ============================================================
 * CURSOR ELEMENTS  (injected into DOM by cursor.js)
 * ============================================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}

/* Active when cursor zone is entered */
[data-cursor-zone]:hover ~ .cursor-dot,
[data-cursor-zone]:hover ~ .cursor-ring,
.cursor-dot.is-active,
.cursor-ring.is-active {
  opacity: 1;
}

/* ============================================================
 * DOT — 6px navy fill
 * ============================================================ */
.cursor-dot {
  width: 6px;
  height: 6px;
  background-color: var(--c-navy);
  transition:
    transform  var(--dur-micro) var(--ease-out),
    width      var(--dur-short) var(--ease-out),
    height     var(--dur-short) var(--ease-out),
    opacity    var(--dur-short) var(--ease-out);
}

/* ============================================================
 * RING — 28px copper outline
 * ============================================================ */
.cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-copper);
  background: transparent;
  transition:
    transform  0.12s var(--ease-out),
    width      var(--dur-short) var(--ease-out),
    height     var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    opacity    var(--dur-short) var(--ease-out);
}

/* ============================================================
 * INTERACTIVE HOVER STATE — ring scales 1.6×
 * Applied by cursor.js when hovering <a> or <button>
 * ============================================================ */
.cursor-ring.is-hovering {
  width: calc(28px * 1.6);
  height: calc(28px * 1.6);
  border-color: var(--c-copper-bright);
  opacity: 0.7;
}

.cursor-dot.is-hovering {
  transform: translate(-50%, -50%) scale(0.5);
  background-color: var(--c-copper);
}

/* ============================================================
 * PRESS STATE — click feedback (#31)
 * cursor.js drives both elements' translate via inline style (rAF), so the
 * press uses width/height (not transform) for the dot too, springing via
 * --ease-spring. Ring contracts + warms; dot grows.
 * ============================================================ */
.cursor-ring.is-pressing {
  width: 20px;
  height: 20px;
  border-color: var(--c-copper-bright);
  transition:
    width  var(--dur-micro) var(--ease-spring),
    height var(--dur-micro) var(--ease-spring),
    border-color var(--dur-short) var(--ease-out);
}

.cursor-dot.is-pressing {
  width: 10px;
  height: 10px;
  background-color: var(--c-copper);
  transition:
    width  var(--dur-micro) var(--ease-spring),
    height var(--dur-micro) var(--ease-spring);
}

/* ============================================================
 * Hide system cursor inside active cursor zone
 * ============================================================ */
[data-cursor-zone].is-cursor-active,
[data-cursor-zone].is-cursor-active * {
  cursor: none !important;
}

/* ============================================================
 * ONLY active on pointer: fine + min-width: 1024px
 * cursor.js also checks this — CSS here is a safety net.
 * ============================================================ */
@media (pointer: coarse), (max-width: 1023px) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* ============================================================
 * REDUCED MOTION — suppress all cursor transitions / animations
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    transition: none !important;
    animation: none !important;
  }
}