/* ============================================================
   PURRHAUS — "Climbing Cat" bespoke scrollbar (kp-scrollbar)
   A cat-tree pole rail on the right edge; a sticker-style ink-line
   cat climbs it as you scroll. Desktop-only flourish: phones keep
   their native OS scrollbar. Transform/opacity only — no layout
   animation, no backdrop-filter (site perf laws).
   ============================================================ */

/* ---- desktop: hide the native bar, the rail replaces it ---- */
@media (min-width: 721px) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

.kp-scrollrail {
  position: fixed;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 46px;
  height: min(58vh, 520px);
  z-index: 120; /* above content/#tail(90), below header(300)/loader(300) + trays */
  opacity: 1;
  transition: opacity 0.6s var(--ease-out, ease);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.kp-scrollrail.is-idle { opacity: 0.35; }
.kp-scrollrail:hover { opacity: 1; }
.kp-scrollrail.is-hidden { display: none; }

/* mobile / coarse pointers: no rail, native scrollbar untouched */
@media (max-width: 720px), (pointer: coarse) {
  .kp-scrollrail { display: none !important; }
}

/* ---- the pole: soft sisal-wrapped cat-tree post ---- */
.kp-rail-track {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 14px;
  margin-left: -7px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      -32deg,
      rgba(34, 26, 20, 0.10) 0 3px,
      rgba(34, 26, 20, 0) 3px 8px
    ),
    var(--paper-3, #e0cca9);
  border: 2px solid rgba(34, 26, 20, 0.34);
  box-shadow: 2.5px 2.5px 0 rgba(34, 26, 20, 0.18);
}
/* pole caps — little platforms, like the top of a scratch post */
.kp-rail-track::before,
.kp-rail-track::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 7px;
  margin-left: -13px;
  border-radius: 999px;
  background: var(--ink, #221a14);
}
.kp-rail-track::before { top: -8px; }
.kp-rail-track::after { bottom: -8px; }

/* ---- paw-print section ticks (positioned by JS from real offsets) ---- */
.kp-rail-ticks { position: absolute; inset: 0; pointer-events: none; }
.kp-tick {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(var(--tr, 0deg));
  opacity: 0.55;
}
.kp-tick svg { width: 100%; height: 100%; display: block; }

/* ---- the cat (thumb) ---- */
.kp-rail-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 58px;
  height: 74px;
  margin-left: -29px;
  cursor: grab;
  will-change: transform;
}
.kp-scrollrail.is-drag .kp-rail-thumb { cursor: grabbing; }

/* orientation wrapper: flips head-down when climbing down */
.kp-cat {
  width: 100%;
  height: 100%;
  transition: transform 0.4s var(--ease-quint, ease);
  transform-origin: 50% 50%;
}
.kp-scrollrail.is-down .kp-cat { transform: rotate(180deg); }

/* squash/hop wrapper */
.kp-catwrap { width: 100%; height: 100%; transform-origin: 50% 60%; }
.kp-scrollrail.is-hop .kp-catwrap {
  animation: kpHop 0.5s var(--ease-paw, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes kpHop {
  0% { transform: scale(1); }
  35% { transform: translateX(-9px) scale(1.12, 0.9); }
  70% { transform: translateX(2px) scale(0.94, 1.08); }
  100% { transform: scale(1); }
}

.kp-catwrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* SVG part transforms use their own box, not the viewport */
.kp-tail, .kp-ear-l, .kp-ear-r, .kp-eye, .kp-body {
  transform-box: fill-box;
}
.kp-tail { transform-origin: 12% 88%; }
.kp-ear-l { transform-origin: 80% 95%; }
.kp-ear-r { transform-origin: 20% 95%; }
.kp-eye { transform-origin: center; }
.kp-body { transform-origin: 50% 40%; }

/* ---- idle: sit, slow tail sway + occasional blink ---- */
.kp-scrollrail.is-idle .kp-tail {
  animation: kpSway 6.5s ease-in-out infinite;
}
@keyframes kpSway {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(9deg); }
  62% { transform: rotate(-5deg); }
}
.kp-scrollrail.is-idle .kp-eye {
  animation: kpBlink 7s linear infinite;
}
@keyframes kpBlink {
  0%, 91.5%, 95%, 100% { transform: scaleY(1); }
  92.5%, 93.5% { transform: scaleY(0.08); }
}

/* ---- climbing: tail wiggles, amplitude driven by velocity (--wig) ---- */
.kp-scrollrail.is-up .kp-tail,
.kp-scrollrail.is-down .kp-tail {
  animation: kpWag 0.42s ease-in-out infinite;
}
@keyframes kpWag {
  0%, 100% { transform: rotate(calc(var(--wig, 8deg) * -1)); }
  50% { transform: rotate(var(--wig, 8deg)); }
}
.kp-scrollrail.is-up .kp-body,
.kp-scrollrail.is-down .kp-body {
  animation: kpClamber 0.42s ease-in-out infinite;
}
@keyframes kpClamber {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* ---- startled (drag): ears back, wide eyes, stiff tail ---- */
.kp-scrollrail.is-drag .kp-ear-l { transform: rotate(-30deg); }
.kp-scrollrail.is-drag .kp-ear-r { transform: rotate(30deg); }
.kp-scrollrail.is-drag .kp-eye { transform: scale(1.3); animation: none; }
.kp-scrollrail.is-drag .kp-tail {
  transform: rotate(26deg) scale(1.12);
  animation: none;
}
.kp-scrollrail.is-drag .kp-mouth-calm { opacity: 0; }
.kp-scrollrail.is-drag .kp-mouth-o { opacity: 1; }
.kp-mouth-o { opacity: 0; }
.kp-ear-l, .kp-ear-r, .kp-tail, .kp-eye { transition: transform 0.18s var(--ease-out, ease); }

/* ---- reduced motion: static, functional ---- */
@media (prefers-reduced-motion: reduce) {
  .kp-scrollrail *,
  .kp-scrollrail .kp-tail,
  .kp-scrollrail .kp-eye,
  .kp-scrollrail .kp-body {
    animation: none !important;
    transition: none !important;
  }
  .kp-scrollrail.is-down .kp-cat { transform: none; }
}