/* Final positions when nothing is animating (reduced motion, or before the
   section is on screen). The keyframes below override these while running. */
.lb-dot {
    position: absolute;
    top: -4px;
    left: calc(100% - 7px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.lb-drop {
    position: absolute;
    left: -4px;
    top: calc(100% - 7px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.lb-barrier {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 94%;
    width: 3px;
    border-radius: 2px;
}
.lb-new { opacity: 1; transform: none; }
.lb-packet { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes lb-append {
        0% { opacity: 0; transform: scale(.4); }
        25% { opacity: 1; transform: scale(1.15); }
        40% { transform: scale(1); }
        100% { opacity: 1; }
    }
    @keyframes lb-flow {
        0% { left: 0; opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { left: calc(100% - 7px); opacity: 0; }
    }
    @keyframes lb-drop {
        0% { top: 0; opacity: 0; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { top: calc(100% - 7px); opacity: 0; }
    }
    @keyframes lb-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .35; }
    }
    @keyframes lb-barrier {
        0% { left: 2%; }
        100% { left: 94%; }
    }
    @keyframes lb-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes lb-flow-dots {
        from { background-position: 0 0; }
        to { background-position: 12px 0; }
    }
    @keyframes lb-flow-dots-y {
        from { background-position: 0 0; }
        to { background-position: 0 12px; }
    }
    @keyframes lb-travel {
        0% { left: 0; opacity: 0; }
        12% { opacity: 1; }
        88% { opacity: 1; }
        100% { left: calc(100% - 8px); opacity: 0; }
    }
    @keyframes lb-travel-y {
        0% { top: 0; opacity: 0; }
        12% { opacity: 1; }
        88% { opacity: 1; }
        100% { top: calc(100% - 8px); opacity: 0; }
    }
    @keyframes lb-head {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.35); }
    }

    .lb-feed .lb-dots { animation: lb-flow-dots .7s linear infinite; }
    .lb-feed .lb-packet { animation: lb-travel 1.2s ease-in infinite; }
    .lb-row.is-active .lb-dots { animation: lb-flow-dots .7s linear infinite; }
    .lb-row.is-active .lb-packet { animation: lb-travel 1.35s ease-in infinite; }
    .lb-row.is-active .lb-sq.lb-new { animation: lb-head 1.2s ease-in-out infinite; }
    .lb-dot {
        position: absolute;
        top: -4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        animation: lb-flow 2.2s linear infinite;
    }
    .lb-drop {
        position: absolute;
        left: -4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        animation: lb-drop 1.8s linear infinite;
    }
    .lb-live { animation: lb-pulse 1.6s ease-in-out infinite; }
    .lb-barrier {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 2px;
        animation: lb-barrier 7s linear infinite;
    }

    /* Off-screen: hold the first frame. html.lb-js is set by the module,
       so with JavaScript disabled the diagram keeps moving. */
    html.lb-js .lb-anim:not(.is-visible) .lb-new,
    html.lb-js .lb-anim:not(.is-visible) .lb-dot,
    html.lb-js .lb-anim:not(.is-visible) .lb-drop,
    html.lb-js .lb-anim:not(.is-visible) .lb-live,
    html.lb-js .lb-anim:not(.is-visible) .lb-barrier,
    html.lb-js .lb-anim:not(.is-visible) .lb-packet,
    html.lb-js .lb-anim:not(.is-visible) .lb-dots {
        animation-play-state: paused;
    }

    @media (max-width: 760px) {
        .lb-feed .lb-dots,
        .lb-row.is-active .lb-dots { animation-name: lb-flow-dots-y; }
        .lb-feed .lb-packet,
        .lb-row.is-active .lb-packet { animation-name: lb-travel-y; }
    }

    .lb-tail.is-visible .lb-lesson:first-child {
        animation: lb-fade .8s ease both;
    }

    .lb-checkpoint.is-flash { color: var(--dark-text); }
}