/*
 * Animated weather icons, reimplemented locally from weatherwidget.io's
 * "Climacons Animated" icon set (see assets/img/weather/animated/*.svg for
 * the individual part shapes and assets/js/modules/weather-icons.js for the
 * code that assembles them). Icon codes match the Dark Sky / forecast7.com
 * convention: clear-day, clear-night, partly-cloudy-day, partly-cloudy-night,
 * cloudy, rain, snow, sleet, wind, fog.
 *
 * Unlike the original (which used fixed rem offsets tuned for one icon
 * size), all part movement below is percentage-based so an icon rendered
 * at any size (see .w-icon-sm) animates proportionally.
 */

.w-icon {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 5rem;
  height: 5rem;
  --w-icon-sun: #fcc52e;
  --w-icon-moon: #e5e5e5;
  --w-icon-cloud: #fffeff;
  --w-icon-cloud-fill: #c0c0c0;
  --w-icon-rain: #4db3f9;
  --w-icon-bolt: #f9d423;
  --w-icon-snow: #fefefe;
  --w-icon-wind: #fffeff;
  --w-icon-fog: #fffeff;
}

.w-icon.w-icon-sm {
  width: 2.1875rem;
  height: 2.1875rem;
}

.w-icon div {
  position: absolute;
  width: 100%;
  height: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 18s;
  transform-origin: 50% 50%;
}

.w-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.w-icon .sun path {
  fill: var(--w-icon-sun);
}

.w-icon .moon path {
  fill: var(--w-icon-moon);
}

.w-icon .cloud path {
  fill: var(--w-icon-cloud);
}

.w-icon .cloud path.cloudfill {
  fill: var(--w-icon-cloud-fill);
}

.w-icon .fogLine path {
  fill: var(--w-icon-fog);
}

.w-icon .drizzle path {
  fill: var(--w-icon-rain);
}

.w-icon .bolt path {
  fill: none;
  stroke: var(--w-icon-bolt);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(249, 212, 35, 0.75));
}

.w-icon .flake circle,
.w-icon .hail circle {
  fill: var(--w-icon-snow);
}

.w-icon .air path {
  fill: var(--w-icon-wind);
}

/* partly-cloudy-day / partly-cloudy-night: sun or moon shrunk and tucked
   behind the cloud, matching the source widget's layout. */
.w-icon .sun.smallSun {
  width: 90%;
  height: 90%;
  top: -7.5%;
  left: 18%;
}

.w-icon .moon.smallMoon {
  width: 95%;
  height: 95%;
  top: -14.2%;
  left: 20%;
}

/* clear-day / clear-night */
.w-icon .sun {
  animation-name: w-icon-rotate;
}

.w-icon .moon {
  animation-name: w-icon-partial-rotate;
  animation-direction: alternate;
}

