.animation-module {
    --stripe-width: calc(100% / 7);
    --width: var(--animation-module-width);
    height: var(--animation-module-height); width: var(--width);
    margin-right: 0; margin-left: auto;
    overflow-x: hidden;
    position: -webkit-sticky; position: sticky;
        top: calc((100% - var(--navbar-height) - var(--animation-module-height)) * 0.5 + var(--navbar-height));
}

.animation-module * {
    position: absolute;
}

.animation-module .car {
    bottom: 38.2%; left: 0;
    height: 61.8%;
    transform: translateY(38.2%);
}

@media (max-width: 768px) {
    .animation-module {
        overflow-x: revert;
        position: relative;
            top: 0;
            left: var(--stripe-width);
    }
}

.animation-module .stripes {
    --light-color: rgba(var(--beep-lightturquoise-rgb), calc((var(--stripe-nr)*2 - 1)/6));
    --dark-color: rgba(var(--beep-lightturquoise-rgb), calc(var(--stripe-nr)*2/6));
    background-color: var(--beep-white);
    background-image: linear-gradient(
        90deg,
        var(--light-color) 50%,
        var(--dark-color) 50.5%,
        var(--dark-color) 100%
    );
    height: 100%; width: calc(2 * var(--stripe-width));
    right: calc(var(--stripe-width) * (6 - 1.98*var(--stripe-nr)) - 10px);
    transform: skewX(-20deg);
    transform-origin: 0 100%;
}

.animation-module .behind-the-car,
.animation-module .in-front-of-the-car {
    height: 100%; width: 100%;
}

.animation-module .behind-the-car > *,
.animation-module .in-front-of-the-car > * {
    fill: var(--beep-orange);
    left: 100%;
    transition: left var(--transition-duration) ease-out;
}

.animation-module .behind-the-car .scene-1 {top: 16%; height: 37%; width: 29%;}
.animation-module.scene-1 .behind-the-car .scene-1 {left: 4%;}
.animation-module .in-front-of-the-car .scene-1 {bottom: 9%; height: 18%; width: 23%; transform: rotate(-20deg);}
.animation-module.scene-1 .in-front-of-the-car .scene-1 {left: 29%;}

.animation-module .behind-the-car .scene-2 {top: 0; width: 0;}
.animation-module.scene-2 .behind-the-car .scene-2 {left: 0;}
.animation-module .in-front-of-the-car .scene-2 {top: 11%; height: 36%; width: 24%;}
.animation-module.scene-2 .in-front-of-the-car .scene-2 {left: 0;}

.animation-module .behind-the-car .scene-3 {top: 10%; height: 40%; width: 37%;}
.animation-module.scene-3 .behind-the-car .scene-3 {left: 0;}
.animation-module .in-front-of-the-car .scene-3 {top: 50%; width: 8%;}
.animation-module.scene-3 .in-front-of-the-car .scene-3 {left: 20%;}

.animation-module .scene-4 {height: 40%; width: 19%;}
.animation-module .behind-the-car .scene-4 {top: 6%;}
.animation-module.scene-4 .behind-the-car .scene-4 {left: 20%;}
.animation-module .in-front-of-the-car .scene-4 {bottom: 9%;}
.animation-module.scene-4 .in-front-of-the-car .scene-4 {left: 0;}

.animation-module .scene-5 {height: 40%; width: 20%;}
.animation-module .behind-the-car .scene-5 {top: 14%;}
.animation-module.scene-5 .behind-the-car .scene-5 {left: 3%;}
.animation-module .in-front-of-the-car .scene-5 {top: 20%; transform: rotate(160deg);}
.animation-module.scene-5 .in-front-of-the-car .scene-5 {left: 16%;}