/* ============================================================
   Scrollbar (src/components/ScrollBar.astro, src/scripts/site/scrollbar.js)
   ------------------------------------------------------------
   Taken from the ADDD website. A 176px track near the right edge (centred
   between the frame's right line and the screen edge), in the
   middle of the screen, and a 48px thumb that runs its length (128px)
   as the page goes from top to foot; squared. Sizes are ADDD's: px at
   a 1440px-wide window (834px on tablets), growing and shrinking with
   the window from there (--scrollbar-unit, ADDD's scaling unit, which
   is 16px at those widths). Both white, blended by
   exclusion, so over a light background the thumb reads near black and
   the track a light grey, and over a dark one the other way round,
   with nothing to switch per section.

   Over the nav (1500), under the modals (9999), the page loader and
   the lightbox. Hidden while the page is still and nobody is on it
   (.is--shown, set while it scrolls, is hovered or dragged), and below
   768px, where the page scrolls by touch.
   ============================================================ */

/* the browser's own page scrollbar hidden (it takes no width, so
   nothing moves sideways); this one stands in for it. Only the page's:
   scrolling boxes inside it keep theirs. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

.scrollbar {
  /* 16px at a 1440px window, in proportion between 992 and 1920px */
  --scrollbar-unit: calc(clamp(992px, 100vw, 1920px) / 90);
  --bar-h: calc(11 * var(--scrollbar-unit));
  --thumb-h: calc(3 * var(--scrollbar-unit));
  position: fixed;
  /* centred in the gap between the frame's right line and the screen edge: the side gutter
     (--gutter, atn-system.css), plus the margin beside the frame once the window is wider
     than the frame's 2300px */
  right: calc((max(0px, (100vw - 2300px) / 2) + var(--gutter)) / 2);
  top: 50%;
  z-index: 1600;
  width: 4px;
  height: var(--bar-h);
  translate: 50% -50%;
  mix-blend-mode: exclusion;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.scrollbar.is--shown { opacity: 1; }
/* a wider reach for the pointer than the bar's 4px */
.scrollbar::before {
  content: "";
  position: absolute;
  inset: 0 calc(-0.625 * var(--scrollbar-unit));
}
.scrollbar__track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
}
.scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--thumb-h);
  background: #fff;
  will-change: transform;
  cursor: grab;
  transition: scale 0.3s ease-out;
}
/* wider as the pointer comes to the bar, from its middle */
.scrollbar:hover .scrollbar__thumb,
.scrollbar.is--dragging .scrollbar__thumb { scale: 1.8 1; }
.scrollbar.is--dragging,
.scrollbar.is--dragging .scrollbar__thumb { cursor: grabbing; }

/* tablet: 16px at an 834px window, in proportion between 768 and 991px */
@media screen and (max-width: 991px) {
  .scrollbar { --scrollbar-unit: calc(clamp(768px, 100vw, 991px) / 52.125); }
}

@media screen and (max-width: 767px) {
  .scrollbar { display: none; }
}