/*
* This file contains the styles for the animated weather icons.
* It is adapted from the CodePen by @front-end-developer.
*/

.icon {
  position: relative;
  display: inline-block;
  width: 12em;
  height: 10em;
  font-size: 1em; /* This is scaled down by the container */
}

.cloud {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 3.6875em;
  height: 3.6875em;
  margin: -1.84375em;
  background: #B0BEC5; /* Muted gray for clouds */
  border-radius: 50%;
  box-shadow: -2.1875em 0.6875em 0 -0.6875em #B0BEC5, 2.0625em 0.9375em 0 -0.9375em #B0BEC5, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}
.cloud:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -0.5em;
  display: block;
  width: 4.5625em;
  height: 1em;
  background: #B0BEC5;
  box-shadow: 0 0.4375em 0 -0.0625em #fff;
}

.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5em;
  height: 2.5em;
  margin: -1.25em;
  background: #FFCA28; /* Sunny yellow */
  border-radius: 50%;
  box-shadow: 0 0 0 0.375em #FFCA28;
  animation: spin 12s infinite linear;
}
.rays {
  position: absolute;
  top: -2em;
  left: 50%;
  display: block;
  width: 0.375em;
  height: 1.125em;
  margin-left: -0.1875em;
  background: #FFCA28;
  border-radius: 0.25em;
  box-shadow: 0 5.375em #FFCA28;
}
.rays:before, .rays:after {
  content: '';
  position: absolute;
  top: 0em;
  left: 0em;
  display: block;
  width: 0.375em;
  height: 1.125em;
  transform: rotate(60deg);
  transform-origin: 50% 3.25em;
  background: #FFCA28;
  border-radius: 0.25em;
  box-shadow: 0 5.375em #FFCA28;
}
.rays:before {
  transform: rotate(120deg);
}

/* Rain, Lightning, Snow common base */
.rain, .lightning, .snow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 3.75em;
  height: 3.75em;
  margin: 0.375em 0 0 -2em;
  background: transparent;
}

.rain:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1.125em;
  height: 1.125em;
  margin: -1em 0 0 -0.25em;
  background: #4FC3F7; /* Rain blue */
  border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
  box-shadow: 0.625em 0.875em 0 -0.125em rgba(79, 195, 247, 0.5), -0.875em 1.125em 0 -0.125em rgba(79, 195, 247, 0.5), -1.375em -0.125em 0 #4FC3F7;
  transform: rotate(-28deg);
  animation: rain 3s linear infinite;
}

/* Snowflakes */
.snow:after {
  content: '❄';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  font-size: 1.5em;
  color: #fff;
  margin: -0.5em 0 0 -0.5em;
  animation: snow 3s linear infinite;
  opacity: 0;
}
.snow:before {
  content: '❄';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  font-size: 1.2em;
  color: #fff;
  margin: -1em 0 0 0.5em;
  animation: snow 3s linear infinite reverse;
  opacity: 0;
}

/* Lightning Bolt */
.lightning:after {
  content: '⚡';
  color: #FFEB3B; /* Lightning yellow */
  font-size: 3em;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -0.6em 0 0 -0.25em;
  animation: lightning 2s linear infinite;
  opacity: 0;
}

/* --- Weather States --- */

.sunny .cloud, .sunny .rain, .sunny .snow, .sunny .lightning {
  display: none;
}

.cloudy .sun, .cloudy .rain, .cloudy .snow, .cloudy .lightning {
  display: none;
}

.rainy .sun, .rainy .snow, .rainy .lightning {
  display: none;
}

.flurries .sun, .flurries .rain, .flurries .lightning {
  display: none;
}
.flurries .cloud {
  background: #90A4AE; /* Darker cloud for snow */
}
.flurries .cloud:after {
  background: #90A4AE;
}

.sun-shower .snow, .sun-shower .lightning {
  display: none;
}

.thunder-storm .sun, .thunder-storm .snow {
  display: none;
}
.thunder-storm .cloud {
  background: #607D8B; /* Darkest cloud for storm */
}
.thunder-storm .cloud:after {
  background: #607D8B;
}

/* --- Animations --- */

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rain {
  0% { transform: translateY(-0.5em) rotate(-28deg); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(2em) rotate(-28deg); opacity: 0; }
}

@keyframes snow {
  0% { transform: translateY(-0.5em); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(2em); opacity: 0; }
}

@keyframes lightning {
  0% { opacity: 0; }
  48% { opacity: 0; }
  50% { opacity: 1; }
  52% { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Icon Positioning --- */
.weather-icon-container {
    position: absolute;
    top: 2px;
    right: 10px;
    transform: scale(0.25); /* Scale down the icon to fit */
    transform-origin: top right;
}