/* Purpose: Custom emerald cursor (dot + lagging ring). Ported from the WV reference §9.
   Emerald stays visible on white, cream, and dark sections (flips white on dark).
   Activated only on fine pointers via .has-custom-cursor (JS adds it). */

.has-custom-cursor { cursor: none; }
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [data-mag] { cursor: none; }

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;                       /* shown once JS activates (avoids a 0,0 flash) */
}
.has-custom-cursor .cursor-dot,
.has-custom-cursor .cursor-ring { opacity: 1; }

.cursor-dot {
  width: 8px; height: 8px;
  background: var(--emerald);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 14px rgba(55, 96, 84, 0.45),
    0 0 28px rgba(55, 96, 84, 0.20);
  transition: background var(--dur-default) var(--ease);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(55, 96, 84, 0.55);
  border-radius: 50%;
  transition: width var(--dur-default) var(--ease),
              height var(--dur-default) var(--ease),
              border-color var(--dur-default) var(--ease),
              background var(--dur-default) var(--ease);
}

/* Ring grows over interactive elements. */
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring,
body:has([data-mag]:hover) .cursor-ring {
  width: 56px; height: 56px;
  border-color: var(--emerald);
  background: rgba(55, 96, 84, 0.06);
}

/* On dark / image sections flip the dot to white so it stays readable. */
.section-hero .cursor-dot,
.is-dark .cursor-dot,
.proof-parallax .cursor-dot {
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(55, 96, 84, 0.35),
    0 0 14px rgba(255, 255, 255, 0.55),
    0 0 28px rgba(255, 255, 255, 0.25);
}

@media (max-width: 900px), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  .has-custom-cursor { cursor: auto; }
}