/* HAND/OS interactive X-ray finger link */
.finger-haptic-overlay{
  position:absolute;
  inset:0;
  z-index:12;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}

.finger-target{
  pointer-events:none;
}

#fingerHapticOverlay [role="button"]{
  outline:none !important;
  -webkit-tap-highlight-color:transparent;
}

#fingerHapticOverlay [role="button"]:focus,
#fingerHapticOverlay [role="button"]:focus-visible{
  outline:none !important;
}

.finger-hit{
  fill:none;
  stroke:transparent;
  stroke-width:var(--hit-width,32);
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:stroke;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.finger-trace{
  fill:none;
  stroke:#79ffd0;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(121,255,208,.95)) drop-shadow(0 0 12px rgba(86,226,255,.7));
  pointer-events:none;
}

.finger-target.is-active .finger-trace{
  opacity:1;
  stroke-dasharray:11 15;
  animation:fingerSignalFlow .7s linear infinite,fingerTraceBloom .48s ease-out both;
}

.finger-haptic-feedback{
  position:absolute;
  z-index:14;
  left:14px;
  right:14px;
  bottom:14px;
  min-height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:10px 13px;
  border:1px solid rgba(121,255,208,.18);
  border-radius:14px;
  background:rgba(2,8,15,.72);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.02);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}

.xray-scene.finger-haptic-enabled .finger-haptic-overlay,
.xray-scene.finger-haptic-enabled .finger-haptic-feedback{
  opacity:1;
  visibility:visible;
}

.xray-scene.finger-haptic-enabled .finger-haptic-feedback{
  transform:translateY(0);
}

.finger-haptic-feedback strong{
  color:#eafff8;
  font:900 10px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-align:center;
}

.finger-haptic-feedback small{
  color:rgba(188,220,228,.68);
  font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
  text-align:center;
}

.finger-haptic-lockbar{
  height:2px;
  width:100%;
  border-radius:999px;
  overflow:hidden;
  background:rgba(121,255,208,.10);
  opacity:0;
}

.finger-haptic-lockbar::after{
  content:'';
  display:block;
  height:100%;
  width:100%;
  transform-origin:left center;
  background:linear-gradient(90deg,#79ffd0,#8ad8ff);
  box-shadow:0 0 8px rgba(121,255,208,.6);
}

.xray-scene.finger-haptic-locked .finger-haptic-lockbar{
  opacity:1;
}

.xray-scene.finger-haptic-locked .finger-haptic-lockbar::after{
  animation:fingerLockCountdown 7s linear forwards;
}

.xray-scene.finger-haptic-locked .finger-hit{
  pointer-events:none;
}

.xray-scene.finger-signal-active .xray-chip-aura{
  opacity:1;
  filter:brightness(1.7) saturate(1.45);
}

.xray-scene.finger-signal-active .chip-core{
  box-shadow:0 0 12px rgba(255,220,120,.72),0 0 30px rgba(121,255,208,.48),0 0 54px rgba(90,190,255,.34);
}

.xray-scene.finger-signal-active .chip-ring-a,
.xray-scene.finger-signal-active .chip-ring-b{
  animation-duration:1.1s;
}

@keyframes fingerSignalFlow{
  to{stroke-dashoffset:-52}
}

@keyframes fingerTraceBloom{
  0%{stroke-width:11;opacity:0}
  45%{stroke-width:7;opacity:1}
  100%{stroke-width:5;opacity:1}
}

@keyframes fingerLockCountdown{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

@media (max-width:480px){
  .finger-haptic-feedback{left:10px;right:10px;bottom:10px;min-height:44px;padding:9px 10px}
}

@media (prefers-reduced-motion:reduce){
  .finger-target.is-active .finger-trace,
  .xray-scene.finger-haptic-locked .finger-haptic-lockbar::after{
    animation:none;
  }
}