/* Manifest sekcja po hero - tlo identyczne jak koniec rakiety (glebia kosmosu),
   interaktywne gwiazdy reagujace na kursor, 3-liniowy naglowek jedzie poziomo w
   miare przewijania. BEZ pina/sticky - sekcja przewija sie normalnie, jak kazda inna,
   scroll nigdy sie nie zatrzymuje ani nie "trzyma" w miejscu. Ruch linii to czysty
   parallax zwiazany z pozycja sekcji w viewport, nie scroll-jacking. */

/* Efekt "manifesto nachodzi na hero": ujemny margin-top MUSI byc rowny pelnej wysokosci
   ekranu (100vh), nie mniej. Matematyka: sticky pin hero odpina sie gdy scrollY osiagnie
   (wysokosc-hero - 100vh). Manifesto w calosci zakrywa hero (gora manifesto = gora
   viewportu) gdy scrollY osiagnie (wysokosc-hero - margin). Zeby hero stalo w miejscu
   PRZEZ CALY czas wjazdu manifesto (nie tylko czesciowo), margin musi byc >= 100vh -
   inaczej hero odpina sie zanim manifesto zdazy w pelni zakryc ekran i oba "jada razem"
   pod koniec. +40vh holdu w hero-scroll-video.css/.js zostaje (zapobiega odpieciu W
   TRAKCIE aktywnego scrubowania klatek), ale to margin=100vh daje pelne pokrycie. */
/* 240vh bylo za duzo - zbyt duzy pusty odstep gwiazd nad/pod tekstem. 140vh dalej mialo
   zauwazalny "pusty ogon" po tym jak cala tresc juz sie rozswietlila. Probowalem 100vh -
   za malo: .manifesto__pin ma overflow:hidden + align-items:center, a przy 100vh
   faktyczna wysokosc tresci (3 ogromne linie naglowka + akapit) jest WIEKSZA niz
   dostepna przestrzen, wiec wyśrodkowanie w pionie ucinalo symetrycznie gore i dol
   (stad "DIGITAL" obciete na gorze). 120vh - kompromis: krocej niz 140vh (mniej pustego
   ogona), ale z zapasem zeby tresc sie miescila bez ciecia. */
.manifesto {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 120vh;
    margin-top: -100vh;
    background: #000408;
}

/* height 100% (nie tylko min-height) - wypelnia cala (wydluzona) wysokosc .manifesto,
   zeby dodatkowy dystans scrolla dawal wiecej czasu z tekstem na ekranie (flex center),
   a nie pusta przestrzen z gwiazdami PO tresci. */
.manifesto__pin {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    /* overflow-x: CLIP (nie hidden) - hidden/auto/scroll na KTORYMKOLWIEK
       axisie zmusza przegladarke (spec CSS Overflow, "visible -> auto"
       interop rule) do zamiany DRUGIEGO axisu z "visible" na "auto" NIEZALEZNIE
       od tego, co jawnie wpiszesz - zmierzone: nawet jawne overflow-y:visible
       obok overflow-x:hidden dalej dawalo computed overflow-y:auto, co
       blokowalo position:sticky rakiety tak samo jak hidden. "clip" jest
       zwolnione z tej reguly (nie tworzy kontekstu przewijania), wiec tnie
       linie naglowka w poziomie bez psucia sticky w pionie. */
    overflow-x: clip;
    overflow-y: visible;
    /* GRID Z JEDNA KOMORKA (bylo flex) - .manifesto__content i
       .manifesto__crew-rocket siedzą w TEJ SAMEJ komorce (grid-area 1/1),
       wiec moga sie nakladac/pozycjonowac niezaleznie (jeden justify-self:
       stretch na cala szerokosc, drugi justify-self:end po prawej), bez
       walki o miejsce w wierszu jak w flex. To pozwala rakiecie byc
       position:sticky (potrzebuje normalnego, nie-absolutnego flow) a mimo
       to stac po prawej stronie, nie w wierszu z tekstem. */
    display: grid;
    background: #000408;
}

.manifesto__stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

