.lp-scroll-cue {
    position: absolute;
    z-index: 5;
    bottom: 1rem;
    left: 50%;
    display: flex;
    width: 2.5rem;
    height: 2.8rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--audience-ink, var(--gray-700));
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, .5rem);
    transition: opacity .6s ease, transform .6s ease;
}

.lp-scroll-cue::before {
    content: '';
    width: 1px;
    height: .9rem;
    margin-bottom: -.2rem;
    background: currentColor;
    opacity: .38;
}

.lp-scroll-cue.is-visible {
    opacity: .55;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.lp-scroll-cue .material-icons-outlined {
    font-size: 1.45rem;
    animation: lpScrollCueDrift 2.4s ease-in-out infinite;
}

.lp-scroll-cue:focus-visible {
    border-radius: 999px;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (hover: hover) {
    .lp-scroll-cue.is-visible:hover {
        opacity: .85;
    }
}

@keyframes lpScrollCueDrift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(.22rem); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-scroll-cue,
    .lp-scroll-cue.is-visible {
        opacity: .55;
        pointer-events: auto;
        transform: translate(-50%, 0);
        transition: none;
    }

    .lp-scroll-cue .material-icons-outlined {
        animation: none;
    }
}