/**
 * css/hand-tracking/ht-overlay.css
 *
 * PURPOSE: Camera preview surface (PiP — Picture in Picture style).
 *          Shows the live camera feed + MediaPipe skeleton canvas.
 *          Mounted inside the standalone camera widget (see
 *          ht-camera-widget.js / ht-camera-widget.css) — this file only
 *          styles the video/canvas/badge content, not the widget chrome.
 */

/* ── 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;
}

/* Active delegate (CPU/GPU) + measured fps — a diagnostic, not decoration.
   See ht-engine.js's createLandmarker() header for why this matters on
   mobile: a broken GPU delegate detects zero hands forever without ever
   throwing an error, so this is the only on-screen way to tell that apart
   from "no hand in frame yet". */
.ht-preview-backend {
  margin-left: 2px;
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,0.25);
  opacity: 0.75;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── 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;

  /* Left hand (sidebar/condition navigation) gets its own accent so the
     two simultaneously-tracked hands read apart in the camera preview. */
  --ht-landmark-color-left:  rgba(154,230,180,0.9);
  --ht-connector-color-left: rgba(154,230,180,0.4);
  --ht-tip-color-left:       rgba(197,154,255,0.95);
}

/* ── 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)); }
}

/* ── Left-hand condition-list hover preview ──────────────────────────────── */
/* Applied by ht-nav-bridge.js to whichever .side-pill / #normalBtn the left
   hand is currently nearest to, purely as a preview — it does NOT mean
   that condition is selected yet (aria-pressed still reflects the real
   selection). Distinct from .ht-grabbable: this is a live-tracking
   highlight with no pulse, since it moves continuously with the hand
   rather than waiting to be grabbed. */
.ht-nav-hover {
  outline: 2px solid rgba(154,230,180,0.9);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(154,230,180,0.55);
}

/* ── Armed: the clutch is closed and THIS is what a release will apply ──── */
/* The coarse (hover) and fine (scrub) phases of ht-nav-bridge.js must not
   look the same. Hovering is a browsing preview that costs nothing;
   armed means "let go now and this condition is loaded". A brighter fill
   plus a heavier ring is the cheapest way to make that difference
   unmissable in peripheral vision, which is where it will be read — the
   user is looking at the eyes, not the list. */
.ht-nav-armed {
  outline: 2.5px solid rgba(197,154,255,0.98);
  outline-offset: 2px;
  background: rgba(197,154,255,0.20) !important;
  box-shadow: 0 0 16px rgba(197,154,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* ── Detent: one pulse per row crossed while scrubbing ──────────────────── */
/* A continuous control with no per-step feedback gives the user no way to
   count what they have done, which is what makes an accurate scrub still
   feel uncontrollable. This is the visual equivalent of the click a
   physical jog wheel makes. Deliberately short (140ms) so consecutive
   steps read as separate ticks rather than smearing into one glow. */
.ht-nav-detent {
  animation: htNavDetent 140ms ease-out;
}

@keyframes htNavDetent {
  0%   { transform: scale(1);    box-shadow: 0 0 16px rgba(197,154,255,0.7); }
  40%  { transform: scale(1.06); box-shadow: 0 0 22px rgba(197,154,255,1); }
  100% { transform: scale(1);    box-shadow: 0 0 16px rgba(197,154,255,0.7); }
}

/* Respect the user's motion preference: the pulse is decoration, the
   outline is the information. Drop the movement, keep the meaning. */
@media (prefers-reduced-motion: reduce) {
  .ht-nav-detent { animation: none; }
}