/* Uma única linguagem de animação meteorológica para Clássico, Lista e Foco.
   O layout Meteorologia TV continua usando seus ajustes próprios. */
body:not(.layout-broadcast) .broadcast-weather{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  position:relative;
}
body:not(.layout-broadcast) .broadcast-weather svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
body:not(.layout-broadcast) .broadcast-weather .bw-cloud-group{
  transform-origin:160px 130px;
  animation:bwCloudFloat 6s ease-in-out infinite;
}
body:not(.layout-broadcast) .broadcast-weather .bw-rain line{
  stroke:#2baaf4;
  stroke-width:4.8;
  stroke-linecap:round;
  animation:bwRain 1.15s linear infinite;
}
body:not(.layout-broadcast) .broadcast-weather .bw-rain line:nth-child(2){animation-delay:-.3s}
body:not(.layout-broadcast) .broadcast-weather .bw-rain line:nth-child(3){animation-delay:-.65s}
body:not(.layout-broadcast) .broadcast-weather .bw-rain line:nth-child(4){animation-delay:-.15s}
body:not(.layout-broadcast) .broadcast-weather .bw-rain line:nth-child(5){animation-delay:-.75s}
body:not(.layout-broadcast) .broadcast-weather .bw-rain line:nth-child(6){animation-delay:-.48s}
body:not(.layout-broadcast) .broadcast-weather .bw-lightning{
  filter:drop-shadow(0 0 8px #fff58b);
  animation:bwFlash 2.4s ease-in-out infinite;
}
body:not(.layout-broadcast) .broadcast-weather .bw-fog line{
  stroke:rgba(225,244,255,.9);
  stroke-width:8;
  stroke-linecap:round;
  animation:bwFog 4s ease-in-out infinite;
}
body:not(.layout-broadcast) .broadcast-weather .bw-sun{
  transform-origin:center;
  animation:bwSun 4s ease-in-out infinite;
}

/* Clássico */
.layout-classic .main-weather-center .broadcast-weather{width:205px;height:155px;flex:0 0 205px}
.layout-classic .city-card>.broadcast-weather.compact{width:145px;height:100px;justify-self:center;align-self:center}

/* Lista de TV */
.layout-list .main-weather-center .broadcast-weather{width:180px;height:128px;flex:0 0 180px}
.layout-list .city-card>.broadcast-weather.compact{grid-column:3;grid-row:1;width:145px;height:82px;justify-self:center;align-self:center}

/* Foco principal */
.layout-focus .main-weather-center .broadcast-weather{width:275px;height:210px;flex:0 0 275px}
.layout-focus .city-card>.broadcast-weather.compact{display:none}

@keyframes bwCloudFloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-6px)}}
@keyframes bwRain{0%{transform:translateY(-7px);opacity:.15}20%{opacity:1}100%{transform:translateY(14px);opacity:.2}}
@keyframes bwFlash{0%,74%,100%{opacity:.35}78%,82%{opacity:1}80%,86%{opacity:.45}}
@keyframes bwFog{0%,100%{transform:translateX(-5px);opacity:.6}50%{transform:translateX(7px);opacity:1}}
@keyframes bwSun{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}