/* =========================================================================
   LIQUID GRADIENT — style komponentu (para do liquid-gradient.js)
   .liquid-host  = sekcja z tłem (fallback: animowany gradient CSS)
   .liquid       = warstwa shadera (WebGL montuje tu <canvas>)
   .liquid-host > .liquid-content = treść nad tłem
   Kolory fallbacku zmieniasz zmiennymi --liquid-1 … --liquid-4 (daj te same, co w data-liquid-colors).
   ========================================================================= */
.liquid-host {
  --liquid-1: #022a5c;
  --liquid-2: #034EA2;
  --liquid-3: #006EDF;
  --liquid-4: #FF7A2E;
  --liquid-scrim: 2, 18, 44;          /* RGB cienia pod tekstem (ciemny odcień tła) */
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(120deg, var(--liquid-1) 0%, var(--liquid-2) 34%, var(--liquid-3) 56%, var(--liquid-4) 130%);
  background-size: 240% 240%;
  animation: liquid-flow 22s ease-in-out infinite alternate;
}
@keyframes liquid-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .liquid-host { animation: none; } }

.liquid { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.liquid canvas { display: block; width: 100%; height: 100%; }

/* scrim: przyciemnienie od lewej i od dołu, żeby tekst był czytelny nad płynącym tłem */
.liquid-host--scrim::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--liquid-scrim), .60) 0%, rgba(var(--liquid-scrim), .22) 46%, rgba(var(--liquid-scrim), 0) 72%),
    linear-gradient(180deg, rgba(var(--liquid-scrim), .10), rgba(var(--liquid-scrim), .36));
}

.liquid-content { position: relative; z-index: 2; }