/* The div receiving the falling effect */
.falling-images {
    position: relative;
    overflow: hidden;
}


/* Full-size animation layer */
.falling-images__scene {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    pointer-events: none;
    user-select: none;

    z-index: 1;
}


/* Individual falling image */
.falling-images__item {
    position: absolute;

    top: -100px;

    /*
     * JS sets this between 0% and 100%.
     * This is what distributes the images
     * across the FULL container width.
     */
    left: var(--start-x);

    display: block;

    width: var(--size, 40px);
    height: auto;

    object-fit: contain;

    opacity: 0;

    backface-visibility: hidden;

    will-change:
        transform,
        opacity;

    animation:
        falling-image
        var(--duration, 10s)
        linear
        var(--delay, 0s)
        infinite;
}


/* Falling animation */
@keyframes falling-image {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);

        opacity: 0;
    }


    5% {
        opacity: var(--opacity, 0.9);
    }


    25% {
        transform:
            translate3d(
                calc(var(--drift) * 0.25),
                calc(var(--fall-distance) * 0.25),
                0
            )
            rotate(
                calc(var(--rotation) * 0.25)
            );

        opacity: var(--opacity, 0.9);
    }


    50% {
        transform:
            translate3d(
                calc(var(--drift) * 0.5),
                calc(var(--fall-distance) * 0.5),
                0
            )
            rotate(
                calc(var(--rotation) * 0.5)
            );

        opacity: var(--opacity, 0.9);
    }


    75% {
        transform:
            translate3d(
                calc(var(--drift) * 0.75),
                calc(var(--fall-distance) * 0.75),
                0
            )
            rotate(
                calc(var(--rotation) * 0.75)
            );

        opacity: var(--opacity, 0.9);
    }


    95% {
        opacity: var(--opacity, 0.9);
    }


    100% {
        transform:
            translate3d(
                var(--drift),
                calc(var(--fall-distance) + 150px),
                0
            )
            rotate(
                var(--rotation)
            );

        opacity: 0;
    }
}


/* Your normal content */
.falling-images > *:not(.falling-images__scene) {
    position: relative;
    z-index: 2;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .falling-images__scene {
        display: none;
    }

}