/* wind */
.w-icon .air {
  animation-name: w-icon-wind-sway;
  animation-duration: 6s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

/* rain */
.w-icon .drizzle {
  opacity: 0;
  animation-name: w-icon-drizzle-fall, w-icon-fade-in-out;
  animation-timing-function: ease-in;
  animation-duration: 1.5s;
}

.w-icon .drizzle:nth-child(1) {
  animation-delay: 0s;
}

.w-icon .drizzle:nth-child(2) {
  animation-delay: 0.5s;
}

.w-icon .drizzle:nth-child(3) {
  animation-delay: 1s;
}

/* thunderstorm: same falling drop as rain, just heavier (shorter duration,
   tighter delays) plus a flashing bolt tucked behind the cloud. */
.w-icon .drizzle.stormDrop {
  animation-duration: 0.8s;
}

.w-icon .drizzle.stormDrop:nth-child(1) {
  animation-delay: 0s;
}

.w-icon .drizzle.stormDrop:nth-child(2) {
  animation-delay: 0.27s;
}

.w-icon .drizzle.stormDrop:nth-child(3) {
  animation-delay: 0.53s;
}

.w-icon .bolt {
  opacity: 0;
  /* --bolt-x is randomized in JS (see jitterBolt in weather-icons.js) each
     time the flash animation loops, so lightning doesn't strike the same
     spot every time. */
  transform: translateX(var(--bolt-x, 0%));
  animation-name: w-icon-bolt-flash;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
}

/* snow */
.w-icon .flake {
  top: 10%;
  opacity: 0;
  animation-name: w-icon-snow-fall, w-icon-fade-in-out;
  animation-timing-function: linear;
  animation-duration: 9s;
}

.w-icon .flake:nth-child(1) {
  animation-delay: 0s;
}

.w-icon .flake:nth-child(2) {
  animation-name: w-icon-snow-fall-alt, w-icon-fade-in-out;
  animation-delay: 3s;
}

.w-icon .flake:nth-child(3) {
  animation-delay: 6s;
}

/* sleet */
.w-icon .hail {
  top: 13%;
  opacity: 0;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

.w-icon .hail:nth-child(3n+1) {
  left: -13%;
  animation-name: w-icon-hail-left, w-icon-fade-in-out;
}

.w-icon .hail:nth-child(3n+2) {
  animation-name: w-icon-hail-middle, w-icon-fade-in-out;
}

.w-icon .hail:nth-child(3n) {
  left: 13%;
  animation-name: w-icon-hail-right, w-icon-fade-in-out;
}

.w-icon .hail:nth-child(1) { animation-delay: 0s; }
.w-icon .hail:nth-child(2) { animation-delay: 0.1667s; }
.w-icon .hail:nth-child(3) { animation-delay: 0.3333s; }
.w-icon .hail:nth-child(4) { animation-delay: 0.5s; }
.w-icon .hail:nth-child(5) { animation-delay: 0.6667s; }
.w-icon .hail:nth-child(6) { animation-delay: 0.8333s; }

/* fog */
.w-icon .fogLine {
  opacity: 0.5;
  animation-name: w-icon-fog-drift, w-icon-fog-fade;
  animation-timing-function: ease-in;
  animation-duration: 18s;
}

.w-icon .fogLine:nth-child(2n) {
  animation-delay: 9s;
}

@keyframes w-icon-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes w-icon-partial-rotate {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

@keyframes w-icon-wind-sway {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(6%); }
  75% { transform: translateX(-6%); }
}

@keyframes w-icon-drizzle-fall {
  from { transform: translateY(0); }
  to { transform: translateY(30%); }
}

@keyframes w-icon-fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.8; }
}

@keyframes w-icon-bolt-flash {
  0%, 16%, 100% { opacity: 0; }
  3% { opacity: 1; }
  6% { opacity: 0.25; }
  10% { opacity: 1; }
}

@keyframes w-icon-snow-fall {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5.6%, 10%); }
  50% { transform: translate(0, 20%); }
  75% { transform: translate(-5.6%, 30%); }
  100% { transform: translate(0, 40%); }
}

@keyframes w-icon-snow-fall-alt {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5.6%, 10%); }
  50% { transform: translate(0, 20%); }
  75% { transform: translate(5.6%, 30%); }
  100% { transform: translate(0, 40%); }
}

@keyframes w-icon-hail-left {
  0%, 49% { opacity: 0; }
  50% { transform: translateY(30%); }
  65% { transform: translate(-4%, 15%); }
  80% { transform: translate(-8%, 25%); }
  100% { transform: translate(-12%, 20%); }
}

@keyframes w-icon-hail-middle {
  0%, 49% { opacity: 0; }
  50% { transform: translateY(30%); }
  65% { transform: translate(0, 15%); }
  80% { transform: translate(0, 25%); }
  100% { transform: translate(0, 20%); }
}

@keyframes w-icon-hail-right {
  0%, 49% { opacity: 0; }
  50% { transform: translateY(30%); }
  65% { transform: translate(4%, 15%); }
  80% { transform: translate(8%, 25%); }
  100% { transform: translate(12%, 20%); }
}

@keyframes w-icon-fog-drift {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(4%); }
  75% { transform: translateX(-4%); }
}

@keyframes w-icon-fog-fade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}