/*
 * Underskin — drag-scroll marquee
 *
 * Overrides for elements marked with `.js-drag-scroll`. Turns the
 * container into a horizontally-scrollable strip and disables the CSS
 * @keyframes translation on its track (JS drives scrollLeft instead).
 *
 * Scrollbars are hidden but scroll is fully functional via touch,
 * mouse-drag, wheel, and trackpad.
 */

.js-drag-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    /* Vertical panning still allowed so page scroll isn't hijacked. */
    touch-action: pan-y;
    cursor: grab;
}

.js-drag-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.js-drag-scroll.is-drag-scroll-active {
    cursor: grab;
}

.js-drag-scroll.is-drag-scroll-dragging {
    cursor: grabbing;
    user-select: none;
}

.js-drag-scroll.is-drag-scroll-dragging * {
    pointer-events: none;
}

/* Kill CSS keyframe animations on the track — JS owns motion now. */
.js-drag-scroll.is-drag-scroll-active .home-portfolio-marquee__track,
.js-drag-scroll.is-drag-scroll-active .moments-marquee__track,
.js-drag-scroll.is-drag-scroll-active .reviews-marquee__track,
.js-drag-scroll.is-drag-scroll-active > [data-drag-track] {
    animation: none !important;
    transform: none !important;
    will-change: auto;
}