/* Floating scrollbar (see js/scrollbar.js). Desktop pointers only: touch
   devices keep their own overlay scrollbars, which already take no width.
   The native bar is hidden so it stops taking ~15px out of the page width. */
@media (hover: hover) and (pointer: fine) {
  html {
    scrollbar-width: none;
  }
  html::-webkit-scrollbar {
    display: none;
  }
}

.floating-scrollbar {
  position: fixed;
  top: 6px;
  right: 0;
  bottom: 6px;
  /* Exactly the 10px margin that frames the home's welcome video: the thumb
     is centred inside it, so it has the same gap to the page edge as to the
     content (3px each side at rest, 2px on hover/drag). */
  width: 10px;
  /* Above the nav (1000) and the contact-form backdrop (900) */
  z-index: 1100;
  /* The track itself never intercepts clicks; only the visible thumb does */
  pointer-events: none;
}

.floating-scrollbar.is-needless {
  display: none;
}

/* The thumb element is the click target: 14px wide (the 10px margin plus 4px
   over the content), much easier to grab than the bar you see. The visible
   bar is its ::after, 4px wide and centred in the 10px margin. */
.floating-scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  min-height: 48px;
  pointer-events: none;
  will-change: transform;
}

.floating-scrollbar-thumb::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  width: 4px;
  border-radius: 999px;
  background-color: var(--color-text);
  opacity: 0;
  /* Theme colour needs its own transition: there is no global fallback
     (see the README finding on theme transitions). */
  transition: opacity 0.25s ease, width 0.15s ease, right 0.15s ease,
    background-color 0.3s ease;
}

.floating-scrollbar.is-visible .floating-scrollbar-thumb {
  pointer-events: auto;
  cursor: default;
}

.floating-scrollbar.is-visible .floating-scrollbar-thumb::after {
  opacity: 0.4;
}

/* Grows to 6px, still centred in the 10px margin (2px each side) */
.floating-scrollbar.is-visible .floating-scrollbar-thumb:hover::after,
.floating-scrollbar.is-dragging .floating-scrollbar-thumb::after {
  opacity: 0.7;
  width: 6px;
  right: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .floating-scrollbar-thumb::after {
    transition: none;
  }
}