/* ==========================================================================
   CURSOR EFFECT — Evolve Up Fitness
   ==========================================================================
   Fully isolated, additive. Does not touch any existing section,
   layout, spacing, typography, or component.

   Desktop-only by construction, not just by convention: everything
   here lives inside @media (hover: hover) and (pointer: fine), which
   only matches real mouse-driven desktop browsers. Touch devices
   (every Android phone) never load this behavior at all — no wasted
   event listeners, no battery cost, and no risk of a phantom cursor
   element sitting uselessly on a screen that has no cursor concept.

   GPU-only: cursor position and scale are both applied via `transform`
   exclusively (translate3d + scale) — never top/left, which would
   trigger layout on every mousemove frame.

   To roll back completely: remove this file's <link>/<script> tags
   and the two #cursorDot/#cursorRing elements from index.html.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  #cursorDot,
  #cursorRing {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998; /* below the page loader (9999), above everything real */
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
  }

  #cursorDot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    transform: translate3d(-50%, -50%, 0);
  }

  #cursorRing {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(42, 167, 155, 0.4);
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }

  #cursorRing.is-active {
    transform: translate3d(-50%, -50%, 0) scale(1.6);
    border-color: var(--accent);
    background: rgba(42, 167, 155, 0.08);
  }

  /* Only hide the native cursor once JS confirms this is a real
     mouse-driven session (via body.has-custom-cursor) — never assume
     it from the media query alone, since some hybrid devices report
     hover:hover/pointer:fine without truly matching the intended
     "desktop with a mouse" case. If JS never runs, the native cursor
     stays exactly as it always was. */
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: none;
  }
}

/* Reduced motion: the custom cursor is disabled entirely, falling
   back to the native system cursor — same principle already applied
   to ambient background's cursor-effect exclusion. A cursor that is
   always in continuous motion tied to real-time mouse tracking is
   exactly the kind of thing prefers-reduced-motion exists to opt
   people out of. */
@media (prefers-reduced-motion: reduce) {
  #cursorDot, #cursorRing { display: none !important; }
}