/* ─── Auto-hiding scrollbar (fixed right side) ─────────── */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

.site-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 14px;
  height: 100vh;
  pointer-events: auto;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-scrollbar.visible,
.site-scrollbar.dragging,
.site-scrollbar:hover { opacity: 1; }
.site-scrollbar-thumb {
  position: absolute;
  right: 4px;
  width: 6px;
  border-radius: 6px;
  background: var(--cyan, #00f0e0);
  opacity: 0.55;
  pointer-events: auto;
  cursor: grab;
  transition: width 0.2s ease, opacity 0.2s ease;
}
.site-scrollbar-thumb:hover { width: 10px; opacity: 0.75; }
.site-scrollbar.dragging .site-scrollbar-thumb { cursor: grabbing; width: 10px; opacity: 0.85; }

/* ─── Custom cursor — bigger, softer ───────────────────── */
@media (hover: hover) {
  body { cursor: none; }
  body * { cursor: none !important; }
}

.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(125, 220, 240, 0.22);
  border: 1px solid rgba(125, 220, 240, 0.45);
  box-shadow: 0 0 18px rgba(125, 220, 240, 0.18);
  pointer-events: none;
  z-index: 2147483647;
  transform: translate(-50%, -50%);
  transition:
    width 0.18s ease,
    height 0.18s ease,
    background 0.18s ease,
    opacity 0.25s ease;
  will-change: transform;
}

.site-cursor-ripple {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(125, 220, 240, 0.6);
  pointer-events: none;
  z-index: 2147483646;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.site-cursor-ripple.fire {
  animation: site-cursor-ripple 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes site-cursor-ripple {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

@media (hover: none), (max-width: 800px) {
  body, body * { cursor: auto !important; }
  .site-cursor, .site-cursor-ripple, .site-scrollbar { display: none; }
}