// Pure CSS Snowfall
// Released by Artimon under MIT license
//
// Source: https://github.com/Artimon/pure-css-snowfall

$count: 36;
$screenOffset: 0px;
$fallDuration: 12;
$windNoise: 30;
$windSpeed: 4;
$sizeNoise: 40;
$rotation: 360;
$imageSize: 20px;
$fontSize: 40px;

.snowfall {
    z-index: 0;
    display: block;

    font-size: $fontSize;

    overflow: hidden;
    pointer-events: none;

    .snowflake {
        position: relative;
        top: 0;
        left: 0;

        display: flex;
        justify-content: center;

        width: $screenOffset;
        height: $screenOffset;

        span {
            align-self: center;
        }

        img {
            align-self: center;
            width: $imageSize;
        }
    }

    @while ($count > 0) {
        $left: random(100);
        $deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed;
        /*$deltaLeft: math.div(random(2 * $windNoise * 10), 10) -
            $windNoise +
            $windSpeed;*/
        $scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100;
        /*$scale: 1 +
            (math.div(random(2 * $sizeNoise * 10), 10) - $sizeNoise) /
            100;*/

        .snowflake:nth-child(#{$count}) {
            animation: animation-snowflake-#{$count} linear infinite;
            animation-duration: $fallDuration +
                random($fallDuration * 10) /
                10 +
                s;
            animation-delay: random(2 * $fallDuration * 10) /
                10 -
                (2 * $fallDuration) +
                s;
        }

        @keyframes animation-snowflake-#{$count} {
            0% {
                left: percentage($left / 100);
                top: calc(0% - #{$screenOffset});
                transform: scale($scale)
                    rotate3d(
                        random(100) / 100,
                        random(100) / 100,
                        random(100) / 100,
                        0deg
                    );
            }
            100% {
                left: percentage(($left + $deltaLeft) / 100);
                top: calc(100% + #{$screenOffset});
                transform: scale($scale)
                    rotate3d(
                        random(100) / 100,
                        random(100) / 100,
                        random(100) / 100,
                        (random($rotation) + $rotation) *
                            ((random(2) - 1) * 2 - 1) + deg
                    );
            }
        }

        $count: $count - 1;
    }
}