.manifesto__content {
    grid-area: 1 / 1;
    align-self: center;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 12vh 0 4vh;
    text-align: left;
}

/* Zaloga na rakietach - obok hasla, po prawej stronie (miejsce zostaje wolne,
   bo .manifesto__body ma max-width: 36ch). Niewidoczna domyslnie - JS
   (manifesto.js) steruje wjazdem/wygaszeniem przez --rocket-opacity, oraz
   delikatnym "oddychaniem" (unoszenie + rotacja) przez --rocket-float-y i
   --rocket-rotate.
   POSITION: STICKY (bylo absolute + JS liczacy fikcyjny "travel" transform) -
   user: "ma isc rowno z kamera, przypieta, az podrozuje do konca sekcji".
   To dokladnie opisuje natywne sticky: trzyma sie stale w tym samym miejscu
   ekranu w trakcie scrolla przez sekcje (zero opoznienia, bo liczy to sama
   przegladarka, nie JS-owy lerp), a pod koniec sekcji odpina sie i jedzie
   dalej razem z tresca - naturalnie "podrozujac do konca". */
.manifesto__crew-rocket {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 18vh;
    z-index: 2;
    margin-right: clamp(16px, 5vw, 70px);
    width: clamp(280px, 30vw, 560px);
    max-height: 68vh;
    height: auto;
    opacity: var(--rocket-opacity, 0);
    transform: translateY(var(--rocket-float-y, 0px)) rotate(var(--rocket-rotate, 0deg));
    pointer-events: none;
    filter: drop-shadow(0 20px 50px rgba(204, 0, 166, .25));
}

@media (max-width: 1100px) {
    /* Ponizej tej szerokosci naglowek (clamp do 7.5rem) zaczyna realnie
       siegac w prawa polowe ekranu - rakieta by na niego nachodzila. */
    .manifesto__crew-rocket {
        display: none;
    }
}

/* Naglowek 3-liniowy - lekka waga, ogromny rozmiar, kazda linia jedzie poziomo
   wlasnym torem (JS ustawia --line-shift, wygladzone lerpem). Wartosci typograficzne
   (waga 300, clamp(5rem,14vw,18rem), letter-spacing -0.04em, line-height 0.95,
   padding-left 4vw per linia) 1:1 z klikon2.klikonmedia.pl. */
