/* === Scroll de araña personalizado === */

/* Oculta la barra nativa de #s4-workspace pero mantiene el scroll */
#s4-workspace {
  -ms-overflow-style: none; /* IE10+ */
  scrollbar-width: none;    /* Firefox */
}
#s4-workspace::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;     /* Chrome/Edge/Opera */
}

/* Animación balanceo de la araña */
@keyframes spider-sway {
  0%   { transform: translateY(0) rotate(-2deg); }
  50%  { transform: translateY(0) rotate(2deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

/* Track del scroll (contenedor fijo) */
.spider-track {
  position: fixed;
  width: 20px;          /* ancho clickeable */
  z-index: 99999999999999999999;
  pointer-events: auto; /* necesario para drag */
}
.spider{
position: "absolute";
  left: "1px"; 
  top: "0";
  fontSize: "25px";
  transformOrigin: "50% -2px";
  animation: "spider-sway 3.2s ease-in-out infinite";
  filter: "drop-shadow(0 1px 1px rgba(0,0,0,.35))";
  pointerEvents: "none";
  z-index: 99999999999 !important;
}
/* Riel de fondo (opcional) */
.spider-rail {
  position: absolute;
  top: 0;
  left: 9px;
  width: 2px;
  height: 100%;
  background: transparent; /* cámbialo a rgba(0,0,0,.12) si lo quieres visible */
  pointer-events: none;
  z-index: 99999999999;
}

/* Hilo que crece */
.spider-web {
position:absolute;
  background: rgba(0,0,0,.9);
  z-index: 2147483647;
  left:50%;
  top:0;
  width:2px;
  
}

/* Área invisible de drag (equivalente al thumb) */
.spider-handle {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;          /* recalculado por JS */
  top: 0;
  cursor: grab;
  background: transparent;
  touch-action: none;
}

/* Araña */
.spider-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  transform-origin: 50% -8px;
  animation: spider-sway 3.2s ease-in-out infinite;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  pointer-events: none;
  z-index: 2147483647;
}