/* ═══ HEAD POINTER v2 · CSS (naso+iride, One Euro Filter) ═══ */

#cursor2 {
  position: fixed; z-index: 9999;
  width: 24px; height: 24px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  opacity: 0; /* puntatore trasparente: serve solo internamente per il tracking, non si vede */
}
#cursor2.active { display: block; }

#dwellRing2 {
  position: fixed; z-index: 9998;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  opacity: 0; /* il feedback del dwell ora vive sul bottone, non su un anello fluttuante */
}
#dwellRing2.active { display: block; }

.hp2-edge {
  position: fixed; z-index: 9990;
  pointer-events: none;
  transition: background .2s;
}
.hp2-edge-left, .hp2-edge-right  { top: 0; bottom: 0; width: 12%; }
.hp2-edge-top, .hp2-edge-bottom  { left: 0; right: 0; height: 10%; }
.hp2-edge-left   { left: 0; }
.hp2-edge-right  { right: 0; }
.hp2-edge-top    { top: 0; }
.hp2-edge-bottom { bottom: 0; }
.hp2-edge-left.triggered   { background: linear-gradient(90deg,  rgba(99,102,241,.22), transparent); }
.hp2-edge-right.triggered  { background: linear-gradient(-90deg, rgba(99,102,241,.22), transparent); }
.hp2-edge-top.triggered    { background: linear-gradient(180deg, rgba(99,102,241,.22), transparent); }
.hp2-edge-bottom.triggered { background: linear-gradient(0deg,   rgba(99,102,241,.22), transparent); }

.hp2-swipe-arrow {
  position: fixed; top: 50%; z-index: 9991;
  font-size: 1.8rem; color: rgba(99,102,241,.6);
  pointer-events: none; opacity: 0;
  transition: opacity .2s;
  transform: translateY(-50%);
}
.hp2-swipe-arrow.left  { left: 8px; }
.hp2-swipe-arrow.right { right: 8px; }
.hp2-swipe-arrow.show  { opacity: 1; }

.hp2-toggle {
  position: fixed; bottom: 100px; right: 12px; z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #4f6bff, #4fd6e8);
  border: 2px solid rgba(255,255,255,.4);
  color: white; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(79,214,232,.35);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hp2-toggle:active { transform: scale(.92); }
.hp2-toggle.on {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 4px 16px rgba(16,185,129,.35);
}

#hp2Video {
  position: fixed; top: -9999px; left: -9999px;
  width: 320px; height: 240px;
  opacity: 0; pointer-events: none;
}