/* Weer op koers: van onweer naar zon en regenboog. */

.celebration[data-mode="weather-storm"] { --c1: #0f172a; --c2: #475569; --c3: #cbd5e1; --glow: rgb(148 163 184 / .6); }
.celebration[data-mode="weather-sun"] { --c1: #0c4a6e; --c2: #38bdf8; --c3: #fef08a; --glow: rgb(253 224 71 / .9); }

.cel-wx-scene { position: absolute; inset: 0; }
.cel-wx-sky { position: absolute; inset: -4vh; }
.cel-wx-sky.is-sun { background: linear-gradient(180deg, #0369a1, #38bdf8 45%, #bae6fd 80%, #fef9c3); }
.cel-wx-sky.is-storm { background: radial-gradient(ellipse at 50% 0%, #334155, #0f172a 60%, #020617); }
.cel-wx-scene.is-amber .cel-wx-sky.is-storm { background: radial-gradient(ellipse at 50% 0%, #57534e, #1c1917 60%, #0c0a09); }
.cel-wx-scene.is-lit .cel-wx-sky.is-storm { filter: brightness(2.2); }
.cel-wx-scene.is-lit .cel-wx-cloud { filter: brightness(1.9); }

.cel-wx-rays {
  position: absolute; left: 50vw; top: 27vh; width: 170vh; height: 170vh; translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgb(254 240 138 / .55) 0deg 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle, #000 8%, rgb(0 0 0 / .4) 30%, transparent 60%);
  transition: opacity 1s;
  animation: cel-spin 30s linear infinite;
}
.cel-wx-rays.is-on { opacity: 1; }

.cel-wx-rainbow {
  position: absolute; left: 2vw; width: 96vw; height: 48vw; top: calc(95vh - 48vw); opacity: .85;
  background: radial-gradient(circle farthest-side at 50% 100%, transparent 79%,
    #8b5cf6 79% 81.5%, #3b82f6 81.5% 84%, #22d3ee 84% 86.5%, #22c55e 86.5% 89%, #facc15 89% 91.5%, #f97316 91.5% 94%, #ef4444 94% 96.5%, transparent 96.5%);
  filter: blur(.25vh) drop-shadow(0 0 2vh rgb(255 255 255 / .5));
  clip-path: inset(0 100% 0 0);
}

.cel-wx-sun {
  position: absolute; left: 50vw; top: 27vh; width: 24vh; height: 24vh; translate: -50% -50%; visibility: hidden;
}
.cel-wx-sun::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffbe6, #fde047 40%, #f59e0b 80%, #ea580c);
  box-shadow: 0 0 6vh 2vh rgb(253 224 71 / .8), 0 0 18vh 6vh rgb(251 146 60 / .45);
  animation: cel-wx-throb 1.6s ease-in-out infinite;
}
@keyframes cel-wx-throb { 50% { box-shadow: 0 0 9vh 3vh rgb(253 224 71 / .95), 0 0 24vh 8vh rgb(251 146 60 / .55); } }
.cel-wx-sun-face { position: absolute; inset: 0; }
.cel-wx-sun-face i { position: absolute; top: 8.4vh; width: 2.2vh; height: 3.2vh; border-radius: 50%; background: #7c2d12; }
.cel-wx-sun-face i.is-left { left: 7vh; }
.cel-wx-sun-face i.is-right { right: 7vh; }
.cel-wx-sun-face b { position: absolute; left: 7vh; right: 7vh; top: 11.6vh; height: 5vh; border-bottom: 1vh solid #7c2d12; border-radius: 0 0 50% 50%; }
.cel-wx-shades { position: absolute; left: 3.6vh; right: 3.6vh; top: 7.4vh; height: 5.4vh; display: flex; align-items: flex-start; visibility: hidden; }
.cel-wx-shades i {
  position: relative; flex: 1; height: 5.4vh; border-radius: .8vh .8vh 2.6vh 2.6vh; overflow: hidden;
  background: linear-gradient(160deg, #334155, #020617 60%); box-shadow: 0 0 0 .4vh #020617;
}
.cel-wx-shades i::after {
  content: ""; position: absolute; inset: -50%; background: linear-gradient(110deg, transparent 42%, rgb(255 255 255 / .8) 50%, transparent 58%);
  translate: -60% 0;
}
.cel-wx-shades.is-glinting i::after { animation: cel-sweep 1.6s ease-in-out infinite; }
.cel-wx-shades span { width: 2.4vh; height: 1.6vh; margin-top: 1vh; border-top: .7vh solid #020617; }

.cel-wx-land { position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; }
.cel-wx-land i {
  position: absolute; bottom: -10vh; height: 22vh; border-radius: 50%; transition: background 1.2s;
  background: #1e293b;
}
.cel-wx-land i:first-child { left: -10vw; width: 70vw; }
.cel-wx-land i:last-child { right: -10vw; width: 65vw; bottom: -12vh; }
.cel-wx-scene.is-sunny .cel-wx-land i { background: linear-gradient(180deg, #4ade80, #15803d); }

.cel-wx-rain { position: absolute; inset: 0; }
.cel-wx-rain i {
  position: absolute; top: 0; width: .3vh; height: 7vh; border-radius: .3vh; rotate: 12deg;
  background: linear-gradient(180deg, transparent, rgb(186 230 253 / .95));
  animation: cel-wx-fall .55s linear infinite;
}
@keyframes cel-wx-fall { from { translate: 0 -12vh; } to { translate: -22vh 108vh; } }

.cel-wx-cloud {
  position: absolute; width: 30em; height: 10em; border-radius: 5em;
  --cloud: linear-gradient(180deg, #64748b, #1e293b);
  background: var(--cloud); box-shadow: 0 2em 3em rgb(0 0 0 / .45);
  animation: cel-wx-bob 3.2s ease-in-out infinite;
}
.cel-wx-cloud::before, .cel-wx-cloud::after { content: ""; position: absolute; border-radius: 50%; background: var(--cloud); }
.cel-wx-cloud::before { width: 13em; height: 13em; left: 3.5em; top: -6em; }
.cel-wx-cloud::after { width: 16em; height: 16em; left: 11em; top: -9em; }
.cel-wx-scene.is-amber .cel-wx-cloud { --cloud: linear-gradient(180deg, #a8a29e, #44403c); }
@keyframes cel-wx-bob { 50% { translate: 1.5em .6em; } }

.cel-wx-bolts { position: absolute; inset: 0; width: 100%; height: 100%; }
.cel-wx-bolt polyline { fill: none; stroke: #fff; stroke-width: .55vh; stroke-linejoin: round; filter: drop-shadow(0 0 1vh #a5b4fc) drop-shadow(0 0 3vh #818cf8); }
.cel-wx-bolt polyline + polyline { stroke-width: .3vh; }
.cel-wx-scene.is-amber .cel-wx-bolt polyline { filter: drop-shadow(0 0 1vh #fde68a) drop-shadow(0 0 3vh #f59e0b); }

.cel-wx-text { position: absolute; left: 4vw; right: 4vw; top: 50vh; display: flex; flex-direction: column; align-items: center; text-align: center; perspective: 60vh; }
.cel-wx-title {
  font-family: var(--font-brand); font-size: 13vh; line-height: 1; opacity: 0; color: #fff;
  text-shadow: 0 .7vh 0 #c2410c, 0 0 1.2vh rgb(124 45 18 / .6), 0 0 4vh rgb(253 224 71 / .9);
}
.cel-wx-name { margin-top: 1vh; font-size: 6vh; font-weight: 700; line-height: 1.1; opacity: 0; color: #fff; text-shadow: 0 .4vh 0 rgb(0 0 0 / .5), 0 0 2vh rgb(0 0 0 / .5); }
.cel-wx-chip {
  margin-top: 2vh; display: inline-flex; align-items: center; gap: 1.2vh; padding: 1vh 2.8vh; border-radius: 99px; opacity: 0;
  font-size: 3.4vh; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: #7f1d1d; color: #fecaca; border: .35vh solid #ef4444; box-shadow: 0 0 3vh rgb(239 68 68 / .6);
}
.cel-wx-scene.is-amber .cel-wx-chip:not(.is-green) { background: #78350f; color: #fde68a; border-color: #f59e0b; box-shadow: 0 0 3vh rgb(245 158 11 / .6); }
.cel-wx-dot { width: 2vh; height: 2vh; border-radius: 50%; background: currentColor; }
.cel-wx-chip.is-alarm .cel-wx-dot { animation: cel-wx-blink .8s steps(2) infinite; }
@keyframes cel-wx-blink { 50% { opacity: .2; } }
.cel-wx-chip.is-green { background: #14532d; color: #bbf7d0; border-color: #4ade80; box-shadow: 0 0 4vh rgb(74 222 128 / .8); }