/* ══════════════════════════════════════════════════════════════════════
   MADD — warstwa tła „gradient mesh"  (2026-08-19)

   PRZENOŚNY. Serwis ma dwa systemy tokenów: strona główna jedzie na
   madd-x.css (--fg/--line/--ivory/--ease), a podstrony na madd-min.css
   (--text/--border/--bg-soft). Dlatego każde var() ma tu wartość
   zapasową — arkusz działa pod obydwoma i nie wymaga żadnego z nich.

   Odpowiada WYŁĄCZNIE za tło. Typografia i animacja wejścia hero na
   stronie głównej siedzą osobno w madd-hero.css, żeby wpięcie mesha na
   podstronę nie przestawiało jej układu (podstrony mają hero wyśrodkowane).

   Użycie:
     <section class="hero mesh-host">
       <div class="hero-mesh" data-hero-mesh aria-hidden="true"></div>
       ...treść...
     </section>
   ══════════════════════════════════════════════════════════════════════ */

.mesh-host{
  position:relative;
  isolation:isolate;          /* canvas z z-index:-1 nie ucieka pod tło strony */
  overflow:hidden;
}

.hero-mesh{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

/* Fallback jest DOMYŚLNY, nie awaryjny: to on maluje tło, dopóki
   madd-hero-mesh.js nie potwierdzi, że kontekst WebGL wstał (klasa
   .has-mesh). Brak JS, brak WebGL, 404 na skrypcie, utrata kontekstu —
   w każdym z tych przypadków zostaje poprawny gradient CSS. */
.hero-mesh::before{
  content:''; position:absolute; inset:-10%;
  background:
    radial-gradient(46% 52% at 18% 26%, rgba(152,56,192,.12), transparent 68%),
    radial-gradient(40% 46% at 76% 16%, rgba(110,84,208,.10), transparent 70%),
    radial-gradient(52% 60% at 62% 82%, rgba(214,203,236,.30), transparent 72%),
    linear-gradient(168deg, var(--ivory, #f9f8f5) 0%, var(--bg, #ffffff) 62%);
  transition:opacity .5s var(--ease, cubic-bezier(.22,.61,.36,1));
}
html[data-wh-theme="dark"] .hero-mesh::before{
  background:
    radial-gradient(46% 52% at 18% 26%, rgba(152,56,192,.24), transparent 68%),
    radial-gradient(40% 46% at 76% 16%, rgba(64,42,140,.26), transparent 70%),
    radial-gradient(52% 60% at 62% 82%, rgba(26,16,48,.52), transparent 72%),
    linear-gradient(168deg, #12101a 0%, var(--bg, #0a0a0a) 64%);
}

.hero-mesh-canvas{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  opacity:0; transition:opacity .9s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hero-mesh.has-mesh .hero-mesh-canvas{ opacity:1 }
.hero-mesh.has-mesh::before{ opacity:0 }

/* Zejście do tła strony. Shader wygasza kolor do własnej bazy, ale nie zna
   tła sekcji pod spodem — bez tego dolna krawędź canvasu rysuje się jako
   prosta linia w poprzek ekranu. */
.mesh-host::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
  z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg, #ffffff) 88%);
}

/* Treść nad tłem. Podstrony trzymają ją w .container, strona główna też. */
.mesh-host > .container{ position:relative; z-index:1 }

@media (prefers-reduced-motion: reduce){
  .hero-mesh-canvas{ transition:none }
}

/* ══════════════════════════════════════════════════════════════════════
   WEJŚCIE HERO — reguły wspólne dla wszystkich szablonów.

   Klasę .js-motion dokłada madd-motion.js i TYLKO wtedy, gdy GSAP
   faktycznie się załadował. Bez skryptu te reguły nie mają na czym
   zadziałać, więc strona jest normalnie widoczna — nigdy odwrotnie.
   ══════════════════════════════════════════════════════════════════════ */

.js-motion h1{ visibility:hidden }
.js-motion.is-ready h1{ visibility:visible }

.js-motion .hero-badge,
.js-motion .eyebrow,
.js-motion .lead,
.js-motion .hero-cta,
.js-motion .hero-meta,
.js-motion .btn-row,
.js-motion .page-hero-cta{ opacity:0 }

/* SplitText tnie nagłówek na wiersze i słowa; wiersz dostaje overflow,
   żeby słowa wjeżdżały zza własnej linii, a nie zza całego bloku. */
.js-motion h1 .split-line{ overflow:hidden; display:block; padding-bottom:.06em }
.js-motion h1 .split-word{ display:inline-block; will-change:transform }

/* Ukryty nośnik oryginalnego markupu nagłówka — patrz madd-motion.js.
   Atrybut hidden by wystarczył, ale reguła jest jawna, żeby żaden arkusz
   z display:block przypadkiem go nie odsłonił. */
.hero-h1-src{ display:none !important }

@media (prefers-reduced-motion: reduce){
  .js-motion h1{ visibility:visible }
  .js-motion .hero-badge,
  .js-motion .eyebrow,
  .js-motion .lead,
  .js-motion .hero-cta,
  .js-motion .hero-meta,
  .js-motion .btn-row,
  .js-motion .page-hero-cta{ opacity:1 }
}