/* Gemeinsames, animiertes Icon-System für Wetterseite und Icon-Übersicht. */
.weather-icon {
  --weather-scale: 1;
  isolation: isolate;
}

.card .weather-icon {
  --weather-scale: 0.68;
}

.now-icon {
  --weather-scale: 1.05;
}

.weather-icon > span {
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%) scale(var(--weather-scale));
  transform-origin: center;
}

.weather-motion {
  display: none;
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform-origin: top center;
}

/* Sonne */
.icon-sun > span {
  width: clamp(72px, 8vw, 124px);
  height: clamp(72px, 8vw, 124px);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff3a3 0 8%, #ffd43b 28%, #f59f00 72%);
  box-shadow: 0 0 0 12px rgb(245 159 0 / 16%), 0 0 38px rgb(245 159 0 / 48%);
  animation: weather-sun-pulse 4s ease-in-out infinite;
}

.icon-sun > span::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffd43b 0 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 59%);
  mask: radial-gradient(circle, transparent 0 57%, #000 59%);
  animation: weather-rays 18s linear infinite;
}

/* Wolkenkörper */
.icon-cloud > span,
.icon-partly > span,
.icon-rain > span,
.icon-drizzle > span,
.icon-snow > span,
.icon-storm > span,
.icon-fog > span {
  width: clamp(108px, 11vw, 168px);
  height: clamp(48px, 5.2vw, 76px);
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #e9f2f5 100%);
  box-shadow:
    -34px 4px 0 -9px #dbe7ec,
    34px 6px 0 -11px #cbdbe2,
    0 14px 24px rgb(0 0 0 / 32%);
  animation: weather-cloud-drift 5.5s ease-in-out infinite;
}

.icon-cloud > span::before,
.icon-partly > span::before,
.icon-rain > span::before,
.icon-drizzle > span::before,
.icon-snow > span::before,
.icon-storm > span::before,
.icon-fog > span::before {
  content: "";
  position: absolute;
  left: 17%;
  bottom: 35%;
  width: 45%;
  height: 94%;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff 10%, #edf4f6 82%);
}

.icon-cloud > span::after,
.icon-partly > span::after,
.icon-rain > span::after,
.icon-drizzle > span::after,
.icon-snow > span::after,
.icon-storm > span::after,
.icon-fog > span::after {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 29%;
  width: 37%;
  height: 78%;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8fbfc 10%, #dce8ec 88%);
}

.icon-partly > span {
  top: 58%;
}

.icon-partly::before {
  content: "";
  position: absolute;
  left: 40%;
  top: 37%;
  width: clamp(62px, 7vw, 108px);
  height: clamp(62px, 7vw, 108px);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff3a3 0 8%, #ffd43b 30%, #f59f00 74%);
  box-shadow: 0 0 0 10px rgb(245 159 0 / 16%), 0 0 28px rgb(245 159 0 / 36%);
  transform: translate(-50%, -50%) scale(var(--weather-scale));
  animation: weather-partly-sun 4s ease-in-out infinite;
}

/* Regen und Nieselregen */
.icon-rain > span,
.icon-drizzle > span,
.icon-snow > span,
.icon-storm > span {
  top: 39%;
}

.icon-rain::after,
.icon-drizzle::after,
.icon-snow::after {
  content: none;
}

.icon-rain .weather-motion,
.icon-drizzle .weather-motion {
  display: block;
  top: 56%;
  width: clamp(82px, 8vw, 126px);
  height: clamp(38px, 4.5vh, 58px);
  transform: translateX(-50%) scale(var(--weather-scale));
}

