/* ==========================================================================
   Ikony pogodowe (assets/functions/ikony-pogody.php)

   Ikony są rysowane w SVG wprost w kodzie strony, więc wygląd ustawiamy tutaj,
   a nie w PHP. Dzięki temu jedna zmiana koloru działa na wszystkich stronach,
   a motyw ciemny i tryb kontrastowy dostają własne barwy.

   Wszystkie kształty mieszczą się w polu 64x64. Rozmiar ustawia klasa
   modyfikująca (ip--maly, ip--duzy) albo kontekst, w którym ikona stoi.
   ========================================================================== */

:root {
  --ip-slonce: #f3a712;
  --ip-slonce-promien: #f3a712;
  --ip-ksiezyc: #e8c15f;
  --ip-ksiezyc-cien: rgba(120, 130, 150, .28);
  --ip-chmura: #c3cedd;
  --ip-chmura-ciemna: #93a1b5;
  --ip-deszcz: #3d8bd4;
  --ip-snieg: #62b6e8;
  --ip-blyskawica: #f0b429;
  --ip-mgla: #97a4b6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ip-slonce: #ffc043;
    --ip-slonce-promien: #ffc043;
    --ip-ksiezyc: #ffd97a;
    --ip-ksiezyc-cien: rgba(200, 214, 235, .18);
    --ip-chmura: #8e9bad;
    --ip-chmura-ciemna: #64707f;
    --ip-deszcz: #5aa7ec;
    --ip-snieg: #7fd0f5;
    --ip-blyskawica: #ffcc4d;
    --ip-mgla: #8b98aa;
  }
}

[data-motyw="ciemny"] {
  --ip-slonce: #ffc043;
  --ip-slonce-promien: #ffc043;
  --ip-ksiezyc: #ffd97a;
  --ip-ksiezyc-cien: rgba(200, 214, 235, .18);
  --ip-chmura: #8e9bad;
  --ip-chmura-ciemna: #64707f;
  --ip-deszcz: #5aa7ec;
  --ip-snieg: #7fd0f5;
  --ip-blyskawica: #ffcc4d;
  --ip-mgla: #8b98aa;
}

[data-motyw="jasny"] {
  --ip-slonce: #f3a712;
  --ip-slonce-promien: #f3a712;
  --ip-ksiezyc: #e8c15f;
  --ip-ksiezyc-cien: rgba(120, 130, 150, .28);
  --ip-chmura: #c3cedd;
  --ip-chmura-ciemna: #93a1b5;
  --ip-deszcz: #3d8bd4;
  --ip-snieg: #62b6e8;
  --ip-blyskawica: #f0b429;
  --ip-mgla: #97a4b6;
}

/* Tryb wysokiego kontrastu: ikona ma być czytelna, a nie ładna */
[data-kontrast="tak"] {
  --ip-slonce: currentColor;
  --ip-slonce-promien: currentColor;
  --ip-ksiezyc: currentColor;
  --ip-ksiezyc-cien: transparent;
  --ip-chmura: currentColor;
  --ip-chmura-ciemna: currentColor;
  --ip-deszcz: currentColor;
  --ip-snieg: currentColor;
  --ip-blyskawica: currentColor;
  --ip-mgla: currentColor;
}

.ip {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  overflow: visible;
}

.ip--maly {
  width: 30px;
  height: 30px;
}

.ip--sredni {
  width: 44px;
  height: 44px;
}

.ip--duzy {
  width: 84px;
  height: 84px;
}

/* --- Elementy --- */

.ip__slonce {
  fill: var(--ip-slonce);
}

.ip__promienie line {
  stroke: var(--ip-slonce-promien);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.ip__ksiezyc {
  fill: var(--ip-ksiezyc);
}

/* Nieoświetlona część tarczy - ledwie widoczny zarys, tak jak na niebie */
.ip__ksiezyc-cien {
  fill: var(--ip-ksiezyc-cien);
}

.ip__chmura {
  fill: var(--ip-chmura);
}

.ip__chmura--ciemna {
  fill: var(--ip-chmura-ciemna);
}

.ip__deszcz line {
  stroke: var(--ip-deszcz);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.ip__snieg line {
  stroke: var(--ip-snieg);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.ip__blyskawica {
  fill: var(--ip-blyskawica);
}

.ip__mgla line {
  stroke: var(--ip-mgla);
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* --- Delikatny ruch ---
   Tyle, żeby ikona wyglądała na żywą, a nie żeby przyciągała wzrok.
   Kto wyłączył animacje w systemie, dostaje nieruchomą. */

@media (prefers-reduced-motion: no-preference) {
  .ip--bezchmurnie .ip__promienie,
  .ip--przejasnienia .ip__promienie,
  .ip--pochmurno-slonce .ip__promienie,
  .ip--przelotny .ip__promienie {
    animation: ip-obrot 60s linear infinite;
    transform-origin: center;
  }

  .ip--deszcz .ip__deszcz line,
  .ip--mzawka .ip__deszcz line,
  .ip--przelotny .ip__deszcz line {
    animation: ip-kropla 1.6s ease-in infinite;
  }

  .ip--deszcz .ip__deszcz line:nth-child(2),
  .ip--mzawka .ip__deszcz line:nth-child(2),
  .ip--przelotny .ip__deszcz line:nth-child(2) {
    animation-delay: .5s;
  }

  .ip--deszcz .ip__deszcz line:nth-child(3),
  .ip--mzawka .ip__deszcz line:nth-child(3) {
    animation-delay: 1s;
  }

  .ip--burza .ip__blyskawica {
    animation: ip-blysk 4s ease-in-out infinite;
  }
}

@keyframes ip-obrot {
  to { transform: rotate(360deg); }
}

@keyframes ip-kropla {
  0%   { opacity: 0; transform: translateY(-4px); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(6px); }
}

@keyframes ip-blysk {
  0%, 82%, 100% { opacity: 1; }
  86%, 94%      { opacity: .35; }
}