/* ==========================================================
   Animowany gradient w banerach (port "BackgroundGradientAnimation")
   Użycie: dodaj klasę "gradient-hero" do sekcji banera
   i podłącz /gradient-hero.js — warstwa z plamami doda się sama.
   ========================================================== */
:root {
  /* Kolory marki OsuszWyciek. Wersja z przykładu (fiolet/róż):
     --gh-start: rgb(108,0,162); --gh-end: rgb(0,17,82);
     --gh-1: 18,113,255; --gh-2: 221,74,255; --gh-3: 100,220,255;
     --gh-4: 200,50,50; --gh-5: 180,180,50; --gh-pointer: 140,100,255; */
  --gh-start: rgb(9, 52, 92);
  --gh-end: rgb(4, 18, 40);
  --gh-1: 17, 121, 184;    /* niebieski marki */
  --gh-2: 6, 182, 196;     /* turkus marki */
  --gh-3: 100, 220, 255;   /* jasny błękit */
  --gh-4: 110, 70, 230;    /* fiolet – akcent */
  --gh-5: 34, 211, 238;    /* cyjan */
  --gh-pointer: 120, 200, 255;
  --gh-size: 80%;
  --gh-blend: hard-light;
}

.gradient-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(40deg, var(--gh-start), var(--gh-end)) !important;
  color: #eaf3fb;
}
.gradient-hero > *:not(.gh-layer) { position: relative; z-index: 2; }

.gh-layer {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}
.gh-layer > div {
  position: absolute;
  width: var(--gh-size); height: var(--gh-size);
  top: calc(50% - var(--gh-size) / 2);
  left: calc(50% - var(--gh-size) / 2);
  mix-blend-mode: var(--gh-blend);
  will-change: transform;
}
.gh-1 {
  background: radial-gradient(circle at center, rgba(var(--gh-1), 0.8) 0, rgba(var(--gh-1), 0) 50%) no-repeat;
  transform-origin: center center;
  animation: ghVertical 30s ease infinite;
}
.gh-2 {
  background: radial-gradient(circle at center, rgba(var(--gh-2), 0.8) 0, rgba(var(--gh-2), 0) 50%) no-repeat;
  transform-origin: calc(50% - 400px);
  animation: ghCircle 20s reverse infinite;
}
.gh-3 {
  background: radial-gradient(circle at center, rgba(var(--gh-3), 0.8) 0, rgba(var(--gh-3), 0) 50%) no-repeat;
  transform-origin: calc(50% + 400px);
  animation: ghCircle 40s linear infinite;
}
.gh-4 {
  background: radial-gradient(circle at center, rgba(var(--gh-4), 0.8) 0, rgba(var(--gh-4), 0) 50%) no-repeat;
  transform-origin: calc(50% - 200px);
  animation: ghHorizontal 40s ease infinite;
  opacity: 0.7;
}
.gh-5 {
  background: radial-gradient(circle at center, rgba(var(--gh-5), 0.8) 0, rgba(var(--gh-5), 0) 50%) no-repeat;
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: ghCircle 20s ease infinite;
}
.gh-layer > .gh-pointer {
  width: 100%; height: 100%;
  top: -50%; left: -50%;
  background: radial-gradient(circle at center, rgba(var(--gh-pointer), 0.8) 0, rgba(var(--gh-pointer), 0) 50%) no-repeat;
  opacity: 0.7;
}

@keyframes ghHorizontal {
  0%   { transform: translateX(-50%) translateY(-10%); }
  50%  { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}
@keyframes ghCircle {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ghVertical {
  0%   { transform: translateY(-50%); }
  50%  { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}

/* Telefony: lżejsze rozmycie, bez plamy za kursorem */
@media (max-width: 768px) {
  .gh-layer { filter: blur(28px); }
  .gh-layer > .gh-pointer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-layer > div { animation: none; }
}

/* ── Jasny tekst na ciemnym gradiencie (banery podstron i bloga; strona główna ma własne style) ── */
.gh-light h1 { color: #fff; }
.gh-light h1 em { color: #8af0ff; }
.gh-light p { color: rgba(234, 243, 251, 0.86); }
.gh-light .eyebrow { color: #bfe6f4; }
.gh-light .crumbs,
.gh-light .breadcrumb,
.gh-light .post-meta span { color: rgba(234, 243, 251, 0.7); }
.gh-light .crumbs a,
.gh-light .breadcrumb a,
.gh-light p a { color: #8af0ff; }
.gh-light .post-meta .tag { color: #eaf3fb; border-color: rgba(234, 243, 251, 0.35); }
.gh-light .hero-price { color: #eaf3fb; }
.gh-light .hero-price strong { color: #8af0ff; }
.gh-light .link-arrow { color: #dff3fb; border-color: rgba(223, 243, 251, 0.35); }
.gh-light .link-arrow:hover { color: #8af0ff; border-color: #8af0ff; }
.gh-light .btn-primary { background: var(--amber); color: #fff; }
.gh-light .btn-primary:hover { background: var(--amber-deep); color: #fff; }
.gradient-hero { border-bottom: none !important; }

/* Czytelność tekstu na jasnych plamach */
.gradient-hero h1,
.gradient-hero p,
.gradient-hero .eyebrow { text-shadow: 0 1px 18px rgba(4, 18, 40, 0.55); }
.gradient-hero h1 em { filter: drop-shadow(0 2px 14px rgba(4, 18, 40, 0.6)); }
#home.gradient-hero h1 em { background: linear-gradient(100deg, #ffffff, #8af0ff 60%, #c9f7ff); -webkit-background-clip: text; background-clip: text; text-shadow: none; }