/*
===============================================================================
  GENESIS HAND MOUSE - Controle de cursor por mão via tracking MediaPipe
===============================================================================
  Ativa apenas quando a câmera está em modo fullscreen.
  Classes isoladas com prefix .ghm-*
*/

/* Botão no header da câmera (só ativo em fullscreen) */
.gct-btn.ghm-btn{
  opacity: 0.55;
  cursor: not-allowed;
  transition: opacity .2s, background .2s, color .2s, box-shadow .2s;
}
body.camera-maximized .gct-btn.ghm-btn{
  opacity: 1;
  cursor: pointer;
}
body.camera-maximized .gct-btn.ghm-btn.ghm-active{
  background: rgba(255, 0, 255, 0.4);
  border-color: #ff00ff;
  color: #ff00ff;
  box-shadow: 0 0 12px #ff00ff;
  animation: ghmBtnPulse 1.5s infinite;
}
@keyframes ghmBtnPulse{
  50% { box-shadow: 0 0 20px #ff00ff; }
}


/* ==========================================================================
   CURSOR VIRTUAL
   ========================================================================== */
.ghm-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 10000;
  margin-left: -22px;   /* centraliza */
  margin-top: -22px;
  will-change: left, top;
}

/* Ponto central */
.ghm-cursor-dot{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #00f0ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px #00f0ff, 0 0 4px #fff;
  transition: background .2s, box-shadow .2s, transform .1s;
}

/* Anel externo (target) */
.ghm-cursor-ring{
  position: absolute;
  inset: 0;
  border: 2px solid rgba(0, 240, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  animation: ghmRingPulse 2s infinite;
  transition: border-color .15s, transform .15s, background .2s;
}
@keyframes ghmRingPulse{
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 0.35; }
}

/* Crosshair fino (elegância HUD) */
.ghm-cursor::before,
.ghm-cursor::after{
  content: '';
  position: absolute;
  background: rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
}
.ghm-cursor::before{
  top: 50%; left: 6px; right: 6px;
  height: 1px;
  transform: translateY(-50%);
}
.ghm-cursor::after{
  left: 50%; top: 6px; bottom: 6px;
  width: 1px;
  transform: translateX(-50%);
}

/* Estado de clique (pinça fechada) */
.ghm-cursor.ghm-clicking .ghm-cursor-ring{
  border-color: #ff00ff;
  background: rgba(255, 0, 255, 0.15);
  transform: scale(0.75);
  animation: none;
  box-shadow: 0 0 14px #ff00ff;
}
.ghm-cursor.ghm-clicking .ghm-cursor-dot{
  background: #ff00ff;
  box-shadow: 0 0 16px #ff00ff, 0 0 4px #fff;
  transform: translate(-50%, -50%) scale(1.3);
}

/* Feedback visual de clique efetuado */
.ghm-cursor.ghm-clicked .ghm-cursor-ring{
  animation: ghmClickFlash 0.3s;
}
@keyframes ghmClickFlash{
  0%   { transform: scale(0.75); border-color: #fff; background: rgba(255,255,255,0.4); }
  100% { transform: scale(1);    border-color: rgba(0,240,255,0.75); background: transparent; }
}


/* ==========================================================================
   INDICADOR DE HOVER em elementos interagíveis
   ========================================================================== */
.ghm-hovered{
  outline: 2px solid #00f0ff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.6) !important;
  transition: outline .15s, box-shadow .15s !important;
}


/* ==========================================================================
   LABEL DE STATUS FLUTUANTE (mostra qual mão está ativa)
   ========================================================================== */
.ghm-status{
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 8px 16px;
  background: rgba(0, 10, 25, 0.92);
  border: 1px solid rgba(255, 0, 255, 0.55);
  border-radius: 20px;
  color: #ff00ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(255, 0, 255, 0.6);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(255, 0, 255, 0.3);
  pointer-events: none;
  animation: ghmStatusIn 0.3s;
}
@keyframes ghmStatusIn{
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
.ghm-status-hand{
  display: inline-block;
  width: 8px; height: 8px;
  background: #ff00ff;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 6px #ff00ff;
  animation: ghmBtnPulse 1s infinite;
}


/* Tema claro */
body.light-theme .ghm-cursor-dot{
  background: #0088c8;
  box-shadow: 0 0 12px #0088c8, 0 0 4px #fff;
}
body.light-theme .ghm-cursor-ring{
  border-color: rgba(0, 136, 200, 0.75);
  box-shadow: 0 0 8px rgba(0, 136, 200, 0.4);
}
body.light-theme .ghm-status{
  background: rgba(238, 242, 246, 0.95);
  color: #0088c8;
  border-color: rgba(0, 136, 200, 0.5);
}