/*
Nexus Orb Walkthrough Layer
Lets the orb travel across the viewport to stand near an arbitrary target element, extend a
stylized pointing hand at it, and (via nexus-orb-microcopy.js) show step instructions in the
existing micro-message callout. Deliberately uses its own --nxv4-walkthrough-x/-y transform pair
rather than the docking layer's --nxv4-orb-travel-x/-y (nexus-ai-v4-living-motion.css) so a
walkthrough triggered while the panel is open/closed never fights the docking transform.
*/

#nexus-v4-presence {
  --nxv4-walkthrough-x: 0px;
  --nxv4-walkthrough-y: 0px;
}

#nexus-v4-presence.nxv4-walkthrough-active #nxv4-orb {
  transform: translate3d(var(--nxv4-walkthrough-x, 0px), var(--nxv4-walkthrough-y, 0px), 0) scale(1) !important;
  transition:
    transform 900ms cubic-bezier(.22, 1, .36, 1),
    filter 240ms ease !important;
  filter: drop-shadow(0 20px 40px rgba(227, 6, 19, .30));
  z-index: 10030 !important;
}

/* The pointing hand: anchored to the orb, rotated toward the target via --nxv4-hand-angle
   (set in JS as radians converted to deg). Built from layered shapes rather than a photoreal
   asset - a stylized chrome/red hand matching the orb's own material language reads as
   intentional, where an attempted photorealistic hand would clash with the orb's sci-fi globe
   aesthetic and be far less reliable to render well procedurally. */
.nxv4-walkthrough-hand {
  position: fixed;
  width: 54px;
  height: 70px;
  pointer-events: none;
  z-index: 10031;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(.5);
  transform-origin: 50% 88%;
  transition:
    opacity 260ms ease,
    transform 900ms cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 10px 18px rgba(2, 6, 23, .45));
}

.nxv4-walkthrough-hand.show {
  opacity: 1;
  transform: translate3d(var(--nxv4-hand-x, 0px), var(--nxv4-hand-y, 0px), 0) rotate(var(--nxv4-hand-angle, 0deg)) scale(1);
}

.nxv4-walkthrough-hand .nxv4-hand-tap {
  animation: nxv4HandTap 1400ms ease-in-out infinite;
  animation-delay: 260ms;
  transform-origin: 50% 88%;
}

@keyframes nxv4HandTap {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-4px); }
}

/* Target highlight: a soft pulsing red/chrome ring around whatever element the walkthrough is
   pointing at, so the hand's aim is reinforced rather than relying on angle alone. */
.nxv4-walkthrough-target-highlight {
  position: fixed;
  pointer-events: none;
  z-index: 10029;
  border-radius: 12px;
  border: 2px solid rgba(227, 6, 19, .75);
  box-shadow:
    0 0 0 4px rgba(227, 6, 19, .16),
    0 0 22px rgba(227, 6, 19, .35);
  opacity: 0;
  transition: opacity 260ms ease, top 320ms ease, left 320ms ease, width 320ms ease, height 320ms ease;
  animation: nxv4TargetPulse 1600ms ease-in-out infinite;
}

.nxv4-walkthrough-target-highlight.show {
  opacity: 1;
}

@keyframes nxv4TargetPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(227, 6, 19, .16), 0 0 22px rgba(227, 6, 19, .35); }
  50% { box-shadow: 0 0 0 8px rgba(227, 6, 19, .10), 0 0 32px rgba(227, 6, 19, .50); }
}

@media (prefers-reduced-motion: reduce) {
  #nexus-v4-presence.nxv4-walkthrough-active #nxv4-orb,
  .nxv4-walkthrough-hand,
  .nxv4-walkthrough-target-highlight {
    transition: opacity 120ms ease !important;
    animation: none !important;
  }
}