/*
 *       ___      ___       ___  __    __   __   __  
 * |  | |__   /\   |  |__| |__  |__)  /  ` /__` /__` 
 * |/\| |___ /~~\  |  |  | |___ |  \ .\__, .__/ .__/ 
 *
 * Enhanced weather effects with pure CSS
 * Based on weather.css by Moritz Marquardt
 * Enhanced with dynamic speed control
 *
 * Licensed under MIT License (http://opensource.org/licenses/MIT)
 */

/* main element */
.weather {
    position: relative;
    overflow: hidden;
}

/* pseudo elements: positioning and setup */
.weather:before, .weather:after {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    right: -50%;
    bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    background-size: 256px 1024px;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    opacity: 0.7;
    
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.weather:after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}

/* Rain variations - using original rain image */
.weather.rain-light:before,
.weather.rain-light:after,
.weather.rain-shower:before,
.weather.rain-shower:after,
.weather.rain-drizzle:before,
.weather.rain-drizzle:after,
.weather.rain-cloudy:before,
.weather.rain-cloudy:after,
.weather.rain-storm:before,
.weather.rain-storm:after,
.weather.rain-heavy:before,
.weather.rain-heavy:after,
.weather.rain:before,
.weather.rain:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAEACAYAAAADRnAGAAAH6klEQVR42u2dS4wURRjHq2p2BrMIrCsePLAS0BsEY6IJyTY7vBqXGBl5KCgIywK92Y2BFTyAJmqMezFeVIytHjQQOUAUiRG3edPrbuBiiF68GKInE9iXq7i7M1UeQJ0dZnr7Uf2o/r7fjRmmt/vf/6/qq66urwgpQzds8fyrV2cTCeiGXQjyfS02H7zyHpEIq/zgi7efGJV0bFH5wQuvXd3r9L1L/gxVAIkMVX6QzbJxp+9dckMJASxTu1z52eQkH3P63iWTZWG0MskOIFUcMBE4rgQZDu0EdcMWRCF0w14KWgApbYBu2A1l/54AJwAhZEHZv4chCtCkigBPvdTXHYYACyX0zZHAudxeq7XT7v7PAbphLyaEjCTaroxw6Ye0TG3vncTkR0LIICQHEEI4K+sCFyXdAZSG4ICy1PSnpDsghMx1igMWW6Z2KOEC8IQLqhatnXY3QRDXA6Xn0poKu2UO2gB4CPSk9cJmJ+hc5qHVkkp+e29vGh3guhcQQoTeC1im9ltiBeAlkYupXWhKSB4QzwNjy9R+TYQAlLJ64JlgPCGQHAEYnQl9LNAAOqFr2dY7HtOFLUmEwsu2fvc76BAQVAzDbgOEGILtACFGYDuAi0HQAmSyOeUcsHrP5TZ5qXAmE4sDdMN+KMDPKYGMVAeklbQLQKELkI633nTDzkMPAYptQA3WdvXNhiBAzVj+9nDzKEEQBEEQBEEQBEEQBEGqs2r3pR7dsB8t/wzavEAjqXi+CE2AesvUfoAswF1Pl6EJICrfOQIlAKUkZ5naNcgCzAQfAtAFuAVdgJuYDiIIXHTj4kZUAUHKQsKeLzUPWNNhKxdjshOhBpUu3jK167IFmIQQN2+m6Xr8OIA6tAHbQbcBvR9pn0NvBAloAdZ02O2gBRCCjIIWwDK149P0IC1KCLDl0NW8040O8PfqlBCgWOQ5h7v8epyJ0qpdF3qiCAHpS+V1w54boJz2/zdnstgYugClksiGkHff0A17WdDjUEpTWcnCNfkdZ46AToQooQK0AELyQjAVHRBoAdX6/QPz1HaAEIEs8OW7S6dUq2JLCifuWnW14cDAwcQ6gNK/ZDqAPP7sqceiOPENBwYekXGclhet8OsartvX3yH7mOv3D8wniCKs7ep7C8q1shot7YOprSHqMg+YQW6/VAgX3bCPgXVAa6d9NC0O0A17k2cBTn+obSXpqSR9vx8HfEAIuS/EuxJlTjDLTyNIKVVrorMWlqm946MbJMOZTHgVJC1Tuz7d/2neeroQhUBVBeCcjBHJGxt6HvVxwWITgNze1DDW+oGUUSn7ieiG/YZnASxT+4TEvOuURAfU+XEAoTTePYdkOYAQ5+k6J5VjrR/Yd7T1ZKwCMEZHPMRZkreruTmtALph76gyIvTigMQ+W5xuwpbdKUicqfzim/ebvew6xZN24dVuaq079zAhpBhSdyqN1k67zeNPMm5PvIkQEnQuMHQHUOp5PsDVTWWWqZ0kwaetmUd7ei6A5mM+IOv6xC0z8NtdnhxgmdqoDwd4/cmklzuSyPf7yp3S2mnvJJBZ29XX5lG87ZHfpaSypsMuhNZ9uYnn5VtOxLpHAOd8RqwZ3MT4RCZOAUqlYn2sAuTuyZXiDQIKu8Q2Ap0V7efaUAVofT9SnofsPLsaVUAwfGNVfW7qldeN80ouqJQ2FuBczS1tpAnAFF2BKNMBWeAOUHNLTokOEAK6Axh0B9ScG1i3rx/L14Cm0N2/LvUhME14ZFIvQMsOa6NDA8lTL8Clz/QTDg7Ax9ISRpQ9yrYBkpgFXQAOXQCGDoDuAN2wC9AdwKC3ARyyAH8Q6KW/wmgDEAR4uDBJfyyJK81ZZAJwzhtdChXl/CCPUgBX64z9vCSthAMopfdCGTtUZUX7hVOqNpayHEBB);
}

