/* Scrollbar VHS — coerente con sfondo nero, senza logo */

:root {
  --scrollbar-size: 5px;
  --scrollbar-track: rgba(255, 255, 255, 0.035);
  --scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
  --scrollbar-edge: rgba(255, 255, 255, 0.07);
  --scrollbar-red: rgba(255, 72, 72, 0.45);
  --scrollbar-cyan: rgba(72, 196, 255, 0.45);
}

html {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html.page--join,
body.page--join {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit — Chrome, Edge, Safari */
html::-webkit-scrollbar,
body.page--join::-webkit-scrollbar {
  width: var(--scrollbar-size);
}

html::-webkit-scrollbar-track,
body.page--join::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-left: 1px solid var(--scrollbar-edge);
}

html::-webkit-scrollbar-thumb,
body.page--join::-webkit-scrollbar-thumb {
  border-radius: 0;
  border-left: 1px solid var(--scrollbar-red);
  border-right: 1px solid var(--scrollbar-cyan);
  background-color: var(--scrollbar-thumb);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.28) 2px,
    rgba(0, 0, 0, 0.28) 4px
  );
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.06);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

html::-webkit-scrollbar-thumb:hover,
body.page--join::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
  border-left-color: rgba(255, 72, 72, 0.7);
  border-right-color: rgba(72, 196, 255, 0.7);
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.1),
    -1px 0 4px rgba(255, 72, 72, 0.15),
    1px 0 4px rgba(72, 196, 255, 0.15);
}

html::-webkit-scrollbar-corner,
body.page--join::-webkit-scrollbar-corner {
  background: #000;
}

@media (max-width: 480px) {
  :root {
    --scrollbar-size: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html::-webkit-scrollbar-thumb,
  body.page--join::-webkit-scrollbar-thumb {
    transition: none;
  }
}