/* Kisaka & Company — The site's own scroll rail (js/kisaka-scrollbar.js).

   One thin thumb at the right edge, in the manner of a macOS overlay bar:
   shows while the page moves, fades once it rests (the edge still answers
   the pointer, so a hover brings it back), widens under the pointer, and
   can be grabbed. The native bar is hidden only once the script has
   built this one, so a page without JavaScript keeps the browser's.

   Tone follows the ground behind the thumb (data-kisaka-nav-background, or
   the painted colour where a page has no such marks): ink over light bands,
   paper over dark ones. On pages that move in screens (Contact, Careers)
   hairline marks show where each screen parks, and a faint band covers each
   stretch where the page holds while its cards move (js/kisaka-scrollbar.js). */

html.kisaka-scrollbar-on
   {
      scrollbar-width: none;
      -ms-overflow-style: none;
   }

html.kisaka-scrollbar-on::-webkit-scrollbar
   {
      display: none;
      width: 0;
      height: 0;
   }

/* The thumb is a drag handle while held: no text selection under it. */
html.kisaka-scrollbar-dragging,
html.kisaka-scrollbar-dragging body
   {
      -webkit-user-select: none;
      user-select: none;
      cursor: default;
   }

.kisaka-scrollbar
   {
      --kisaka-scrollbar-ink: 20, 8, 9;
      --kisaka-scrollbar-thumb-alpha: 0.42;
      --kisaka-scrollbar-thumb-alpha-hot: 0.68;
      --kisaka-scrollbar-line-alpha: 0.08;
      --kisaka-scrollbar-mark-alpha: 0.28;
      --kisaka-scrollbar-band-alpha: 0.22;
      /* 4px at rest, 7px under the pointer: the bar is drawn at 7px and scaled. */
      --kisaka-scrollbar-w-hot: 7px;
      --kisaka-scrollbar-rest-scale: 0.5714;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 99990;
      width: 14px;
      padding: 6px 0;
      box-sizing: border-box;
      opacity: 0;
      transition: opacity 480ms var(--kisaka-ease-out, ease-out);
      cursor: default;
      touch-action: none;
   }

.kisaka-scrollbar.is-visible
   {
      opacity: 1;
      transition-duration: 160ms;
   }

.kisaka-scrollbar.is-unneeded
   {
      display: none;
   }

/* Dark ground under the thumb: the bar goes to paper. */
.kisaka-scrollbar[data-tone="dark"]
   {
      --kisaka-scrollbar-ink: 255, 255, 255;
      --kisaka-scrollbar-thumb-alpha: 0.46;
      --kisaka-scrollbar-thumb-alpha-hot: 0.82;
      --kisaka-scrollbar-line-alpha: 0.12;
      --kisaka-scrollbar-mark-alpha: 0.34;
      --kisaka-scrollbar-band-alpha: 0.26;
   }

.kisaka-scrollbar__track
   {
      position: relative;
      height: 100%;
   }

/* A hairline the thumb runs along, only while the pointer is on the rail. */
.kisaka-scrollbar__track::before
   {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 6px;
      width: 1px;
      border-radius: 1px;
      background: rgba(var(--kisaka-scrollbar-ink), var(--kisaka-scrollbar-line-alpha));
      opacity: 0;
      transition: opacity 160ms var(--kisaka-ease-out, ease-out);
   }

.kisaka-scrollbar.is-hot .kisaka-scrollbar__track::before
   {
      opacity: 1;
   }

/* The thumb box only positions (translateY from the script); the bar itself
   is the pseudo-element, drawn at full width and scaled down at rest, so the
   grow under the pointer never touches layout. */
.kisaka-scrollbar__thumb
   {
      position: absolute;
      top: 0;
      right: calc(6px - var(--kisaka-scrollbar-w-hot) / 2);
      width: var(--kisaka-scrollbar-w-hot);
      min-height: 40px;
      transform: translate(0, 0);
      will-change: transform;
   }

.kisaka-scrollbar__thumb::before
   {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(var(--kisaka-scrollbar-ink), var(--kisaka-scrollbar-thumb-alpha));
      transform: scaleX(var(--kisaka-scrollbar-rest-scale));
      transform-origin: center;
      transition: transform 160ms var(--kisaka-ease-out, ease-out), background-color 160ms ease;
   }

.kisaka-scrollbar.is-hot .kisaka-scrollbar__thumb::before
   {
      transform: scaleX(1);
      background: rgba(var(--kisaka-scrollbar-ink), var(--kisaka-scrollbar-thumb-alpha-hot));
   }

/* A stretch where the page holds still while what is on screen moves
   (Sustainability's cards, the testimonials, the roster): the thumb walks
   this band instead of skipping the screen. */
.kisaka-scrollbar__band
   {
      position: absolute;
      top: 0;
      right: 6px;
      width: 1px;
      height: 1px;
      border-radius: 1px;
      background: rgba(var(--kisaka-scrollbar-ink), var(--kisaka-scrollbar-band-alpha));
      transform: translate(0, 0);
      pointer-events: none;
   }

/* Let go after a drag: the thumb eases from under the pointer onto the
   position the page has actually reached while its screens catch up. */
.kisaka-scrollbar.is-settling .kisaka-scrollbar__thumb
   {
      transition: transform 900ms var(--kisaka-ease-out, ease-out);
   }

/* Where a screen parks, on pages that move in screens. */
.kisaka-scrollbar__mark
   {
      position: absolute;
      top: 0;
      right: 2px;
      width: 9px;
      height: 1px;
      background: rgba(var(--kisaka-scrollbar-ink), var(--kisaka-scrollbar-mark-alpha));
      transform: translate(0, 0);
      pointer-events: none;
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-scrollbar,
      .kisaka-scrollbar.is-settling .kisaka-scrollbar__thumb,
      .kisaka-scrollbar__thumb::before,
      .kisaka-scrollbar__track::before
         {
            transition-duration: 1ms;
         }
   }

@media (prefers-contrast: more)
   {
      .kisaka-scrollbar
         {
            --kisaka-scrollbar-thumb-alpha: 0.7;
            --kisaka-scrollbar-thumb-alpha-hot: 0.95;
         }
   }