.icon-rain .weather-motion i,
.icon-drizzle .weather-motion i {
  position: absolute;
  top: -8px;
  width: clamp(5px, 0.42vw, 7px);
  height: clamp(13px, 1.5vw, 20px);
  border-radius: 70% 30% 65% 35%;
  background: linear-gradient(180deg, #8be9ff, #0ea5e9);
  box-shadow: 0 0 8px rgb(14 165 233 / 72%);
  opacity: 0;
  animation: weather-rain-drop 1.15s linear infinite;
}

.icon-drizzle .weather-motion i {
  width: clamp(3px, 0.25vw, 4px);
  height: clamp(8px, 0.9vw, 12px);
  animation-duration: 1.7s;
}

.weather-motion i:nth-child(1) { left: 4%; animation-delay: -0.2s; }
.weather-motion i:nth-child(2) { left: 26%; animation-delay: -0.75s; }
.weather-motion i:nth-child(3) { left: 48%; animation-delay: -0.42s; }
.weather-motion i:nth-child(4) { left: 70%; animation-delay: -1s; }
.weather-motion i:nth-child(5) { left: 91%; animation-delay: -0.58s; }

/* Nebel: Wolke plus klar erkennbare, weich wandernde Nebelbänke. */
.icon-fog > span {
  top: 35%;
  opacity: 0.88;
}

.icon-fog .weather-motion {
  display: block;
  top: 56%;
  width: clamp(108px, 11vw, 170px);
  height: clamp(44px, 5vh, 66px);
  transform: translateX(-50%) scale(var(--weather-scale));
}

.icon-fog .weather-motion i {
  position: absolute;
  left: 50%;
  height: clamp(6px, 0.55vw, 9px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, #b9d5dd 12%, #f1fbfd 50%, #b9d5dd 88%, transparent 100%);
  box-shadow: 0 0 10px rgb(190 226 234 / 34%);
  transform: translateX(-50%);
  animation: weather-fog-drift 4.5s ease-in-out infinite;
}

.icon-fog .weather-motion i:nth-child(1) { top: 2%; width: 92%; }
.icon-fog .weather-motion i:nth-child(2) {
  top: 34%;
  width: 72%;
  animation-delay: -1.5s;
  animation-direction: reverse;
}
.icon-fog .weather-motion i:nth-child(3) {
  top: 66%;
  width: 84%;
  animation-delay: -3s;
}
.icon-fog .weather-motion i:nth-child(n + 4) { display: none; }

/* Schnee */
.icon-snow .weather-motion {
  display: block;
  top: 55%;
  width: clamp(84px, 8vw, 128px);
  height: clamp(42px, 5vh, 66px);
  transform: translateX(-50%) scale(var(--weather-scale));
}

.icon-snow .weather-motion i {
  position: absolute;
  top: -5px;
  width: clamp(7px, 0.6vw, 10px);
  height: clamp(7px, 0.6vw, 10px);
  border: 2px solid #d8f6ff;
  border-radius: 50%;
  box-shadow: 0 0 9px rgb(155 220 242 / 78%);
  opacity: 0;
  animation: weather-snow-fall 2.4s ease-in infinite;
}

/* Gewitter */
.icon-storm > span {
  background: linear-gradient(180deg, #d8e1e6 0%, #82939e 100%);
  box-shadow:
    -34px 4px 0 -9px #aab8c0,
    34px 6px 0 -11px #71838e,
    0 14px 24px rgb(0 0 0 / 42%);
}

.icon-storm .weather-motion {
  display: block;
  top: 57%;
  width: clamp(92px, 9vw, 138px);
  height: clamp(38px, 4.5vh, 58px);
  transform: translateX(-50%) scale(var(--weather-scale));
}

.icon-storm .weather-motion i {
  position: absolute;
  top: -8px;
  width: clamp(4px, 0.35vw, 6px);
  height: clamp(12px, 1.3vw, 18px);
  border-radius: 70% 30% 65% 35%;
  background: #38bdf8;
  opacity: 0;
  animation: weather-rain-drop 0.9s linear infinite;
}

.icon-storm::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 48%;
  z-index: 2;
  width: clamp(30px, 3vw, 48px);
  height: clamp(48px, 5vw, 74px);
  background: #ffd43b;
  filter: drop-shadow(0 0 8px rgb(255 212 59 / 72%));
  clip-path: polygon(46% 0, 100% 0, 62% 43%, 92% 43%, 25% 100%, 43% 57%, 6% 57%);
  transform: translateX(-50%) scale(var(--weather-scale));
  transform-origin: top center;
  animation: weather-lightning 4.8s steps(1) infinite;
}

@keyframes weather-sun-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--weather-scale)); }
  50% { transform: translate(-50%, -50%) scale(calc(var(--weather-scale) + 0.04)); }
}

@keyframes weather-rays {
  to { transform: rotate(360deg); }
}

@keyframes weather-cloud-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--weather-scale)); }
  50% { transform: translate(calc(-50% + 4px), calc(-50% - 2px)) scale(var(--weather-scale)); }
}

@keyframes weather-partly-sun {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--weather-scale)); }
  50% { transform: translate(-50%, -50%) scale(calc(var(--weather-scale) + 0.04)); }
}

@keyframes weather-rain-drop {
  0% { opacity: 0; transform: translateY(-8px) rotate(18deg); }
  18% { opacity: 1; }
  82% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(46px) rotate(18deg); }
}

@keyframes weather-fog-drift {
  0%, 100% { opacity: 0.62; transform: translateX(calc(-50% - 7px)); }
  50% { opacity: 1; transform: translateX(calc(-50% + 7px)); }
}

@keyframes weather-snow-fall {
  0% { opacity: 0; transform: translate(-3px, -5px) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(7px, 48px) rotate(180deg); }
}

@keyframes weather-lightning {
  0%, 46%, 49%, 52%, 100% { opacity: 0; }
  47%, 50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-icon *,
  .weather-icon::before,
  .weather-icon::after {
    animation: none !important;
  }

  .icon-rain .weather-motion i,
  .icon-drizzle .weather-motion i,
  .icon-snow .weather-motion i,
  .icon-storm .weather-motion i {
    opacity: 0.9;
    transform: translateY(18px) rotate(18deg);
  }

  .icon-storm::after {
    opacity: 1;
  }
}

