/* Pogoda nad statycznym tlem, pod trescia. Ruch tylko transform i opacity. */
html.mm-ui-nowe .mm-pogoda { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --krycie: .16; --slabe: .08; --krycie-deszczu: .1; --deszcz: var(--mm-tlo-a2b5d5); --snieg: var(--mm-tlo-e8efff); --mgla: var(--mm-tlo-ccd0da); --chmura: var(--mm-tlo-8295b1); --cien: var(--mm-tlo-445773); }
html.mm-ui-nowe .mm-pogoda::before, html.mm-ui-nowe .mm-pogoda::after, html.mm-ui-nowe .mm-pogoda > span { content: ""; position: absolute; inset: 0; pointer-events: none; }
html.mm-ui-nowe .mm-pogoda::before, html.mm-ui-nowe .mm-pogoda > span { opacity: var(--krycie); }
html.mm-ui-nowe .mm-pogoda[data-efekt="brak"]::before, html.mm-ui-nowe .mm-pogoda[data-efekt="brak"]::after, html.mm-ui-nowe .mm-pogoda[data-efekt="brak"] > span { display: none; }
html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"]::before {
  inset: -10%; background: radial-gradient(ellipse at 15% 10%, var(--mm-tlo-ffb42e), var(--mm-tlo-e97623) 25%, transparent 65%);
  animation: mm-pogoda-slonce 40s ease-in-out infinite alternate;
}
html.mm-ui-nowe .mm-pogoda[data-efekt="chmury"]::before {
  inset: -15%; background: linear-gradient(115deg, transparent, var(--chmura) 40%, var(--cien) 65%, transparent);
  animation: mm-pogoda-chmury 60s ease-in-out infinite alternate;
}
html.mm-ui-nowe .mm-pogoda[data-efekt="deszcz"]::before {
  inset: -100% -10% 0; opacity: var(--krycie-deszczu);
  background: repeating-linear-gradient(110deg, transparent 0 35px, var(--deszcz) 36px, transparent 37px 70px);
  animation: mm-pogoda-deszcz 1.2s linear infinite;
}
html.mm-ui-nowe .mm-pogoda[data-efekt="snieg"]::before {
  inset: -100% 0 0;
  background: radial-gradient(circle, var(--snieg) 1px, transparent 2px) 0 0 / 43px 61px;
  animation: mm-pogoda-snieg 12s linear infinite;
}
html.mm-ui-nowe .mm-pogoda[data-efekt="mgla"]::before {
  background: linear-gradient(to top, var(--mgla), transparent 75%);
  animation: mm-pogoda-mgla 20s ease-in-out infinite alternate;
}
/* Jeden klimat zastepuje ciepla poswiate przy swicie i zmierzchu. */
html.mm-ui-nowe .mm-pogoda .mm-pogoda-klimat { display: none; }
html.mm-ui-nowe .mm-pogoda[data-pora="swit"] .mm-pogoda-klimat {
  display: block; background: radial-gradient(ellipse at 20% 100%, var(--mm-tlo-e5a1b7), var(--mm-tlo-c99a83) 25%, transparent 65%);
}
html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"][data-pora="swit"]::before { background: none; animation: none; }
html.mm-ui-nowe .mm-pogoda[data-pora="zmierzch"] .mm-pogoda-klimat {
  display: block; background: linear-gradient(to top, var(--mm-tlo-a16c2e), var(--mm-tlo-44345e) 55%, transparent); mix-blend-mode: multiply;
}
html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"][data-pora="zmierzch"]::before { background: none; animation: none; }
html.mm-ui-nowe .mm-pogoda[data-pora="zmierzch"]::before, html.mm-ui-nowe .mm-pogoda[data-pora="noc"]::before { mix-blend-mode: multiply; }
html.mm-ui-nowe .mm-pogoda[data-pora="zmierzch"] { mix-blend-mode: multiply; }
html.mm-ui-nowe .mm-pogoda[data-pora="zmierzch"]::after { background: var(--mm-tlo-080817); opacity: .15; }
html.mm-ui-nowe .mm-pogoda[data-pora="noc"] { --deszcz: var(--mm-tlo-465b7b); --snieg: var(--mm-tlo-647792); --mgla: var(--mm-tlo-3d4e6b); --chmura: var(--mm-tlo-3a4c6a); --cien: var(--mm-tlo-17263e); }
html.mm-ui-nowe .mm-pogoda[data-pora="noc"]:not([data-efekt="slonce"]) { mix-blend-mode: multiply; }
html.mm-ui-nowe .mm-pogoda[data-pora="noc"]::after { background: var(--mm-tlo-00000c); opacity: .25; }
html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"][data-pora="noc"]::before { background: none; animation: none; }
html.mm-ui-nowe .mm-pogoda .mm-pogoda-ksiezyc, html.mm-ui-nowe .mm-pogoda .mm-pogoda-gwiazdy { display: none; }
html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"][data-pora="noc"] .mm-pogoda-ksiezyc {
  display: block; inset: 4% 5% auto auto; width: 150px; height: 150px;
  background: radial-gradient(circle, var(--mm-tlo-d3def2) 0 13%, var(--mm-tlo-a7bddb) 17%, var(--mm-tlo-7187af) 18%, var(--mm-tlo-556c9c33) 30%, transparent 65%);
  animation: mm-pogoda-ksiezyc 45s ease-in-out infinite alternate;
}
html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"][data-pora="noc"] .mm-pogoda-gwiazdy {
  display: block;
  background: radial-gradient(circle at 12% 18%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 35% 9%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 55% 24%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 74% 12%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 20% 40%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 65% 45%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px);
  animation: mm-pogoda-gwiazdy 9s ease-in-out infinite alternate;
}
html.mm-ui-nowe .mm-pogoda[data-pauza="1"]::before, html.mm-ui-nowe .mm-pogoda[data-pauza="1"]::after, html.mm-ui-nowe .mm-pogoda[data-pauza="1"] * { animation-play-state: paused !important; }
@keyframes mm-pogoda-slonce { to { transform: translate(4%, 3%); } }
@keyframes mm-pogoda-chmury { to { transform: translateX(8%); } }
@keyframes mm-pogoda-deszcz { to { transform: translateY(70px); } }
@keyframes mm-pogoda-snieg { to { transform: translateY(61px); } }
@keyframes mm-pogoda-mgla { from { opacity: var(--slabe); } to { opacity: var(--krycie); } }
@keyframes mm-pogoda-ksiezyc { to { transform: translateY(4px); } }
@keyframes mm-pogoda-gwiazdy { from { opacity: var(--slabe); } to { opacity: var(--krycie); } }
@media (max-width: 760px) {
  html.mm-ui-nowe .mm-pogoda { --krycie: .112; --slabe: .056; --krycie-deszczu: .07; }
  /* Nieprzezroczysta sekcja telefonu zakrywala warstwe; pod spodem zostaje ciemne tlo strony. */
  html.mm-ui-nowe body.dk-mobil-aktywny:has(.mm-pogoda:not([data-efekt="brak"]), .mm-pogoda-czastki) #mm-dock .dk-mobil { background: transparent; }
  html.mm-ui-nowe .mm-pogoda[data-efekt="deszcz"]::before { background: repeating-linear-gradient(110deg, transparent 0 70px, var(--deszcz) 71px, transparent 72px 140px); }
  html.mm-ui-nowe .mm-pogoda[data-efekt="snieg"]::before { background-size: 86px 122px; }
  html.mm-ui-nowe .mm-pogoda[data-efekt="slonce"][data-pora="noc"] .mm-pogoda-gwiazdy {
    background: radial-gradient(circle at 12% 18%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 55% 24%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px), radial-gradient(circle at 74% 12%, var(--mm-tlo-bbcce8) 1px, transparent 1.5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.mm-ui-nowe .mm-pogoda::before, html.mm-ui-nowe .mm-pogoda::after, html.mm-ui-nowe .mm-pogoda * { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) { html.mm-ui-nowe .mm-pogoda, html.mm-ui-nowe .mm-pogoda-czastki { display: none; } }
html.mm-ui-nowe #mm-dock .dk-pogoda { cursor: default; }

/* Rodzenstwo po gradientach: ta sama warstwa, bez mieszania ich barw z plotnem. */
html.mm-ui-nowe .mm-pogoda-czastki { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; --czastki: .95; opacity: var(--czastki); }
@media (max-width: 760px) { html.mm-ui-nowe .mm-pogoda-czastki { --czastki: .85; } }
html.mm-ui-nowe.mm-szklo-udawane .top,
html.mm-ui-nowe.mm-szklo-udawane #mm-dock .szklo-rozmyte,
html.mm-ui-nowe.mm-szklo-udawane #mm-dock .kl-panel,
html.mm-ui-nowe.mm-szklo-udawane #mm-dock .dk-menu {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--tlo-ziarno), var(--mm-tlo-rgba-9-9-14-94);
}
html.mm-ui-nowe.mm-szklo-udawane #mm-dock .dk-okno:not([data-app="rozmowy"]),
html.mm-ui-nowe.mm-szklo-udawane #mm-dock .dk-mobil-okno {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--tlo-ziarno), linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-05), var(--mm-tlo-rgba-255-255-255-015)), var(--mm-tlo-rgba-9-9-14-74);
}
/* Plansza konsoli przepuszcza wiecej ruchu pod szklem. */
html.mm-ui-nowe.mm-szklo-udawane .hero { background: var(--mm-tlo-rgba-12-11-20-24); }
/* Bez prawdziwego rozmycia tekst konsoli przeswitywalby przez okno: przy otwartym oknie konsola gasnie
   pod przyciemnieniem (z-index 9000), a pogoda wchodzi nad nie, pod okna (9100) i kolumne widzetow (9050). */
@media (min-width: 761px) {
  html.mm-ui-nowe.mm-szklo-udawane body.dk-otwarta:not(.dk-mobil-aktywny) .mm-pogoda-czastki,
  html.mm-ui-nowe.mm-szklo-udawane body.dk-otwarta:not(.dk-mobil-aktywny) .mm-pogoda { z-index: 9001; }
  html.mm-ui-nowe.mm-szklo-udawane body.dk-otwarta:not(.dk-mobil-aktywny) #mm-dock .dk-tlo-rozmyte { background: var(--mm-tlo-rgba-9-9-14-96); }
}

@media (prefers-reduced-transparency: reduce) {
  html.mm-ui-nowe.mm-szklo-udawane #mm-dock .dk-okno:not([data-app="rozmowy"]),
  html.mm-ui-nowe.mm-szklo-udawane #mm-dock .dk-mobil-okno { background: var(--tlo-baza); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

html.mm-ui-nowe .zy-obszar {
  background: radial-gradient(ellipse at 50% 45%, var(--mm-tlo-rgba-7-8-15-42), var(--mm-tlo-rgba-7-8-15-16) 72%);
  border-radius: inherit;
}
/* Jasny deszcz i snieg przeplywaja tez za tekstem lezacym wprost na tle. Ciemny kontur 1 px i poswiata wokol liter
   (technika G18 WCAG) trzymaja kontrast niezaleznie od tego, co jest pod spodem; sama rozmyta poswiata byla za slaba. Tekst z gradientem ma przezroczyste wypelnienie, cien
   przeswitywalby przez litery, wiec go pomijamy. */
html.mm-ui-nowe.mm-szklo-udawane :is(#viewHome, #mm-dock .dk-mobil, #mm-dock .dk-okno) {
  text-shadow: -1px 0 0 var(--mm-cien-07080f), 1px 0 0 var(--mm-cien-07080f), 0 -1px 0 var(--mm-cien-07080f), 0 1px 0 var(--mm-cien-07080f), 0 0 4px var(--mm-cien-rgba-7-8-15-9), 0 0 10px var(--mm-cien-rgba-7-8-15-7);
}
/* Przyciski maja wlasny text-shadow: none, wiec kontur trzeba im przekazac jawnie. */
html.mm-ui-nowe.mm-szklo-udawane :is(#viewHome, #mm-dock .dk-mobil, #mm-dock .dk-okno) button { text-shadow: inherit; }
html.mm-ui-nowe.mm-szklo-udawane :is(.gradtext, .hero h1 .g, .statement .big em, #mm-dock .petla .duza, #mm-dock .wf-naglowek h2) { text-shadow: none; }