/**
 * css/hand-tracking/ht-cursor.css
 *
 * PURPOSE: Visual cursor that follows the user's hand position on screen.
 *          Shows different icons based on the active gesture/tool.
 */

/* ── Base cursor ─────────────────────────────────────────────────────────── */
#ht-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;          /* never blocks clicks */
  z-index: 8900;
  will-change: transform;

  /* Centered on its origin point */
  transform: translate(-50%, -50%);

  /* The visible ring + dot */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;

  /* Hidden when hand tracking is off */
  opacity: 0;
  transition: opacity 0.3s ease;
}

#ht-cursor[data-visible="true"] {
  opacity: 1;
}

/* Outer ring */
.ht-cursor-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  transition: border-color 0.2s, transform 0.2s;
}

/* Inner dot */
.ht-cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  transition: background 0.2s, transform 0.2s;
}

/* Tool emoji label */
.ht-cursor-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
  transition: opacity 0.2s;
  opacity: 0;
}

/* ── Gesture-specific styling ─────────────────────────────────────────────── */

/* Penlight — warm amber */
#ht-cursor[data-gesture="penlight"] .ht-cursor-ring {
  border-color: rgba(251,211,141,0.8);
  box-shadow: 0 0 12px rgba(251,211,141,0.4);
}
#ht-cursor[data-gesture="penlight"] .ht-cursor-dot {
  background: #fbd38d;
}
#ht-cursor[data-gesture="penlight"] .ht-cursor-label { opacity: 1; }

/* Cover paddle — green */
#ht-cursor[data-gesture="cover"] .ht-cursor-ring {
  border-color: rgba(154,230,180,0.8);
  box-shadow: 0 0 12px rgba(154,230,180,0.4);
}
#ht-cursor[data-gesture="cover"] .ht-cursor-dot {
  background: #9ae6b4;
}
#ht-cursor[data-gesture="cover"] .ht-cursor-label { opacity: 1; }

/* Krimsky prism — blue */
#ht-cursor[data-gesture="prism"] .ht-cursor-ring {
  border-color: rgba(144,205,244,0.8);
  box-shadow: 0 0 12px rgba(144,205,244,0.4);
}
#ht-cursor[data-gesture="prism"] .ht-cursor-dot {
  background: #90cdf4;
}
#ht-cursor[data-gesture="prism"] .ht-cursor-label { opacity: 1; }

/* Move (fist) — purple, slightly scaled up */
#ht-cursor[data-gesture="move"] .ht-cursor-ring {
  border-color: rgba(197,154,255,0.8);
  box-shadow: 0 0 12px rgba(197,154,255,0.4);
  transform: scale(1.2);
}
#ht-cursor[data-gesture="move"] .ht-cursor-dot {
  background: #c59aff;
  transform: scale(1.3);
}
#ht-cursor[data-gesture="move"] .ht-cursor-label { opacity: 1; }

/* Reset (open palm) — orange */
#ht-cursor[data-gesture="reset"] .ht-cursor-ring {
  border-color: rgba(252,129,74,0.8);
  box-shadow: 0 0 12px rgba(252,129,74,0.4);
}
#ht-cursor[data-gesture="reset"] .ht-cursor-dot {
  background: #fc814a;
}
#ht-cursor[data-gesture="reset"] .ht-cursor-label { opacity: 1; }

/* ── Confirmation flash animation ────────────────────────────────────────── */
/* Fired by adding .ht-flash class momentarily via JS */
#ht-cursor.ht-flash .ht-cursor-ring {
  animation: ht-ring-flash 0.4s ease-out forwards;
}

@keyframes ht-ring-flash {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(2.2); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── No-hand state: fades out ─────────────────────────────────────────────── */
#ht-cursor[data-gesture="none"] {
  opacity: 0;
}

/* ── Hover-ready state ────────────────────────────────────────────────────── */
/* Shown while the hand is in grab range of a tool but hasn't closed into
   a fist yet — a soft pulsing ring previews "close your hand here" before
   the user commits, independent of whatever gesture color is showing. */
#ht-cursor[data-hover="true"] .ht-cursor-ring {
  animation: ht-hover-pulse 1.1s ease-in-out infinite;
}

@keyframes ht-hover-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.35); opacity: 0.55; }
}