/**
 * css/hand-tracking/ht-overlay.css
 *
 * PURPOSE: Camera preview overlay (PiP — Picture in Picture style).
 *          Shows the live camera feed + MediaPipe skeleton canvas.
 *          Lives inside the ht-panel but can be toggled independently.
 */

/* ── Preview container ───────────────────────────────────────────────────── */
.ht-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);

  /* Smooth height transition when shown/hidden */
  max-height: 300px;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1),
              opacity     0.3s ease;
}

.ht-preview-wrap[data-visible="false"] {
  max-height: 0;
  opacity: 0;
  border: none;
  pointer-events: none;
}

/* ── Video element (raw camera feed) ────────────────────────────────────── */
#ht-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Mirror horizontally — selfie / natural view */
  transform: scaleX(-1);

  /* Hide native controls */
  pointer-events: none;
}

/* ── Canvas overlay (MediaPipe skeleton drawing) ─────────────────────────── */
#ht-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* Canvas content is already mirrored in JS to match the video */
  pointer-events: none;
}

/* ── Status badge overlay ─────────────────────────────────────────────────── */
.ht-preview-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Live indicator dot */
.ht-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #68d391;
  animation: ht-livepulse 1.2s infinite;
}

@keyframes ht-livepulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Hand detected indicator */
.ht-hand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbd38d;
  opacity: 0;
  transition: opacity 0.2s;
}

.ht-hand-dot[data-detected="true"] {
  opacity: 1;
}

/* ── Landmark drawing style constants (consumed by ht-engine.js) ─────────── */
/* These are CSS variables so ht-engine.js can read them via getComputedStyle,
   keeping canvas drawing style in CSS not hardcoded in JS. */
:root {
  --ht-landmark-color:     rgba(99,179,237,0.9);
  --ht-connector-color:    rgba(99,179,237,0.4);
  --ht-tip-color:          rgba(251,211,141,0.95);
  --ht-landmark-radius:    4px;
  --ht-connector-width:    2px;
}

/* ── Permission / loading overlay ────────────────────────────────────────── */
.ht-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

.ht-preview-placeholder svg {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

/* Hide placeholder once camera starts */
.ht-preview-wrap[data-ready="true"] .ht-preview-placeholder {
  display: none;
}

/* ── Grabbable-tool affordance ────────────────────────────────────────────── */
/* Applied by ht-tool-bridge.js directly to #penlight / #coverPaddle /
   #krimsky-prism (elements owned by other modules) while the tracked hand
   is within grab range and nothing is currently gripped. Purely additive:
   the class is only ever added by hand-tracking JS, so it has zero effect
   when hand tracking is off. Kept in the hand-tracking CSS bundle rather
   than each tool's own stylesheet to keep every hand-tracking-specific
   style in one place. */
.ht-grabbable {
  animation: ht-grabbable-glow 1.1s ease-in-out infinite;
}

@keyframes ht-grabbable-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(251,211,141,0)); }
  50%      { filter: drop-shadow(0 0 16px rgba(251,211,141,0.9)); }
}