/* ==========================================================
   FANCY CURSOR — gradient ring that only animates when
   transitioning between states (default ↔ hover ↔ on-gold).
     - Same gradient image across all states, just shifted.
     - background-position transitions smoothly between states.
     - Once settled, the gradient is static.
   ========================================================== */

html.has-fancy-cursor,
html.has-fancy-cursor body { cursor: none; }
html.has-fancy-cursor a,
html.has-fancy-cursor button,
html.has-fancy-cursor [role="button"],
html.has-fancy-cursor input,
html.has-fancy-cursor textarea,
html.has-fancy-cursor select,
html.has-fancy-cursor label,
html.has-fancy-cursor .btn,
html.has-fancy-cursor .tier { cursor: none; }

.fc-ring,
.fc-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform, opacity;
}

/* -------- inner dot — silvery -------- */
.fc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #ffffff 0%,
      #f3f5f8 35%,
      #c9d0db 70%,
      #5e6a7c 100%);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 14px rgba(174, 183, 197, 0.55),
    0 0 1px rgba(0, 0, 0, 0.55);
  transition: opacity .25s ease, background .6s ease, box-shadow .6s ease;
}
.fc-dot.on-gold {
  background:
    radial-gradient(circle at 35% 30%,
      #ffffff 0%,
      #aeb7c5 45%,
      #1a2233 100%);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 1px rgba(0, 0, 0, 0.85);
}

/* -------- outer ring -------- */
.fc-ring {
  width: 26.5px;
  height: 26.5px;
  transition: opacity .25s ease;
}

/*
  The trick: ONE wide gradient image with three "palettes"
  laid out side-by-side. Different states reveal different
  windows of it via background-position. Transitioning
  between states animates background-position smoothly,
  so the colors interpolate visibly during the transition,
  and sit static once arrived.

  Layout (left -> right):
    0%   silver/warm idle
    33%  silver -> gold (hover)
    66%  cool navy + silver (on-gold)
*/
.fc-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: linear-gradient(135deg,
    /* 0 — default: silver-led with warm accent */
    #5e6a7c   0%,
    #aeb7c5   6%,
    #ffffff  12%,
    #f3e6b8  18%,
    #d4ac56  24%,
    #5e6a7c  32%,
    /* 33 — hover (interactive): bolder silver -> gold */
    #5e6a7c  35%,
    #c9d0db  41%,
    #ffffff  46%,
    #f3e6b8  53%,
    #d4ac56  60%,
    #856815  65%,
    /* 66 — on-gold: cool navy + silver */
    #1a2233  70%,
    #424c5b  76%,
    #aeb7c5  82%,
    #ffffff  88%,
    #424c5b  94%,
    #0c1422 100%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-mask:
    radial-gradient(circle, transparent 9.5px, #000 10px, #000 12.7px, transparent 13.2px);
          mask:
    radial-gradient(circle, transparent 9.5px, #000 10px, #000 12.7px, transparent 13.2px);
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 4px rgba(227, 231, 238, 0.55));
  /* the magic: smooth color transition only when state changes */
  transition:
    background-position .55s cubic-bezier(.4,.1,.3,1),
    filter .35s ease;
}

/* hover over interactive: slide window to the middle palette */
.fc-ring.is-hover::before {
  background-position: 50% 50%;
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 7px rgba(243, 230, 184, 0.7))
    drop-shadow(0 0 4px rgba(212, 172, 86, 0.55));
}

/* over a gold element: slide all the way to the cool palette */
.fc-ring.on-gold::before {
  background-position: 100% 50%;
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

/* on press: tiny brightness pop */
.fc-ring.is-down::before {
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
}

/* hide on touch */
@media (pointer: coarse) {
  .fc-ring, .fc-dot { display: none !important; }
  html.has-fancy-cursor,
  html.has-fancy-cursor body,
  html.has-fancy-cursor * { cursor: auto !important; }
}