/**
 * Golden Eagle GS — Custom Cursor (Motion layer)
 * Stage 6A, Part 4 — Core Platform: Motion
 *
 * See assets/js/custom-cursor.js's docblock for the full spec source
 * and technique reasoning (golden-eagle-hifi-ui-spec.md §0.3).
 *
 * All position/size/state changes use only `transform` and `opacity`
 * (MOTION_GUIDELINES.md's GPU-safe rule) — the 48px "expand over
 * clickable elements" state is a `scale()`, not a width/height change;
 * the "20% gold-opacity fill over image/card hover" state is an
 * `opacity` fade of an already-correctly-colored background, not a
 * `background-color` transition.
 *
 * Native cursor is hidden ONLY once `.ge-custom-cursor-active` is
 * present on `<body>` — set by custom-cursor.js itself, after
 * confirming desktop support and successfully initializing. Touch
 * devices, or any page where the script fails to run, keep the
 * normal system cursor — never an accidental invisible-cursor
 * regression.
 *
 * LOADING: registered and enqueued sitewide (this is a genuinely
 * sitewide desktop enhancement, not tied to any specific page's
 * content) — see inc/motion.php. The script's own runtime checks
 * (hover/pointer media query, `load`-event lazy init) are what
 * actually gate whether anything visible happens, consistent with
 * the QA checklist's stated performance requirements.
 */

body.ge-custom-cursor-active,
body.ge-custom-cursor-active a,
body.ge-custom-cursor-active button {
  cursor: none;
}

.ge-cursor-dot,
.ge-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--ge-z-cursor, 9999);
  will-change: transform;
}

.ge-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--ge-color-gold-300);
  transform: translate3d(var(--ge-cursor-x, -100px), var(--ge-cursor-y, -100px), 0)
    translate(-50%, -50%);
}

.ge-cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--ge-color-gold-300);
  background: var(--ge-color-gold-300);
  opacity: 0;
  transform: translate3d(var(--ge-cursor-x, -100px), var(--ge-cursor-y, -100px), 0)
    translate(-50%, -50%) scale(1);
  transition: transform 80ms linear, opacity 150ms var(--ge-ease-standard);
}

.ge-cursor-ring.is-interactive {
  transform: translate3d(var(--ge-cursor-x, -100px), var(--ge-cursor-y, -100px), 0)
    translate(-50%, -50%) scale(1.5); /* 32px → 48px */
}

.ge-cursor-ring.is-media {
  opacity: 0.2; /* "ring fills 20% gold-opacity over image/card hover" */
}

/* Both states can apply together (a card that's also a link) — the
   two selectors above target different properties (transform vs.
   opacity) so they compose without conflict; no extra rule needed. */

@media (prefers-reduced-motion: reduce) {
  .ge-cursor-ring {
    transition: opacity 150ms var(--ge-ease-standard);
  }
}

/* Belt-and-suspenders: even if custom-cursor.js's own hover/pointer
   check somehow ran on a touch device, these elements never render
   usefully there — hide them outright as a second safety net. */
@media (hover: none), (pointer: coarse) {
  .ge-cursor-dot,
  .ge-cursor-ring {
    display: none;
  }
}