/* Nachtvarianten: kühle Wolken und ein CSS-Sichelmond statt der Sonne. */
.weather-icon.is-night.icon-sun > span {
  overflow: hidden;
  background: linear-gradient(145deg, #fffde1 8%, #e8e7b9 76%);
  box-shadow:
    0 0 0 10px rgb(232 231 185 / 10%),
    0 0 34px rgb(226 239 255 / 52%);
  animation: weather-moon-float 5s ease-in-out infinite;
}

.weather-icon.is-night.icon-sun > span::before {
  content: none;
}

.weather-icon.is-night.icon-sun > span::after {
  content: "";
  position: absolute;
  left: 35%;
  top: -19%;
  width: 94%;
  height: 94%;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: -5px 6px 12px rgb(55 76 96 / 28%);
}

.weather-icon.is-night.icon-sun::before {
  content: "";
  position: absolute;
  left: 24%;
  top: 27%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #eaf5ff;
  box-shadow:
    clamp(52px, 7vw, 108px) clamp(5px, 1vh, 10px) 0 -1px #eaf5ff,
    clamp(20px, 3vw, 46px) clamp(34px, 6vh, 58px) 0 -1px #b9ddf2,
    clamp(68px, 9vw, 132px) clamp(45px, 8vh, 76px) 0 -2px #eaf5ff;
  animation: weather-stars 3.8s ease-in-out infinite;
}

.weather-icon.is-night.icon-partly::before,
.weather-icon.is-night.icon-cloud::before,
.weather-icon.is-night.icon-rain::before,
.weather-icon.is-night.icon-drizzle::before,
.weather-icon.is-night.icon-snow::before,
.weather-icon.is-night.icon-fog::before,
.weather-icon.is-night.icon-storm::before {
  content: "";
  position: absolute;
  left: 39%;
  top: 32%;
  z-index: 0;
  width: clamp(52px, 6vw, 88px);
  height: clamp(52px, 6vw, 88px);
  border-radius: 50%;
  background: linear-gradient(145deg, #fffde1 8%, #dcdfb3 78%);
  box-shadow: 0 0 24px rgb(226 239 255 / 38%);
  -webkit-mask: radial-gradient(circle at 68% 32%, transparent 0 39%, #000 41%);
  mask: radial-gradient(circle at 68% 32%, transparent 0 39%, #000 41%);
  transform: translate(-50%, -50%) scale(var(--weather-scale));
  animation: weather-night-moon 5s ease-in-out infinite;
}

.weather-icon.is-night.icon-cloud > span,
.weather-icon.is-night.icon-partly > span,
.weather-icon.is-night.icon-rain > span,
.weather-icon.is-night.icon-drizzle > span,
.weather-icon.is-night.icon-snow > span,
.weather-icon.is-night.icon-fog > span {
  z-index: 1;
  background: linear-gradient(180deg, #dce8ed 0%, #8298a4 100%);
  box-shadow:
    -34px 4px 0 -9px #aabac2,
    34px 6px 0 -11px #718892,
    0 14px 24px rgb(0 0 0 / 44%);
}

.weather-icon.is-night.icon-cloud > span::before,
.weather-icon.is-night.icon-partly > span::before,
.weather-icon.is-night.icon-rain > span::before,
.weather-icon.is-night.icon-drizzle > span::before,
.weather-icon.is-night.icon-snow > span::before,
.weather-icon.is-night.icon-fog > span::before {
  background: linear-gradient(145deg, #e6eff2 10%, #9cafb8 86%);
}

.weather-icon.is-night.icon-cloud > span::after,
.weather-icon.is-night.icon-partly > span::after,
.weather-icon.is-night.icon-rain > span::after,
.weather-icon.is-night.icon-drizzle > span::after,
.weather-icon.is-night.icon-snow > span::after,
.weather-icon.is-night.icon-fog > span::after {
  background: linear-gradient(145deg, #cbd9df 10%, #748b96 88%);
}

.weather-icon.is-night.icon-fog .weather-motion i {
  background: linear-gradient(90deg, transparent 0%, #7899a8 12%, #c8e0e7 50%, #7899a8 88%, transparent 100%);
}

.weather-icon.is-night.icon-storm > span {
  z-index: 1;
  background: linear-gradient(180deg, #92a3ad 0%, #465966 100%);
  box-shadow:
    -34px 4px 0 -9px #667985,
    34px 6px 0 -11px #3e515d,
    0 14px 24px rgb(0 0 0 / 55%);
}

.weather-icon.is-night .weather-motion,
.weather-icon.is-night.icon-storm::after {
  z-index: 2;
}

@keyframes weather-moon-float {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--weather-scale)); }
  50% { transform: translate(-50%, calc(-50% - 3px)) scale(var(--weather-scale)); }
}

@keyframes weather-night-moon {
  0%, 100% { opacity: 0.86; transform: translate(-50%, -50%) scale(var(--weather-scale)); }
  50% { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(var(--weather-scale)); }
}

@keyframes weather-stars {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}