.manifesto__headline {
    margin: 0;
    font-family: 'Archivo Black', var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.manifesto__line {
    display: block;
    font-size: clamp(2.4rem, 7vw, 7.5rem);
    /* Wieksze wciecie od lewej (bylo 4vw) - tekst ma omijac logo w belce
       i nie kleic sie do krawedzi ekranu (prosba usera). */
    padding-left: clamp(24px, 9vw, 190px);
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
    transform: translateX(var(--line-shift, 0px));
}

/* Dokladnie ten gradient co na przyciskach i w stopce - te same cztery stopy,
   ten sam kat 135deg. Roznica jest tylko w skali: na przycisku kolory leza na
   ~270 px i czytaja sie zywo, a rozciagniete na pol metra litery na czerni
   robily sie ciemne i wygaszone. Stad filter brightness/saturate - podnosi
   jasnosc TEGO SAMEGO gradientu zamiast podmieniac go na inny. */
.manifesto__line--accent {
    background: linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    filter: brightness(1.5) saturate(1.1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tresc pod naglowkiem - ta sama technika co uslugi/hero: slowa domyslnie przygaszone
   i lekko rozmyte, rozswietlaja sie progresywnie w miare scrolla (klasa .is-lit z JS).
   Wybrane frazy (is-accent, oznaczone w PHP) po rozswietleniu dostaja kolor marki. */
.manifesto__body {
    margin: clamp(48px, 8vw, 96px) 0 0;
    /* 36ch - kompromis miedzy 29ch (za waskie, kazde zdanie lądowalo na wlasnej linii)
       a 44ch (za szerokie wg usera). */
    max-width: 36ch;
    padding-left: clamp(24px, 9vw, 190px);
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.6;
    letter-spacing: -0.005em;
    font-size: clamp(1.5rem, 3.2vw, 3.2rem);
}

.manifesto__body-word {
    display: inline-block;
    color: rgba(255, 255, 255, 0.3);
    filter: blur(2px);
    transition: color 0.4s ease, filter 0.4s ease;
}
.manifesto__body-word.is-lit {
    color: #ffffff;
    filter: blur(0);
}
.manifesto__body-word--accent.is-lit {
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Fraza "głównie obsługujemy ziemskich klientów" - cienka pochyla, malymi
   literami (kontrast z wersalikami reszty akapitu). */
.manifesto__body-word--thin {
    font-weight: 300;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

/* Ikony wplecione w tekst - delikatny parallax (--mf-par z manifesto.js),
   kazda z wlasna glebia (data-mf-depth przeliczane w JS na przesuniecie). */
.manifesto__icon {
    display: inline-block;
    width: .8em;
    height: .8em;
    vertical-align: -.06em;
    opacity: 1;
    transform: translate3d(0, var(--mf-icon-y, 0px), 0);
    filter: drop-shadow(0 0 10px rgba(204, 0, 166, .45));
}

.manifesto__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Kontener na <defs> z gradientem - nie zajmuje miejsca w layoucie. */
.manifesto__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ── Mobile ───────────────────────────────────────────────────
   Desktopowa wersja miala na telefonie dwa zlamania (audyt 2026-09-16):
   1. pin 100vh + align-items:center przy tresci WYZSZEJ niz ekran wpychal
      gore tekstu pod belke - body nachodzilo na logo;
   2. sztywne 120vh sekcji przy krotkiej tresci zostawialo ~1200px pustych
      gwiazd po akapicie.
   Fix: wysokosc z TRESCI (auto + min 100svh), wyrownanie od gory, padding-top
   pod belka, umiarkowany ogon gwiazd na dole (24svh - kosmos ma oddychac,
   ale nie przez polkilometra scrolla). margin-top -100vh zostaje - to
   mechanika nachodzenia na hold hero, wspolna dla wszystkich szerokosci. */
@media (max-width: 768px) {
    /* Wysokosc CALKOWICIE z tresci - wczesniejsze min-height:100svh + ogon
       24svh dawaly ponad ekran pustych gwiazd miedzy akapitem a sekcja
       astronauty (zgloszone: "duza przestrzen przy scrollu w dol"). Krotki
       oddech 10svh wystarcza; pod spodem i tak zaczyna sie czarny kosmos
       astronauty, wiec przejscie zostaje bezszwowe. */
    /* PRZYPIECIE I REALNY BUDZET PRZEWIJANIA.
       Bylo "height: auto", czyli sekcja miala tyle, co tresc: 772 px, ok. 0.9
       ekranu. Sasiedzi maja po 6.6 (astronauta) i 7.4 (hero), wiec jedno
       machniecie palcem (1500-2000 px na telefonie) przerzucalo przez cale
       manifesto prosto do astronauty - zgloszone jako "przeskakuje mi do
       trzeciej, czwartej sekcji".
       Teraz 300svh sekcji przy przypietym ekranie daje ok. 2.4 ekranu
       przewijania z trescia nieruchomo na srodku. Odslanianie slowo po slowie
       liczy sie wtedy z postepu SEKCJI, nie z pozycji akapitu (manifesto.js,
       funkcja computeBodyProgress) - przy przypieciu akapit stoi w miejscu,
       wiec jego wlasny prostokat nic by juz nie powiedzial. */
    .manifesto {
        height: auto;
        min-height: 0;
        /* ZAPAS PRZEWIJANIA, ZEBY SEKCJA NIE PRZELATYWALA.
           Rakieta ma 7.4 ekranu przewijania na jeden ekran tresci, wiec palec
           porusza ja wolno. Manifesto mialo 0.91 ekranu - ten sam gest
           przelatywal je w calosci i sekcja "wystrzeliwala". 180svh wyrownuje
           tempo: po rakiecie nie ma nagłego przyspieszenia.
           BEZ position:sticky - przypiecie probowalem wczesniej i to ono
           zacinalo (walczylo z parallaxem linii). Tu sekcja po prostu jest
           wyzsza, tresc zostaje w normalnym przeplywie, a dodatkowa wysokosc
           wypelnia gwiezdne tlo (canvas i tak rysuje sie na cala sekcje). */
        min-height: 0;

        /* KONIEC NACHODZENIA NA HERO (mobile).
           Poza telefonem sekcja ma margin-top: -100vh i wjezdza na koncowke
           rakiety - na desktopie to dziala, bo scroll jest precyzyjny.
           Na dotyku bylo zrodlem problemu: sekcja zaczynala sie 844 px PRZED
           koncem hero, wiec w chwili, gdy wychodzila zza rakiety, jej wlasna
           animacja byla juz w cwierci drogi i tresc wpadala w kadr rozpedzona.
           Tutaj sekcja po prostu zaczyna sie tam, gdzie konczy sie poprzednia. */
        margin-top: 0;
    }

    .manifesto__pin {
        height: auto;
        min-height: 0;
        /* Baza (desktop) jest teraz display:grid (trik pod position:sticky
           rakiety) - telefon tego nie potrzebuje, wraca do zwyklego flex
           column, zeby order: dzialal (grid-area/justify-self z bazy sa tu
           po prostu ignorowane, nieszkodliwie). */
        display: flex;
        align-items: flex-start;
        /* Kolumna + order, zeby rakieta (pierwsze dziecko w DOM, przed
           .manifesto__content w markupie) renderowala sie POD tekstem na
           telefonie, nie nad nim/obok niego. */
        flex-direction: column;
        /* NIE nadpisujemy tu overflow - zostaje overflow-x:clip z bazy.
           Probowalem kiedys "overflow: visible" (szukajac przyczyny zepsutego
           scrolla na telefonie) i to byl blad: klip w poziomie trzyma linie
           naglowka, ktore jada poziomo razem ze scrollem (--line-shift, do
           13vw). Bez niego wystawaly do 54 px poza ekran, dokument robil sie
           szerszy niz viewport, a przegladarka oddalala caly widok - belka
           nawigacji rozciagala sie i ucinala hamburgera (zgloszenie usera).
           Zepsuty scroll miala na sumieniu zupelnie inna wlasciwosc:
           overscroll-behavior-y: contain w hero-scroll-video.css. */
    }

    .manifesto__content {
        order: 1;
        padding: calc(var(--nav-height, 64px) + 40px) 0 24px;
    }

    .manifesto__line {
        font-size: clamp(2.1rem, 10.5vw, 2.9rem);
        white-space: normal;
        padding-left: 20px;
    }

    .manifesto__body {
        margin-top: 40px;
        /* Wiekszy stopien (bylo 5.6vw) - prosba usera. */
        font-size: clamp(1.35rem, 6.6vw, 1.75rem);
        line-height: 1.5;
        padding-left: 20px;
        padding-right: 16px;
        max-width: none;
    }

    /* Zaloga na telefonie: NIE podrozuje ze scrollem (user: na mobile ma po
       prostu "nagle sie pojawic" przy koncu tekstu, tak jak dochodzimy do
       "nie tylko w Google") - zero transform-podrozy, tylko prosty pop-in
       sterowany klasa .is-mobile-visible (dokłada manifesto.js, ten sam
       prog co koniec rozswietlania akapitu). Umieszczona POD tekstem, w
       normalnym przeplywie sekcji, nie na sztywno przypieta do prawej. */
    .manifesto__crew-rocket {
        display: block;
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        left: 50%;
        margin: 32px 0 0;
        width: min(74vw, 320px);
        max-height: none;
        opacity: 0;
        transform: translate(-50%, 20px) scale(.92);
        transition: opacity .5s ease, transform .5s ease;
    }

    .manifesto__crew-rocket.is-mobile-visible {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .manifesto__line { transform: none; }
    .manifesto__body-word { color: #ffffff; filter: none; }
    .manifesto__icon { transform: none; }
}