/* =========================================================================
   SOFT FLOW — jasne tło sekcji z delikatnie płynącymi plamami (czysty CSS, bez JS)
   Wyciągnięte z sekcji „Emocje na zdjęciach” / „Relacja z 15. edycji” radombasketcup.pl (20.10.2026).

   Użycie:
     <section class="soft-flow"> ...treść... </section>
     <section class="soft-flow soft-flow--b"> ...wariant B (inny układ plam, wolniej)... </section>

   Jak to działa: pseudo-element ::before z kilkoma radial-gradientami (białe światło, szaro-niebieskie
   plamy, jedna ciepła plama akcentu) ma tło 240% i powoli przesuwa się tam i z powrotem (background-position).
   Animowane jest TYLKO przesunięcie tła — bez blur/filter, więc tanie i bez janku na telefonach.

   Dostrajanie zmiennymi na sekcji (inline albo w CSS):
     --sf-base     kolor bazowy sekcji (jasny)                       #F6F6F6
     --sf-cool     chłodna plama (szaro-niebieska)                   #c2cee1
     --sf-cool-2   druga chłodna plama                                #cdd7e8
     --sf-cool-3   trzecia, najjaśniejsza                             #dfe8f6
     --sf-accent   ciepły akcent jako RGB bez rgb(), np. 255,90,0     255,90,0
     --sf-accent-a siła akcentu 0–1                                   .20
     --sf-duration czas jednego przepływu                             20s
   Treść sekcji sama ląduje nad tłem (reguła .soft-flow > *).
   ========================================================================= */
.soft-flow {
  --sf-base: #F6F6F6;
  --sf-cool: #c2cee1;
  --sf-cool-2: #cdd7e8;
  --sf-cool-3: #dfe8f6;
  --sf-accent: 255, 90, 0;
  --sf-accent-a: .20;
  --sf-duration: 20s;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sf-base);
}
.soft-flow::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 48% at 15% 24%, #ffffff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(48% 58% at 86% 38%, var(--sf-cool) 0%, transparent 64%),
    radial-gradient(34% 38% at 66% 70%, rgba(var(--sf-accent), var(--sf-accent-a)) 0%, rgba(var(--sf-accent), 0) 64%),
    radial-gradient(52% 60% at 48% 90%, var(--sf-cool-2) 0%, transparent 66%),
    radial-gradient(38% 44% at 74% 8%, var(--sf-cool-3) 0%, transparent 60%),
    var(--sf-base);
  background-size: 240% 240%;
  animation: soft-flow var(--sf-duration) ease-in-out infinite alternate;
}
/* wariant B: inny układ plam i wolniejsze tempo — żeby dwie sąsiednie sekcje nie wyglądały identycznie */
.soft-flow--b { --sf-base: #EEF2F5; --sf-cool: #bccadd; --sf-cool-2: #cad5e7; --sf-accent-a: .19; --sf-duration: 24s; }
.soft-flow--b::before {
  background:
    radial-gradient(42% 50% at 22% 32%, #ffffff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(50% 60% at 82% 26%, var(--sf-cool) 0%, transparent 64%),
    radial-gradient(32% 36% at 32% 72%, rgba(var(--sf-accent), var(--sf-accent-a)) 0%, rgba(var(--sf-accent), 0) 64%),
    radial-gradient(52% 60% at 58% 90%, var(--sf-cool-2) 0%, transparent 66%),
    var(--sf-base);
  background-size: 240% 240%;
}
.soft-flow > * { position: relative; z-index: 1; }

@keyframes soft-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .soft-flow::before { animation: none; } }

/* ===== Do Celu: paleta zieleń + żółte słońce (nadpisuje domyślne szaro-niebieskie) ===== */
.soft-flow { --sf-base: #F3F7F4; --sf-cool: #C9E2D2; --sf-cool-2: #D8ECDF; --sf-cool-3: #E6F3EA; --sf-accent: 245, 196, 0; --sf-accent-a: .30; --sf-duration: 22s; }
.soft-flow--b { --sf-base: #EEF4F0; --sf-cool: #BFDCCB; --sf-cool-2: #CFE7D8; --sf-accent-a: .26; --sf-duration: 26s; }
/* sekcje Elementora: tło sekcji ma zostać pod plamami, kontener nad nimi */
.elementor-section.soft-flow { background-color: var(--sf-base) !important; }
.elementor-section.soft-flow > .elementor-container { position: relative; z-index: 1; }
/* duch drogi i glow w sekcji soft-flow: absolutne, pod treścią (reguła .soft-flow > * nie może ich wciągać w przepływ) */
.elementor-section.soft-flow > .dc-road-ghost, .elementor-section.soft-flow > .dc-glow, .elementor-section.soft-flow > .liquid { position: absolute; z-index: 0; }