/* Rain speed variations */
.weather.rain-light:before { -webkit-animation-duration: 3s; animation-duration: 3s; }
.weather.rain-light:after { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; }

.weather.rain-shower:before { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }
.weather.rain-shower:after { -webkit-animation-duration: 1s; animation-duration: 1s; }

.weather.rain-drizzle:before { -webkit-animation-duration: 4s; animation-duration: 4s; }
.weather.rain-drizzle:after { -webkit-animation-duration: 3s; animation-duration: 3s; }

.weather.rain-cloudy:before { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; }
.weather.rain-cloudy:after { -webkit-animation-duration: 2s; animation-duration: 2s; }

.weather.rain:before { -webkit-animation-duration: 2s; animation-duration: 2s; }
.weather.rain:after { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

/* Extreme weather - faster and more intense */
.weather.rain-storm:before { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; }
.weather.rain-storm:after { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; }

.weather.rain-heavy:before { -webkit-animation-duration: 1s; animation-duration: 1s; }
.weather.rain-heavy:after { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; }

/* Snow variations - using original snow image */
.weather.snow-light:before,
.weather.snow-light:after,
.weather.snow-float:before,
.weather.snow-float:after,
.weather.snow-heavy:before,
.weather.snow-heavy:after,
.weather.snow-dance:before,
.weather.snow-dance:after,
.weather.snow:before,
.weather.snow:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAEACAYAAAADRnAGAAABKklEQVR42u3cQQ7CMAwEwJj//zk9VULqDSonjmc+QNNubScgxihkzjlHV/fi3QQAAACbHjtIO0gJEMH/riWyPjAiYpfFp17L7gkAUHwAQOsCADDk4SnkLN5NAAAtb6XIXPzqX4lIAAAAxSdKZ4ldZ3UJAM6ougCgLdqOSgBIq3olAQDor5VaoeHCkAEA0Gjyc13GcQkAAAAAANjKUQelWYuJ3Rd/xN9v/fI0nfsDVKz0vrKWAP0bAAwyBhkJAAC0ZwOaBAAAmLIAOKZzOKSQADME3m81A0DxMzBJAABgnjBRSgCAolllgVF98Uf80ZKIG3yQKHfc9lUCAAAAAB6cMcDrr8On4nu47NB1fmlbEFViMDBBo/fIN7wSoKIC6Eg60uInqR2Dygu87gIbXdZS4cGX7QAAAABJRU5ErkJggg==);
}

/* Snow speed variations */
.weather.snow-light:before { -webkit-animation-duration: 8s; animation-duration: 8s; }
.weather.snow-light:after { -webkit-animation-duration: 6s; animation-duration: 6s; }

.weather.snow-float:before { -webkit-animation-duration: 6s; animation-duration: 6s; }
.weather.snow-float:after { -webkit-animation-duration: 4.5s; animation-duration: 4.5s; }

.weather.snow-heavy:before { -webkit-animation-duration: 4s; animation-duration: 4s; }
.weather.snow-heavy:after { -webkit-animation-duration: 3s; animation-duration: 3s; }

.weather.snow-dance:before { -webkit-animation-duration: 3s; animation-duration: 3s; }
.weather.snow-dance:after { -webkit-animation-duration: 2s; animation-duration: 2s; }

.weather.snow:before { -webkit-animation-duration: 6s; animation-duration: 6s; }
.weather.snow:after { -webkit-animation-duration: 4.5s; animation-duration: 4.5s; }

/* Clear weather - no effect */
.weather.clear:before,
.weather.clear:after {
    background-image: none;
    opacity: 0;
}

/* animation keyframes */
@-webkit-keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}

@keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}

@-webkit-keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}

@keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}