/* ============================================================
   KZ SCROLL — a barra de rolagem do site, no lugar da do navegador.

   A do navegador não dá para desenhar: no Firefox `scrollbar-color`
   aceita duas cores e nada mais, no Chrome a `::-webkit-scrollbar`
   ocupa largura de verdade — abrir um painel com rolagem estreitava o
   conteúdo em 9px e o layout pulava — e em nenhum dos dois ela some
   quando a pessoa para de rolar.

   Então: a nativa é escondida (`scrollbar-width:none`) e uma barra
   nossa é desenhada POR CIMA, fora do fluxo. Quem rola continua sendo
   o navegador — roda, dedo, teclado, `scrollTo` — e é por isso que
   nada aqui intercepta o scroll: o JS só lê `scrollTop` e pinta.

   Uso: `<div class="kz-scroll" data-kz-scroll>` (ver kz-scroll.js).
   ============================================================ */

.kz-scroll{
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* Edge antigo */
}
.kz-scroll::-webkit-scrollbar{ width:0; height:0; display:none; }

/* A barra mora no PAI do elemento que rola, não dentro dele: um filho
   absoluto de uma caixa com rolagem sobe junto com o conteúdo, e a barra
   sumiria da tela na primeira volta da roda. */
.kz-scrollbar{
  position:absolute;
  right:0;
  width:12px;
  z-index:35;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  touch-action:none;
}
.kz-scrollbar[hidden]{ display:none; }
/* Aparece rolando, aparece com o mouse dentro do painel, e fica enquanto
   se arrasta o polegar — soltar no meio do arrasto seria perder o alvo. */
.kz-scrollbar.is-shown,
.kz-scrollbar.is-dragging{ opacity:1; }

.kz-scrollbar__thumb{
  position:absolute;
  right:3px;
  width:6px;
  min-height:28px;
  border-radius:var(--r-full);
  background:var(--cream-4);
  transition:background .15s ease, width .12s ease, right .12s ease;
}
.kz-scrollbar:hover .kz-scrollbar__thumb,
.kz-scrollbar.is-dragging .kz-scrollbar__thumb{
  background:var(--text-faint-2);
  width:8px;
  right:2px;
}
:root[data-theme="dark"] .kz-scrollbar__thumb{ background:rgba(255,255,255,.18); }
:root[data-theme="dark"] .kz-scrollbar:hover .kz-scrollbar__thumb,
:root[data-theme="dark"] .kz-scrollbar.is-dragging .kz-scrollbar__thumb{ background:rgba(255,255,255,.34); }

/* Só ponteiro fino agarra o polegar. Num toque, 8px de largura é menor
   que o dedo: a barra vira indicador — aparece enquanto rola e não
   recebe evento nenhum, senão roubaria o arrasto da própria página. */
@media (hover:hover) and (pointer:fine){
  .kz-scrollbar{ pointer-events:auto; }
}

@media (prefers-reduced-motion:reduce){
  .kz-scrollbar, .kz-scrollbar__thumb{ transition:none; }
}