/* ----------- BARRA ----------- */
.scrollium-bar {
  position: fixed; top: 0; right: 0; width: 48px; height: 100vh;
  z-index: 30000; pointer-events: auto; overflow: visible;
  background: none; isolation: isolate;
}

/* ----------- TICKS ----------- */
.scrollium-tick {
  position: absolute;
  right: 0;
  height: 1.7px;
  background: #b6faff;
  opacity: .32;
  border-radius: 1.2px;
  pointer-events: none;
  transition: transform .07s cubic-bezier(.61,0,.43,1), opacity .09s cubic-bezier(.61,0,.43,1);
  transform-origin: right center;
}
/* Un punto más finas que antes (11/19/27): con el tope de alcance de 40 px que
   impide que se metan en las cifras, partir de menos ancho deja que la lupa se
   siga notando en las rayas grandes (2,5x y 1,8x en vez de quedarse clavadas). */
.scrollium-tick.minor { width: 10px }
.scrollium-tick.major { width: 16px }
.scrollium-tick.main  { width: 22px; background: #3fffa7; opacity: .6; box-shadow: 0 0 8px #29f8b777; }
.scrollium-tick.main.active {
  background: #fff; box-shadow: 0 0 18px #3fffa7cc, 0 0 2px #fff; opacity: 1;
}
.scrollium-tick.c-green { background: #00ffd0!important; }
.scrollium-tick.c-blue  { background: #19b6ff!important; }

.scrollium-bar:not(.active) .scrollium-tick       { right: 0; opacity: .13 }
.scrollium-bar:not(.active) .scrollium-tick.main  { right: 0; opacity: .18 }
.scrollium-bar.active .scrollium-tick,
.scrollium-bar.active .scrollium-tick.main        { right: 0; opacity: .56 }
.scrollium-bar.active .scrollium-tick.main        { right: 0; opacity: .72 }


/* ----------- NÚMEROS y LABELS ----------- */
.scrollium-num,
.scrollium-label {
  position: fixed; pointer-events: none; line-height: 1;
  /* Añadido: transición de transform */
  transition:
    transform .28s cubic-bezier(.68,0,.32,1),
    color .11s cubic-bezier(.61,0,.43,1),
    opacity .13s cubic-bezier(.61,0,.43,1);
  text-shadow: 0 2px 10px #000a;
}
.scrollium-num { z-index: 1 }
.scrollium-label { z-index: 2 }

.scrollium-num, .scrollium-label { color: #00ffd0; }

/* Cada cifra y cada etiqueta se colorean por lo que tienen DETRÁS, no por un
   veredicto único para toda la regla (ver detectWhiteZone). La regla cruza
   toda la pantalla: por arriba puede haber fondo oscuro y por el medio la piel
   clara de la pareja. */
.scrollium-num.claro,
.scrollium-label.claro { color: #19b6ff; }

.scrollium-num {
  /* Cifras tabulares y peso 600: antes iban en 900 con un halo de 10 px de su
     propio color, que a este tamaño emborrona el dígito en vez de destacarlo.
     Ahora la legibilidad la da el contorno oscuro apretado y el brillo es sólo
     un apunte. */
  font: 600 12px 'IBM Plex Mono',monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-shadow:
    0 0 1px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.92),
    0 0 6px rgba(0,0,0,.8);
  opacity: .35; padding: 5px 1px; border-radius: 4px;
  transform-origin: left left;
  transition:
    transform .28s cubic-bezier(.68,0,.32,1),
    color .11s cubic-bezier(.61,0,.43,1),
    opacity .32s cubic-bezier(.77,0,.18,1);
  /* NO transform aquí: lo maneja el JS */
}
.scrollium-bar.active .scrollium-num { opacity: 1 }

/* Las etiquetas se escriben EN VERTICAL, pegadas a la barra. Antes eran texto
   horizontal plantado a 262 px del borde derecho: en una ventana de 540 se
   comían media pantalla y tapaban el dibujo. En vertical ocupan 16 px de
   ancho, hacen columna con la regla y no invaden nada. Caja en versalitas
   espaciadas, que es lo que le da aire y aspecto de instrumento. */
.scrollium-label {
  opacity: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 700 11px 'IBM Plex Mono',monospace;
  text-transform: uppercase;
  letter-spacing: .26em;
  padding: 10px 2px;
  white-space: nowrap;
  transform-origin: center center;
  /* Sin chapa ni caja detrás: la legibilidad se resuelve con el contorno de
     la propia letra, no metiéndola en un rectángulo. */
  text-shadow:
    0 0 2px rgba(0,0,0,.98), 0 0 4px rgba(0,0,0,.9),
    0 1px 3px rgba(0,0,0,.85), 0 0 12px currentColor;
  /* NO transform aquí */
}
.scrollium-label.visible { opacity: 1 }
.scrollium-label-text {
  display: inline-block; transform: translateY(-14px); opacity: 0;
  transition: transform .38s cubic-bezier(.77,0,.18,1), opacity .36s;
}
.scrollium-label-text.wipe-in { transform: translateY(0); opacity: 1 }

/* ----------- EFECTOS HOVER EXTRA ----------- */
.scrollium-bar.active .scrollium-tick.c-green {
  background: #00ffd0!important; box-shadow: 0 0 6px #00ffc888;
}
.scrollium-bar.active .scrollium-tick.c-blue {
  background: #19b6ff!important; box-shadow: 0 0 8px #19b6ff99;
}

/* El marcador era una bola blanca con un borde duro de 3 px. Ahora es un
   halo que se apaga hacia fuera, con un anillo fino por dentro y un latido
   lento: se lee como una lente sobre la regla en vez de como una pelota. */
.scrollium-bubble {
  position: fixed;
  width: 144px; height: 144px;
  margin-left: -72px; margin-top: -72px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(0,255,208,.55);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,255,208,.00) 0%,
      rgba(0,255,208,.00) 52%,
      rgba(0,255,208,.22) 63%,
      rgba(0,255,208,.05) 76%,
      rgba(0,0,0,0)       88%),
    radial-gradient(circle at 38% 32%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.08) 42%,
      transparent 72%);
  box-shadow:
    0 0 26px rgba(0,255,208,.32),
    inset 0 0 34px rgba(0,255,208,.16);
  filter: blur(.4px);
  transition: opacity .18s cubic-bezier(.61,0,.43,1);
  mix-blend-mode: screen;
  animation: scrollium-latido 2.8s ease-in-out infinite;
  z-index: 10003;
}
@keyframes scrollium-latido {
  0%, 100% { box-shadow: 0 0 26px rgba(0,255,208,.32), inset 0 0 34px rgba(0,255,208,.16); }
  50%      { box-shadow: 0 0 40px rgba(0,255,208,.46), inset 0 0 44px rgba(0,255,208,.24); }
}

body.white-zone .scrollium-bubble { border-color: #19b6ff; }


.scrollium-num      { opacity: 0; }
.scrollium-num.show { opacity: 1; transition: opacity .22s cubic-bezier(.7,0,.18,1); }