.sp-scroll-container{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    width:100%;
    -webkit-overflow-scrolling:touch;
}

.sp-scroll-container::-webkit-scrollbar{
    height:7px;
}

.sp-scroll-container::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

.sp-scroll-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:18px;
    background:linear-gradient(
        rgba(255,255,255,.65),
        rgba(255,255,255,0)
    );
    backdrop-filter:blur(2px);
    z-index:100;
    transition:.3s;
    pointer-events:none;
}

.sp-scroll-hide{
    opacity:0;
}

.sp-scroll-card{
    background:#fff;
    border-radius:18px;
    padding:16px 22px;
    box-shadow:0 10px 35px rgba(0,0,0,.18);
    text-align:center;
}

.sp-scroll-hand{
    font-size:34px;
    animation:spHand 1.6s infinite;
}

.sp-scroll-line{
    width:90px;
    height:4px;
    background:#dbeafe;
    margin:8px auto 14px;
    border-radius:30px;
    position:relative;
}

.sp-scroll-line::after{
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    background:#2563eb;
    position:absolute;
    top:-7px;
    left:0;
    animation:spDot 1.6s infinite;
}

.sp-scroll-title{
    font-weight:600;
    color:#1f2937;
}

.sp-scroll-subtitle{
    margin-top:6px;
    color:#6b7280;
    font-size:13px;
}

@keyframes spHand{
    0%{
        transform:translateX(-18px);
    }

    50%{
        transform:translateX(18px);
    }

    100%{
        transform:translateX(-18px);
    }
}

@keyframes spDot{
    0%{
        left:0;
    }

    50%{
        left:72px;
    }

    100%{
        left:0;
    }

}

.sp-scroll-fade::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:32px;
    height:100%;
    pointer-events:none;

    background:linear-gradient(
        to left,
        rgba(255,255,255,.95),
        rgba(255,255,255,.4),
        transparent
    );

    backdrop-filter:blur(4px);
}