/* Precipitation Animations - Full CSS */

/* Base container */
.precipitation-hour {
  width: calc(var(--dial-fraction) * 5);
  height: calc(var(--dial-fraction) * 5);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.7;
  overflow: hidden;
  border-radius: 50%;
}

.precipitation-animation {
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
}

/* Rain */
.precipitation-animation .drop {
  fill: #4285F4;
}

/* Snow */
.precipitation-animation .flake {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Hail */
.precipitation-animation .stone {
  fill: rgba(255, 255, 255, 0.5);
  stroke: #ffffff;
  stroke-width: 1.5;
}

/* Lightning */
.precipitation-animation .bolt {
  fill: #fbbc04;
  opacity: 0;
  filter: drop-shadow(0 0 2px #fbbc04);
}


/* Light Rain */

.light-rain-animation .drop {
  fill: #4285F4;
  animation: rain-fall 1s linear infinite;
}
.light-rain-animation .drop:nth-child(1) { animation-delay: -0.00s; }
.light-rain-animation .drop:nth-child(2) { animation-delay: -0.5s; }


/* Rain */

.rain-animation .drop {
  fill: #4285F4;
  animation: rain-fall 0.90s linear infinite;
}
.rain-animation .drop:nth-child(1) { animation-delay: -0.00s; }
.rain-animation .drop:nth-child(2) { animation-delay: -0.30s; }
.rain-animation .drop:nth-child(3) { animation-delay: -0.60s; }


/* Heavy Rain */

.heavy-rain-animation .drop {
  fill: #4285F4;
  animation: rain-fall 0.60s linear infinite;
}
.heavy-rain-animation .drop:nth-child(1) { animation-delay: -0.00s; }
.heavy-rain-animation .drop:nth-child(2) { animation-delay: -0.15s; }
.heavy-rain-animation .drop:nth-child(3) { animation-delay: -0.30s; }
.heavy-rain-animation .drop:nth-child(4) { animation-delay: -0.45s; }
.heavy-rain-animation .drop:nth-child(5) { animation-delay: -0.00s; }
.heavy-rain-animation .drop:nth-child(6) { animation-delay: -0.15s; }
.heavy-rain-animation .drop:nth-child(7) { animation-delay: -0.30s; }
.heavy-rain-animation .drop:nth-child(8) { animation-delay: -0.45s; }


/* Light Snow */

.light-snow-animation .flake {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: snow-fall 3.50s linear infinite;
}
.light-snow-animation .flake:nth-child(1) { animation-delay: -0.00s; }
.light-snow-animation .flake:nth-child(2) { animation-delay: -1.75s; }



/* Snow */

.snow-animation .flake {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: snow-fall 2.00s linear infinite;
}
.snow-animation .flake:nth-child(1) { animation-delay: -0.00s; }
.snow-animation .flake:nth-child(2) { animation-delay: -0.67s; }
.snow-animation .flake:nth-child(3) { animation-delay: -1.33s; }


/* Heavy Snow */

.heavy-snow-animation .flake {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.7;
  stroke-linecap: round;
  animation: snow-fall 1.54s linear infinite;
}
.heavy-snow-animation .flake:nth-child(1) { animation-delay: -0.00s; }
.heavy-snow-animation .flake:nth-child(2) { animation-delay: -0.38s; }
.heavy-snow-animation .flake:nth-child(3) { animation-delay: -0.77s; }
.heavy-snow-animation .flake:nth-child(4) { animation-delay: -1.15s; }
.heavy-snow-animation .flake:nth-child(5) { animation-delay: -0.00s; }
.heavy-snow-animation .flake:nth-child(6) { animation-delay: -0.38s; }
.heavy-snow-animation .flake:nth-child(7) { animation-delay: -0.77s; }
.heavy-snow-animation .flake:nth-child(8) { animation-delay: -1.15s; }


/* Blowing Snow */

.blowing-snow-animation .flake {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: blowing-snow 4.40s linear infinite;
}
.blowing-snow-animation .flake:nth-child(1) { animation-delay: -0.00s; }
.blowing-snow-animation .flake:nth-child(2) { animation-delay: -1.10s; }
.blowing-snow-animation .flake:nth-child(3) { animation-delay: -2.20s; }
.blowing-snow-animation .flake:nth-child(4) { animation-delay: -3.30s; }


/* Rain & Snow */

.sleet-animation .drop {
  fill: #4285F4;
  animation: rain-fall 1.20s linear infinite;
}
.sleet-animation .drop:nth-child(1) { animation-delay: -0.00s; }
.sleet-animation .drop:nth-child(2) { animation-delay: -0.60s; }

.sleet-animation .flake {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: snow-fall 2.00s linear infinite;
}
.sleet-animation .flake:nth-child(3) { animation-delay: -0.00s; }



/* Hail */

.hail-animation .stone {
  fill: rgba(255, 255, 255, 0.5);
  stroke: #ffffff;
  stroke-width: 1.5;
  animation: hail-fall 0.83s linear infinite;
}
.hail-animation .stone:nth-child(1) { animation-delay: -0.00s; }
.hail-animation .stone:nth-child(2) { animation-delay: -0.42s; }



/* Thunderstorm */


.thunder-animation .drop {
  fill: #4285F4;
  animation: rain-fall 1s linear infinite;
}
.thunder-animation .drop:nth-child(1) { animation-delay: -0.00s; }
.thunder-animation .drop:nth-child(2) { animation-delay: -0.50s; }
.thunder-animation .drop:nth-child(3) { animation-delay: -0.00s; }
.thunder-animation .drop:nth-child(4) { animation-delay: -0.50s; }

.thunder-animation .bolt {
  fill: #fbbc04;
  opacity: 0;
  filter: drop-shadow(0 0 2px #fbbc04);
  animation: lightning-flash 1s ease-out infinite;
}
.thunder-animation .bolt:nth-child(6) { animation-delay: 0.5s; }









/* Keyframes */
@keyframes rain-fall {
  0% { transform: translateY(-8px); }
  100% { transform: translateY(32px); }
}

@keyframes snow-fall {
  0% { transform: translateY(-12px) rotate(0deg); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateY(36px) rotate(0deg); opacity: 0; }
}

@keyframes blowing-snow {
  0% { transform: translate(8px, -12px) rotate(0deg); opacity: 0; }
  5% { opacity: 1; }
  50% { transform: translate(-4px, 12px) rotate(180deg); }
  95% { opacity: 1; }
  100% { transform: translate(6px, 36px) rotate(360deg); opacity: 0; }
}

@keyframes hail-fall {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(34px); }
}

@keyframes lightning-flash {
  0%, 100% { opacity: 0; }
  1% { opacity: 1; }
  15% { opacity: 0.3; }
  20% { opacity: 1; }
  40% { opacity: 0; }
}