/* ============================================================
   PLAKAT — "Wet Ink" scrollbar (kp-scrollbar)
   A 1px void hairline on the right edge; the scrolled portion
   is a hand-inked Klein stroke whose head is a bead of wet ink.
   Fresh stroke glitches in the site's slice language; on idle a
   single drip forms and falls. Desktop flourish only — phones
   keep their OS scrollbar. Transform/opacity writes only.
   z-order: above content + crail (35) + header (40), BELOW the
   scrim (55), cart drawer (60), room stage (70), mnav (250).
   ============================================================ */

/* hide the native bar only while the rail is actually running,
   and only on the desktop tier the rail serves */
@media (min-width: 721px) and (pointer: fine) {
  html.kpsb-on { scrollbar-width: none; }
  html.kpsb-on::-webkit-scrollbar { display: none; width: 0; }
}

.kpsb {
  position: fixed;
  top: 84px;
  bottom: 64px;
  right: 0;
  width: 12px;                 /* clear of the crail (right 12–26px) */
  z-index: 50;
  pointer-events: auto;
  cursor: default;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  transition: opacity 0.5s var(--ease-out, ease-out);
}
.kpsb.is-idle { opacity: 0.35; }
.kpsb:hover, .kpsb.is-drag { opacity: 1; }
.kpsb.is-hidden { display: none; }

/* dry hairline — the un-inked track */
.kpsb::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: 5px;
  width: 1px;
  background: var(--line, rgba(250, 250, 247, 0.14));
}

/* ---------- the wet stroke ----------
   full-height wobbly SVG stroke inside an overflow:hidden well;
   JS slides it down so its lower end rides at the bead. The ink
   texture drifting with scroll reads as the stroke being laid. */
.kpsb__well {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.kpsb__ink {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: translate3d(0, var(--kpsb-iy, -101%), 0);
  will-change: transform;
}
.kpsb__ink svg { display: block; }
/* drag: the stroke doubles — scale the paths, not the carriage */
.kpsb__ink .kpsb__stroke { transition: stroke-width 0.15s var(--ease-out, ease-out); }
.kpsb.is-drag .kpsb__stroke--body { stroke-width: 5; }
.kpsb.is-drag .kpsb__stroke--core { stroke-width: 2.2; }

/* ---------- the bead (thumb) ---------- */
.kpsb__carriage {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  transform: translate3d(0, var(--kpsb-by, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.kpsb__bead {
  position: absolute;
  left: 50%; top: 0;
  width: 9px; height: 13px;
  margin: -6.5px 0 0 -4.5px;
  border-radius: 46% 54% 48% 52% / 58% 56% 44% 42%;   /* hand-formed, not a circle */
  background: radial-gradient(120% 120% at 38% 30%,
              var(--blue-bright, #4B6BE8) 0%,
              var(--blue, #1D3FBF) 34%,
              #002FA7 72%,
              #001E6E 100%);
  box-shadow: 0 0 10px rgba(29, 63, 191, 0.55), 0 0 2px rgba(75, 107, 232, 0.8);
  transform: scale(var(--kpsb-sx, 1), var(--kpsb-sy, 1));
  will-change: transform;
}
.kpsb.is-drag .kpsb__bead { box-shadow: 0 0 16px rgba(29, 63, 191, 0.85), 0 0 3px rgba(75, 107, 232, 1); }

/* ---------- glitch slices ----------
   quotes the field posters' burst language: short horizontal
   offset slices, INSTANT show/hide (no opacity transition — the
   snap is the effect), living just behind the bead in the fresh
   ink. JS flips .is-glitch for ~120–220ms with poster-ish gaps. */
.kpsb__slice {
  position: absolute;
  left: 50%;
  width: 11px; height: 2px;
  margin-left: -5.5px;
  opacity: 0;
  pointer-events: none;
}
.kpsb__slice--a {
  top: -14px;
  background: linear-gradient(90deg, #002FA7 0%, var(--blue-bright, #4B6BE8) 60%, rgba(250, 250, 247, 0.85) 100%);
  transform: translateX(var(--kpsb-g1, 2px));
}
.kpsb__slice--b {
  top: -24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 247, 0.7) 0%, #002FA7 100%);
  transform: translateX(var(--kpsb-g2, -2px));
}
.kpsb.is-glitch .kpsb__slice { opacity: 1; }
.kpsb.is-drag .kpsb__slice { height: 3px; }
.kpsb.is-drag .kpsb__slice--b { height: 2px; }

/* ---------- idle drip ----------
   barely there: a droplet detaches, falls a few px, fades. */
.kpsb__drip {
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 5px;
  margin-left: -1.5px;
  border-radius: 50% 50% 55% 45% / 38% 38% 62% 62%;
  background: #002FA7;
  opacity: 0;
  pointer-events: none;
}
.kpsb.is-drip .kpsb__drip {
  animation: kpsbDrip 1.6s var(--ease-in, ease-in) both;
}
@keyframes kpsbDrip {
  0%   { opacity: 0;    transform: translateY(0) scaleY(0.6); }
  22%  { opacity: 0.85; transform: translateY(2px) scaleY(1.15); }
  70%  { opacity: 0.4;  transform: translateY(18px) scaleY(1.3); }
  100% { opacity: 0;    transform: translateY(26px) scaleY(1.35); }
}

/* ---------- reduced motion: static, still functional ---------- */
@media (prefers-reduced-motion: reduce) {
  .kpsb { transition: none; }
  .kpsb__ink .kpsb__stroke { transition: none; }
  .kpsb__slice { display: none; }
  .kpsb.is-drip .kpsb__drip { animation: none; }
}

/* ---------- mobile / coarse pointers: no rail, native bar ---------- */
@media (max-width: 720px), (pointer: coarse) {
  .kpsb { display: none; }
}