/* ============================================================
   Emote wheel + emote text — the radial emote picker for the
   cursor character (emote_wheel.js).

   Colour comes entirely from mix-blend-mode: difference (so it's
   the opposite of whatever's behind it, on any page), the same
   trick as the .cursor dot. Strokes/fills use currentColor, which
   inherits the layer's --color-muted base before the blend.
   ============================================================ */

.emote-wheel,
.emote-text {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  color: var(--color-muted);
  mix-blend-mode: difference;
  z-index: 9999;                  /* under the dot (10000), over page content */
}

/* ---- wheel ----
   Open/close is driven by GSAP (scale + autoAlpha on the svg), not CSS, so the
   svg centres via gsap xPercent/yPercent — no transform here. */
.emote-wheel__svg {
  display: block;
  overflow: visible;
}

.emote-wheel__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .8;
}
.emote-wheel__divider {
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: .42;
}
.emote-wheel__active {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 1;
}
.emote-wheel__label {
  font-family: var(--font-doodle, 'Caveat', cursive);
  font-weight: 700;
  font-size: 17px;
  fill: currentColor;
  opacity: .8;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .12s ease, transform .12s ease;
}
.emote-wheel__label.is-active {
  opacity: 1;
  transform: scale(1.18);
}

/* ---- emote text (one reused path, drawn on like handwriting) ---- */
.emote-text {
  opacity: 0;                     /* gsap autoAlpha drives it */
}
.emote-text__svg {
  display: block;
  overflow: visible;
}
.emote-text__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* No custom cursor / wheel on touch or reduced environments. */
@media (hover: none), (pointer: coarse) {
  .emote-wheel,
  .emote-text { display: none; }
}