/* ==========================================================================
   Custom Scrollbar — replaces native scrollbar to prevent layout shift
   during Barba.js transitions (overflow:hidden removes native scrollbar
   and shifts content). Position: fixed overlay = zero layout impact.
   ========================================================================== */

html,
html.lenis {
    scrollbar-width: none;
}

html::-webkit-scrollbar,
html.lenis::-webkit-scrollbar {
    display: none;
}

.c2s-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100vh;
    height: 100dvh;
    z-index: 5000;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out-expo);
}

.c2s-scrollbar.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.c2s-scrollbar__track {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.c2s-scrollbar__thumb {
    position: absolute;
    top: 0;
    right: 2px;
    width: 3px;
    border-radius: 1.5px;
    background: var(--black);
    opacity: 0.2;
    min-height: 40px;
    will-change: top;
    transition: opacity var(--duration-fast) ease,
                width var(--duration-fast) ease,
                right var(--duration-fast) ease;
}

.c2s-scrollbar:hover .c2s-scrollbar__thumb,
.c2s-scrollbar.is-dragging .c2s-scrollbar__thumb {
    width: 5px;
    right: 2px;
    opacity: 0.4;
    border-radius: 2.5px;
}