:root {
  --scroll-thumb-color: #0084ff; /* azul principal */
  --scroll-thumb-color-hover: #00b3ff;
  --scroll-thumb-color-active: #001aff;
  --scroll-track-color: transparent;
  --scroll-width: 7px;
  --scroll-radius: 10px;
}

html {
  scroll-behavior: smooth;
  background: #000;
  overflow-y: overlay;
  overflow-x: overlay;
}

/* ===== CHROMIUM – Scrollbar fina + azul sobre fondo negro ===== */
::-webkit-scrollbar {
  width: var(--scroll-width);
  height: var(--scroll-width);
  background: var(--scroll-track-color);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-resizer {
  background: var(--scroll-track-color) !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: var(--scroll-radius);
  border: 2.5px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-color-hover);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--scroll-thumb-color-active);
}

/* ===== FIREFOX – también overlay y mismo estilo ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-color) transparent;
}

/* ===== FONDO NEGRO TOTAL (por si alguna página no lo tiene) ===== */
html,
body {
  background: #000 !important;
  margin: 0;
  padding: 0;
}

/* Animación de parpadeo */
@keyframes blink-irregular {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  35% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.3;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.animate-blink {
  animation: blink-irregular 2s infinite;
}