.scroll {
    width: 26px;
    height: 52px;
    position: relative;
    background: #03182e linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
    background-size: 100% 200%;
    border-radius: 100px;
    animation: colorSlide 10s linear infinite, nudgeMouse 10s ease-out infinite;
}
.scroll:before,
.scroll:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.scroll:before {
    width: 20px;
    height: 46px;
    background-color: #03182e;
    border-radius: 100px;
}
.scroll:after {
    background-color: var(--orange);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    animation: trackBallSlide 10s linear infinite;
}

/* Animations */
@keyframes colorSlide {
    0% {
        background-position: 0% 100%;
    }
    20% {
        background-position: 0% 0%;
    }
    21% {
        background-color: #4e5559;
    }
    29.99% {
        background-color: #ffffff;
        background-position: 0% 0%;
    }
    30% {
        background-color: #4e5559;
        background-position: 0% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    51% {
        background-color: #4e5559;
    }
    59% {
        background-color: #ffffff;
        background-position: 0% 0%;
    }
    60% {
        background-color: #4e5559;
        background-position: 0% 100%;
    }
    80% {
        background-position: 0% 0%;
    }
    81% {
        background-color: #4e5559;
    }
    90%, 100% {
        background-color: #ffffff;
    }
}

@keyframes trackBallSlide {
    0%{
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    6%{
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    14%{
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    15%, 19%{
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99%{
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    30%{
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    36%{
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    44%{
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    45%, 49%{
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99%{
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    60%{
        opacity: 1;
        transform: scale(0.9) translateY(-20px);
    }
    66%{
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    74%{
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    75%, 79%{
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    88%, 100%{
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
}
@keyframes nudgeMouse {
    0%{
        transform: translateY(0);
    }
    20%{
        transform: translateY(8px);
    }
    30%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(8px);
    }
    60%{
        transform: translateY(0);
    }
    80%{
        transform: translateY(8px);
    }
    90%{
        transform: translateY(0);
    }
}
@keyframes nudgeText {
    0%{
        transform: translateY(0);
    }
    20%{
        transform: translateY(2px);
    }
    30%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(2px);
    }
    60%{
        transform: translateY(0);
    }
    80%{
        transform: translateY(2px);
    }
    90%{
        transform: translateY(0);
    }
}