/* Hero scroll-scrubbed video - rocket ignition -> tiny distant point, night.
   241 klatek (10s @ 24fps). Formula: framesCount * vh_per_frame. Baza 550vh (nie 964vh) -
   od kiedy Lenis dziala na calej stronie (wheelMultiplier: 0.55 w smooth-scroll.js), ten
   sam gest scrolla przesuwa stron o polowe mniej niz przed Lenis, wiec sekcja o tej samej
   wysokosci co dawniej rozciagalaby sie na ~2x wiecej realnego scrollowania - stad
   proporcjonalnie mniejsza wysokosc, zeby tempo rakiety zostalo tak jak bylo.
   +40vh na koncu to "hold" - klatki i slowa koncza sie jak wczesniej (JS odejmuje ten
   bufor od liczenia progresu), ale sticky pin hero zostaje przypiety przez caly ten
   dodatkowy zakres zamiast odpinac sie w tym samym momencie co zaczyna sie nachodzenie
   nastepnej sekcji (margin-top w manifesto.css) - bez tego hero "driftowalo" mrozac
   ostatnia klatke w trakcie odpinania, zamiast spokojnie stac w miejscu. */
.hero-scroll {
    position: relative;
    width: 100%;
    height: calc(550vh + 40vh);
    background: var(--color-bg, #0a0a0a);
    overflow: visible;
}

/* Sticky (nie fixed) - pin trzyma sie viewportu przez cala wysokosc .hero-scroll,
   a gdy ta wysokosc sie skonczy, kolejna sekcja normalnie wyjdzie z dolu i wypchnie go w gore. */
.hero-scroll__pin {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.hero-scroll__pin.is-passed {
    pointer-events: none;
}

/**
 * SCENA JEST WIDOCZNA OD PIERWSZEJ KLATKI RENDEROWANIA.
 *
 * Wczesniej cala scena, RAZEM Z PLAKATEM, startowala z opacity 0 i gasla
 * az do momentu, w ktorym doladowalo sie kilkadziesiat klatek sekwencji.
 * Na wolniejszym laczu znaczylo to kilka sekund czarnego ekranu z rakieta,
 * ktorej nie ma - a dokladnie to zglaszali ludzie ("rakieta pojawia sie
 * dopiero pozniej"). Plakat wazy 69 KB i ma fetchpriority high, wiec jest
 * na ekranie natychmiast; nie ma zadnego powodu, zeby go chowac.
 *
 * Teraz gasnie wylacznie PLOTNO i wchodzi przenikaniem nad plakatem, gdy
 * narysuje pierwsza klatke. Czlowiek widzi rakiete od razu, a podmiana
 * plakatu na plotno jest niewidoczna, bo oba pokazuja ten sam kadr.
 */
.hero-scroll__scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
}

.hero-scroll__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-scroll__scene.is-revealed .hero-scroll__canvas { opacity: 1; }

.hero-scroll__poster-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Gradient na dole wideo - maskuje widoczna krawedz miedzy hero a kolejna sekcja,
   dzieki czemu przejscie wyglada jak jedna spojna calosc zamiast dwie sklejone plyty. */
.hero-scroll__fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14vh;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 4, 8, 0) 0%,
        rgba(0, 4, 8, .35) 45%,
        rgba(0, 4, 8, .78) 75%,
        var(--color-bg, #000408) 100%
    );
}

.hero-scroll__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(24px, 4vw, 64px);
}

.hero-scroll__overlay-center {
    text-align: center;
    max-width: 1360px;
    width: 100%;
    pointer-events: auto;
}

.hero-scroll__overlay-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px clamp(40px, 7vw, 120px);
    width: 100%;
    margin: 0;
    transition:
        opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Naglowek znika pod koniec hero (patrz TITLE_FADE_OUT w hero-scroll-video.js),
   zeby przy przejsciu do kolejnej sekcji napisow juz nie bylo widac. */
.hero-scroll__overlay-title.is-hidden {
    opacity: 0;
    transform: translateY(-24px);
    filter: blur(10px);
    pointer-events: none;
}

.hero-scroll__overlay-title-col {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    gap: clamp(14px, 2.2vw, 36px);
}

.hero-scroll__overlay-title-col--left { align-items: center; }
.hero-scroll__overlay-title-col--right { align-items: center; }

.hero-scroll__overlay-title-line {
    display: block;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.hero-scroll__overlay-title-col--left .hero-scroll__overlay-title-line { text-align: left; }
.hero-scroll__overlay-title-col--right .hero-scroll__overlay-title-line { text-align: right; }

/* "W KOSMOS" (duza linia w prawej kolumnie) - przesuniecie w prawo,
   zeby nie nachodzila na rakiete/plomienie. */
.hero-scroll__overlay-title-col--right .hero-scroll__overlay-title-line--stretch {
    margin-left: clamp(40px, 7vw, 110px);
}

/* Mala linia (SWOJ dol-lewa / BIZNES gora-prawa) */
.hero-scroll__overlay-title-line--ref {
    font-size: clamp(28px, 3.8vw, 60px);
}

/* Duza linia (WYSTRZEL gora-lewa / W KOSMOS dol-prawa) */
.hero-scroll__overlay-title-line--stretch {
    font-size: clamp(40px, 5.6vw, 88px);
}

.hero-scroll__char {
    display: inline-block;
}

/* Cale slowo pojawia sie na raz (fade + wjazd z dolu), nie litera po literze */
.hero-scroll__overlay-title-line {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
    transition:
        opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-scroll__overlay-title-line.is-word-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* Wskaznik scrolla - dlugi swiecacy przycisk (pigulka), pozycja nad rakieta.
   Znika po starcie scrolla (JS toggluje is-hidden). */
/* Blok tekstowy podpowiedzi: LEWA strona, w pionie na srodku (prosba usera).
   Myszka poszla osobno na gore, na os rakiety - patrz .hero-scroll__mouse-wrap. */
.hero-scroll__scroll-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: clamp(20px, 5vw, 84px);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bez przyciemnienia pod napisami (prosba usera) - czytelnosc trzymaja same
   cienie pod literami. Podpowiedz i tak znika przy 2% przewiniecia, wiec widac
   ja wylacznie na pierwszej, ciemnej klatce. */

.hero-scroll__scroll-hint.is-hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(-18px);
}

/* Status z mrugajaca dioda - jak lampka na konsoli startowej. */
.hero-scroll__hint-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    /* Bylo 11px / bialy 78% - user: "slabo widac". Wieksze, pelna biel,
       cien pod litery, zeby trzymalo sie nawet na jasnym fragmencie kadru. */
    font-size: clamp(15px, 1.15vw, 19px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 0 34px rgba(0, 0, 0, .85);
}

.hero-scroll__hint-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #35f0a0;
    box-shadow: 0 0 10px 2px rgba(53, 240, 160, .7);
    animation: hero-hint-blink 1.6s ease-in-out infinite;
}

@keyframes hero-hint-blink {
    0%, 100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* Wiersz danych startowych - drobny, techniczny. */
.hero-scroll__hint-readout {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: clamp(11px, .85vw, 14px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

.hero-scroll__hint-readout b {
    font-weight: 700;
    color: #fff;
}

.hero-scroll__hint-sep {
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, .22);
}

/* Wskaznik przewijania: DOL kadru, na osi rakiety. */
.hero-scroll__mouse-wrap {
    position: absolute;
    /* DOL kadru, nie gora.
       Wskaznik "przewijaj w dol" umieszczony przy GORNEJ krawedzi mowil co
       innego, niz miał na mysli - oko szuka takiej zachety na dole ekranu
       i tam jej nie bylo. Przeniesione 2026-09-29 po zgloszeniu, ze klienci
       nie wiedza, co maja zrobic. */
    /* GORA kadru, na osi rakiety (decyzja Lukasza 2026-09-29, po obejrzeniu
       wersji dolnej). Na dole wskaznik siadal na jasnej konstrukcji startowej
       i na silnikach, a napis dotykal krawedzi okna - przy pasku przegladarki
       i belce administratora bywal przyciety. Tu ma za soba puste, ciemne
       niebo, wiec bialy napis i obrys myszki czytaja sie bez tla.
       To, co bylo realnym bledem poprzedniej wersji, czyli brak ruchu i
       polecenie schowane w lewym marginesie, zostaje naprawione niezaleznie
       od polozenia: wskaznik skacze, a napis stoi tuz pod nim. */
    top: clamp(96px, 14vh, 165px);
    /* Rakieta NIE stoi w geometrycznym srodku kadru - probkowanie jasnosci
       canvasu na wysokosci korpusu dalo os rakiety na 51,2% szerokosci
       (0.5119 przy 1600 px i 0.5115 przy 1740 px - stala footage'u, nie
       viewportu). Przy srodku 50% myszka wisiala kilkanascie pikseli w lewo
       i cala gora wygladala na przekrzywiona. */
    /* vw, NIE % - canvas jest rysowany na window.innerWidth (czyli z pasem
       przewijania), a procent liczylby sie od szerokosci rodzica (bez pasa).
       Ta roznica to byly te ostatnie 7 px rozjazdu. */
    left: 51.2vw;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-scroll__mouse-wrap.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px);
}

/* Myszka z kropka w rolce + dwa chevrony - klasyczny, czytelny sygnal
   "przewijaj", w naszych kolorach. Zastapila pionowa szyne z impulsem. */
.hero-scroll__mouse {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    animation: hero-mouse-bob 2.6s ease-in-out infinite;
}

.hero-scroll__mouse-body {
    position: relative;
    width: 40px;
    height: 64px;
    border: 2.2px solid rgba(255, 255, 255, .95);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .45),
        0 0 22px rgba(204, 0, 166, .65),
        inset 0 0 14px rgba(204, 0, 166, .25);
}

/* Kropka zjezdza od gory rolki w dol i gasnie - petla co 1,9 s. */
.hero-scroll__mouse-wheel {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 4.5px;
    height: 11px;
    margin-left: -2.25px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 8px 1px rgba(232, 121, 249, .9);
    animation: hero-mouse-wheel 1.9s cubic-bezier(.25, .6, .3, 1) infinite;
}

@keyframes hero-mouse-wheel {
    0%   { transform: translateY(0);    opacity: 0; }
    18%  { opacity: 1; }
    62%  { transform: translateY(24px); opacity: 1; }
    100% { transform: translateY(31px); opacity: 0; }
}

@keyframes hero-mouse-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* Dwa chevrony mrugajace jeden po drugim - kierunek nie do pomylenia. */
.hero-scroll__mouse-chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 1px;
    color: #fff;
}

.hero-scroll__mouse-chevrons svg {
    width: 24px;
    height: 24px;
    display: block;
    margin-top: -7px;
    filter: drop-shadow(0 0 6px rgba(204, 0, 166, .7));
    animation: hero-mouse-chevron 1.9s ease-in-out infinite;
}

.hero-scroll__mouse-chevrons svg:nth-child(2) {
    animation-delay: .22s;
}

@keyframes hero-mouse-chevron {
    0%, 100% { opacity: .15; transform: translateY(-2px); }
    45%      { opacity: 1;   transform: translateY(1px); }
}

.hero-scroll__hint-label {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
    white-space: nowrap;
}


@media (max-width: 767px) {
    /* Tytul w JEDNEJ kolumnie i we wlasciwej kolejnosci czytania. Desktopowe
       kolumny (lewa: WYSTRZEL/BIZNES, prawa: SWOJ/W KOSMOS) po zawinieciu
       flexem czytaly sie "WYSTRZEL BIZNES SWOJ W KOSMOS". display:contents
       splaszcza kolumny, a order wg data-reveal-order (to kolejnosc NARRACJI:
       0 WYSTRZEL, 1 SWOJ, 2 BIZNES, 3 W KOSMOS) ustawia naturalny szyk. */
    /* TYTUL NIZEJ NIZ SRODEK KADRU.
       Przy wysrodkowaniu ladowal dokladnie na plomieniu silnika - czyli
       w najjasniejszym punkcie klatki - i bialy tekst sie w nim gubil
       (zmierzone: srodek bloku na 422 px przy ekranie 844). Overlay ma
       align-items:center, wiec padding od gory przesuwa tresc w dol o
       polowe swojej wartosci: 236 px paddingu = 118 px przesuniecia,
       srodek laduje na ~64% wysokosci, na ciemniejszej wiezy startowej.
       Zapas do HUD-u przy dolnej krawedzi zostaje ~80 px. */
    .hero-scroll__overlay {
        padding-top: clamp(180px, 28svh, 260px);
    }

    .hero-scroll__overlay-title {
        flex-direction: column;
        gap: 14px;
    }
    .hero-scroll__overlay-title-col { display: contents; }
    .hero-scroll__overlay-title-line[data-reveal-order="0"] { order: 0; }
    .hero-scroll__overlay-title-line[data-reveal-order="1"] { order: 1; }
    .hero-scroll__overlay-title-line[data-reveal-order="2"] { order: 2; }
    .hero-scroll__overlay-title-line[data-reveal-order="3"] { order: 3; }
    .hero-scroll__overlay-title-col--right .hero-scroll__overlay-title-line--stretch {
        margin-left: 0;
    }
    .hero-scroll__overlay-title-col--left .hero-scroll__overlay-title-line,
    .hero-scroll__overlay-title-col--right .hero-scroll__overlay-title-line {
        text-align: center;
    }

    /* HUD startowy PO SRODKU u dolu (bylo: lewy dolny rog, 10 px, ostatnia
       linia dotykajaca krawedzi - user: "jest ucięte"). Wyrownany do osi
       ekranu, z zapasem od dolu i wiekszym stopniem pisma. */
    .hero-scroll__scroll-hint {
        top: auto;
        /* ODSTEP OD DOLU LICZONY POD PASEK PRZEGLADARKI.
           .hero-scroll__pin ma height:100vh, czyli wysokosc kadru BEZ paska
           adresu/narzedzi (100vh == 100lvh). Na telefonie ten pasek realnie
           zaslania dol ekranu, wiec HUD przy bottom:30px ladowal pod
           strzalkami/plusikiem Safari i Samsung Internet (zgloszone przez
           usera).
           100svh to wysokosc kadru Z widocznym paskiem, wiec roznica
           (100vh - 100svh) to DOKLADNIE wysokosc tego paska - nie
           zgadywana, tylko podana przez przegladarke. Dokladamy do niej
           wlasny zapas, zeby HUD stal wyraznie nad paskiem.
           Gdy pasek sie chowa przy przewijaniu, roznica spada do zera i
           zostaje sam zapas. Pierwsza deklaracja to fallback dla silnikow
           bez svh. */
        bottom: clamp(56px, 10vh, 96px);
        bottom: calc(100vh - 100svh + clamp(56px, 10vh, 96px));
        /* left:0 + right:0, NIE left:50% + translateX. Element jest
           position:absolute, wiec przy samym left:50% dostepna szerokosc to
           tylko POLOWA kadru - status lamal sie na "WSZYSTKIE SYSTEMY /
           GOTOWE", a zielona dioda odlatywala w bok (zmierzone: blok miał
           214 px zamiast pelnej szerokosci). Rozpiety na cala szerokosc
           z align-items:center centruje dzieci bez zadnych limitow. */
        left: 0;
        right: 0;
        transform: none;
        padding-inline: 16px;
        align-items: center;
        text-align: center;
        gap: 9px;
    }

    /* PRZYCIEMNIENIE OD DOLU (prosba usera) - napisy ladowaly na jasnym
       betonie wyrzutni i gubily sie mimo cieni. Gradient jest DZIECKIEM
       podpowiedzi, wiec gasnie razem z nia przy starcie przewijania: jedna
       klasa .is-hidden zdejmuje i tlo, i tekst. 100vw, bo ma isc przez cala
       szerokosc kadru, a nie tylko pod blokiem tekstu. */
    .hero-scroll__scroll-hint::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        /* Gradient ma dochodzic do FIZYCZNEJ dolnej krawedzi kadru (pod
           pasek przegladarki), zeby nie bylo widac jego konca - stad ten sam
           odstep co wyzej, tylko ze znakiem minus. */
        bottom: calc(-1 * clamp(56px, 10vh, 96px));
        bottom: calc(-1 * (100vh - 100svh + clamp(56px, 10vh, 96px)));
        height: 420px;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
            to top,
            rgba(0, 2, 6, .88) 0%,
            rgba(0, 2, 6, .8) 26%,
            rgba(0, 2, 6, .55) 52%,
            rgba(0, 2, 6, .22) 76%,
            rgba(0, 2, 6, 0) 100%
        );
    }

    .hero-scroll__scroll-hint.is-hidden { transform: translateY(16px); }
    /* Telefon: tak samo u gory. Blok HUD zostaje na dole, wiec nic na siebie
       nie nachodzi, a wskaznik ma nad rakieta czyste niebo. */
    .hero-scroll__mouse-wrap {
        top: clamp(78px, 11vh, 118px);
        bottom: auto;
    }
    .hero-scroll__mouse-body { width: 32px; height: 52px; border-radius: 18px; }
    .hero-scroll__mouse-chevrons svg { width: 19px; height: 19px; }

    /* Wiersz danych wraca (byl display:none) - wysrodkowany miesci sie
       w jednej linii, a bez niego HUD wygladal na okrojony. */
    .hero-scroll__hint-readout {
        display: inline-flex;
        justify-content: center;
        white-space: nowrap;
        font-size: 11px;
        gap: 10px;
        letter-spacing: .1em;
    }

    /* Wieksze pismo (bylo 12/9.5/11 px - user: "powieksz"). Gorna granica
       wyznacza szerokosc najdluzszej linii: "PRZEWIN, ZEBY ODPALIC SILNIKI"
       przy 13.5 px zajmuje 263 px, czyli miesci sie nawet na ekranie 360 px
       (dostepne 328 px po odjeciu paddingu). */
    .hero-scroll__hint-status {
        font-size: 15px;
        letter-spacing: .12em;
        white-space: nowrap;
    }

    .hero-scroll__hint-label {
        font-size: 13.5px;
        letter-spacing: .1em;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .hero-scroll {
        height: calc(430vh + 40vh);
    }
}

@media (max-width: 767px) {
    /* USUNIETE: overscroll-behavior-y: contain (bylo tu i na __pin nizej).
       To ONO zabijalo scroll na telefonach - zmierzone Playwrightem:
       przed usunieciem scrollY po czterech ruchach kolkiem = 0, 0, 0, 0,
       po usunieciu = 395, 795, 1195, 1595.
       Mechanizm: .hero-scroll__pin ma overflow:hidden, wiec JEST kontenerem
       przewijania, ale nie ma w nim nic do przewiniecia (scrollHeight ==
       clientHeight == 100vh). Gest/kolko trafia w canvas w srodku pina,
       przegladarka probuje przewinac pin, nie moze - i normalnie oddalaby
       scroll wyzej, do dokumentu (scroll chaining). "contain" dokladnie to
       blokuje, wiec nie przewija sie NIC: ani pin, ani strona.
       Na desktopie regula nie obowiazywala (media query), stad "u mnie
       dziala" - i stad zgloszenia tylko z telefonow i z trybu mobilnego
       w DevTools. */
    .hero-scroll {
        height: calc(700vh + 40vh);
        min-height: 100vh;
    }
    .hero-scroll__pin {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .hero-scroll__overlay-title {
        gap: 2px;
    }
    .hero-scroll__overlay-title-line {
        font-size: clamp(28px, 9vw, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll {
        height: 100vh;
    }
    .hero-scroll__pin {
        position: relative;
    }
    .hero-scroll__scene { opacity: 1; }
    .hero-scroll__canvas { opacity: 1; transition: none; }
    .hero-scroll__overlay-title-line { opacity: 1; transform: none; filter: none; }
    .hero-scroll__scroll-hint { display: none; }
}

/* ── MOBILE: KONIEC SPOWOLNIENIA ────────────────────────────────
   Te sekcje byly rozciagniete na 5-7 ekranow przewijania po to, zeby
   animacja szla wolno i dokladnie. Skutek uboczny na telefonie: przez
   pol strony przewijasz duzo i dzieje sie malo, a potem zwykla sekcja
   jedzie normalnym tempem i czyta sie to jak wystrzelenie. User: "zeby
   nigdzie to nie bylo takie spowolnione".
   Skrocone do ok. 2.5 ekranu - animacja gra dalej, tylko szybciej i w
   tempie zblizonym do reszty strony. Na desktopie bez zmian, tam scroll
   jest precyzyjny i dluzszy przejazd ma sens. */
@media (max-width: 768px) {
    .hero-scroll {
        height: 420svh;
    }
}

/* --- Przycisk "Pomiń intro" --------------------------------------------
   Wyglad bierze z .kbtn (assets/css/kbtn.css) - sciete rogi, paski, gradient
   marki. Tutaj zostaje WYLACZNIE pozycja, zeby te dwie rzeczy nie walczyly
   ze soba przy kazdej zmianie stylu przyciskow. */
.hero-scroll__skip {
  position: absolute;
  right: clamp(16px, 3vw, 44px);
  bottom: clamp(20px, 4vh, 48px);
  z-index: 6;
  pointer-events: auto;
}

/* Strzalka schodzi i wraca - bez ruchu przycisk w rogu bywa brany za
   element dekoracyjny. */
.hero-scroll__skip .hero-scroll__skip-ikona {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  animation: hero-skip-strzalka 2.4s ease-in-out infinite;
}

.hero-scroll__skip-ikona svg { width: 100%; height: 100%; }

@keyframes hero-skip-strzalka {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__skip .hero-scroll__skip-ikona { animation: none; }
}

@media (max-width: 720px) {
  .hero-scroll__skip { right: 14px; bottom: 16px; }
}

/* --- Strzalka wskazujaca przycisk "Pomiń intro" -------------------------
   Ten sam jezyk co blok "wszystkie systemy gotowe": cienka, biala, bez
   wypelnienia, monospace. Bez niej przycisk w rogu bywa brany za element
   interfejsu, a nie za podpowiedz skierowana do czytajacego. */
.hero-scroll__skip-wskaz {
  position: absolute;
  right: clamp(186px, 3vw + 174px, 232px);
  bottom: clamp(34px, 4vh + 14px, 62px);
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: .375rem;
  color: rgba(255, 255, 255, .72);
  pointer-events: none;
  animation: hero-wskaz-oddech 3.2s ease-in-out infinite;
}

.hero-scroll__skip-wskaz-tekst {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Duzo wieksze na prosbe Lukasza (2026-09-29). Bylo 17 px i ginelo
     w kadrze obok rakiety. */
  font-size: clamp(1.25rem, 1.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: lowercase;
  white-space: nowrap;
  padding-bottom: .4375rem;
  color: #fff;
}

.hero-scroll__skip-wskaz-svg {
  /* Luk rosnie razem z napisem, inaczej strzalka wygladalaby jak doklejona
     do cudzego, wiekszego tekstu. */
  width: clamp(110px, 9vw, 150px);
  height: clamp(50px, 4vw, 68px);
  flex: none;
}

/* Luk rysuje sie sam przy wejsciu, grot dochodzi po nim. Dlugosci sciezek
   zmierzone w przegladarce, wiec dasharray nie jest zgadywany. */
.hero-scroll__skip-wskaz-luk {
  stroke-dasharray: 128;
  stroke-dashoffset: 128;
  animation: hero-wskaz-rysuj 1s ease-out .6s forwards;
}

.hero-scroll__skip-wskaz-grot {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: hero-wskaz-rysuj .35s ease-out 1.5s forwards;
}

@keyframes hero-wskaz-rysuj {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-wskaz-oddech {
  0%, 100% { transform: translateX(0); opacity: .72; }
  50%      { transform: translateX(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__skip-wskaz { animation: none; }
  .hero-scroll__skip-wskaz-luk,
  .hero-scroll__skip-wskaz-grot { animation: none; stroke-dashoffset: 0; }
}

/* Na telefonie strzalka odpada - przy 390 px nie ma miejsca obok przycisku,
   a wciskanie jej na sile daje dwa elementy nachodzace na siebie. */
@media (max-width: 720px) {
  .hero-scroll__skip-wskaz { display: none; }
}


/* ── Wskaznik przewijania: polecenie i ruch ──────────────── */

/**
 * Caly wskaznik oddycha w gore i w dol.
 *
 * Do 2026-09-29 ani myszka, ani napis nie mialy zadnej animacji (sprawdzone:
 * `animation: none` na obu), a jedynym ruchomym elementem tego ekranu byl
 * przycisk "Pomin intro". Czyli najzywszy punkt kadru namawial do wyjscia,
 * a nie do przewijania. Ruch jest najsilniejszym sygnalem "kliknij tutaj",
 * jaki ma interfejs - i nalezy sie zachecie, nie wyjsciu awaryjnemu.
 */
.hero-scroll__mouse-wrap:not(.is-hidden) {
    animation: hero-wskaz-skok 2.4s ease-in-out infinite;
}

@keyframes hero-wskaz-skok {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}

.hero-scroll__mouse-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    text-align: center;
    white-space: nowrap;
}

.hero-scroll__mouse-label-glowna {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .95);
}

.hero-scroll__mouse-label-mala {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: clamp(11px, .85vw, 13px);
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .62);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

/* Dwa brzmienia polecenia. Domyslnie kolko myszy, a na urzadzeniach bez
   kursora - palec. Przelacznik jest w CSS, wiec wlasciwy napis jest na
   miejscu od pierwszej klatki, bez migniecia tego drugiego. */
[data-wskaz-palec] { display: none; }

@media (hover: none) {
    [data-wskaz-kolko] { display: none; }
    [data-wskaz-palec] { display: inline; }
    /* Bez kursora rolka myszy nic nie znaczy - zostaja same strzalki,
       ktore czytaja sie jako kierunek niezaleznie od urzadzenia. */
    .hero-scroll__mouse-body { display: none; }
}

/* Przy wlaczonej redukcji ruchu wskaznik stoi. Zostaje sam napis, ktory
   po przeniesieniu na dol i tak niesie cala instrukcje. */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll__mouse-wrap:not(.is-hidden) { animation: none; }
}
/* ── Strzalka wskazujaca myszke ──────────────────────────── */

/**
 * Bliznjak podpowiedzi przy "Pomin intro", tylko odbity: napis po lewej,
 * luk wznoszacy sie w prawo, prosto w ikone myszki.
 *
 * Pozycjonowana wzgledem wskaznika (right: 100%), a nie wzgledem kadru,
 * wiec przy kazdej szerokosci ekranu trzyma sie myszki bez osobnych
 * wyliczen na breakpointy.
 */
.hero-scroll__wskaz-przewin {
    position: absolute;
    right: calc(100% + 8px);
    top: 6px;
    display: flex;
    align-items: flex-end;
    gap: .375rem;
    color: rgba(255, 255, 255, .72);
    pointer-events: none;
}

.hero-scroll__wskaz-przewin-tekst {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.25rem, 1.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: lowercase;
    white-space: nowrap;
    padding-bottom: .4375rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

.hero-scroll__wskaz-przewin-svg {
    width: clamp(110px, 9vw, 150px);
    height: clamp(50px, 4vw, 68px);
    flex: none;
}

/* Luk rysuje sie sam, grot dochodzi po nim - te same czasy co przy
   podpowiedzi do "Pomin intro", zeby oba zachowywaly sie identycznie. */
.hero-scroll__wskaz-przewin-luk {
    stroke-dasharray: 128;
    stroke-dashoffset: 128;
    animation: hero-wskaz-rysuj 1s ease-out .6s forwards;
}

.hero-scroll__wskaz-przewin-grot {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: hero-wskaz-rysuj .35s ease-out 1.5s forwards;
}

/* Napis pod myszka zostaje TYLKO tam, gdzie nie miesci sie strzalka.
   Na desktopie dublowalby to, co mowi napis przy strzalce. */
.hero-scroll__mouse-label { display: none; }

@media (max-width: 1100px) {
    /* Po powiekszeniu napisu i luku para potrzebuje juz ok. 320 px na lewo
       od osi rakiety, wiec prog przejscia na podpis pod ikona podniesiony
       z 900 do 1100 px. */
    .hero-scroll__wskaz-przewin { display: none; }
    .hero-scroll__mouse-label { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll__wskaz-przewin-luk,
    .hero-scroll__wskaz-przewin-grot { animation: none; stroke-dashoffset: 0; }
}

/* ── Krotkie wyjasnienie sterowania (lewa strona) ─────────── */

/**
 * Stoi tam, gdzie wczesniej byl HUD: lewa krawedz, w pionie na srodku.
 * Cienka ikona myszki ze strzalka i jedno zdanie - bez ramki i bez tla,
 * czyli w tym samym jezyku co strzalki przy myszce i przy "Pomin intro".
 * Wersja z chmurka (tlo, obrys, tytul) byla tu wczesniej i odpadla.
 */
.hero-scroll__sterowanie {
    position: absolute;
    /* LEWY DOLNY ROG (Lukasz 2026-09-29). Symetrycznie do podpowiedzi
       "nie chcesz przewijać?" w prawym dolnym rogu - dolna krawedz kadru
       to miejsce, gdzie oko szuka instrukcji i wyjscia. */
    bottom: clamp(34px, 4vh + 14px, 62px);
    top: auto;
    transform: none;
    left: clamp(20px, 5vw, 84px);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    color: #fff;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-scroll__sterowanie.is-hidden {
    opacity: 0;
    transform: translateX(-18px);
}

.hero-scroll__sterowanie-ikona svg {
    display: block;
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .9));
}

.hero-scroll__sterowanie-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .03em;
    text-transform: lowercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

.hero-scroll__sterowanie-glowna {
    font-size: clamp(1rem, 1.05vw, 1.25rem);
    font-weight: 600;
    color: #fff;
}

/* Druga linijka wymienia sposoby, ale juz ciszej - pierwsza wystarcza
   komus, kto tylko sie zawahal, a ta jest dla kogos, kto naprawde nie wie. */
.hero-scroll__sterowanie-mala {
    font-size: clamp(.8125rem, .85vw, .95rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .62);
}

/* Telefon: pod wskaznikiem, na srodku - przy lewej krawedzi wchodziloby
   na rakiete, a napis i tak jest krotki. */
@media (max-width: 767px) {
    /* Na telefonie tego wyjasnienia NIE MA i to jest celowe.
       Powod rzeczowy: przewijanie palcem to odruch, ktorego nikt nie musi
       sie uczyc, a pod wskaznikiem stoi juz "Przewiń w dół".
       Powod praktyczny: przy 390 px zdanie lamie sie na cztery wiersze
       i lezy na jasnej konstrukcji startowej, wiec jest nieczytelne.
       Wyjasnienie jest dla kogos przy laptopie albo komputerze - i tam
       zostaje. */
    .hero-scroll__sterowanie { display: none; }

    .hero-scroll__sterowanie.is-hidden {
        opacity: 0;
        transform: translateY(16px);
    }
}

@media (max-height: 560px) {
    .hero-scroll__sterowanie { display: none; }
}

/* Strzalka wskazujaca wyjasnienie sterowania (lewy dolny rog). */
.hero-scroll__sterowanie-wskaz {
    position: absolute;
    /* Nad wyjasnieniem, lekko w prawo - luk schodzi stamtad w dol i w lewo,
       prosto na ikone. */
    /* Lekko nachodzi na blok, zeby grot konczyl sie przy samym napisie,
       a nie wisial osobno nad nim. */
    /* Wieksza i z wiekszym odstepem od napisu (Lukasz, 2026-09-29).
       Grot ma wypadac nad poczatkiem instrukcji, wiec przy zmianie
       szerokosci trzeba skorygowac takze `left` - koncowka luku siedzi
       w okolicach 35% szerokosci rysunku. */
    bottom: calc(100% + 10px);
    left: 26px;
    width: clamp(132px, 10.5vw, 174px);
    color: rgba(255, 255, 255, .72);
    pointer-events: none;
    animation: hero-sterowanie-oddech 3.2s ease-in-out infinite;
}

.hero-scroll__sterowanie-wskaz svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Te same czasy co przy pozostalych dwoch strzalkach, zeby caly ekran
   rysowal sie w jednym rytmie. */
.hero-scroll__sterowanie-wskaz-luk {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: hero-wskaz-rysuj 1s ease-out .6s forwards;
}

.hero-scroll__sterowanie-wskaz-grot {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: hero-wskaz-rysuj .35s ease-out 1.5s forwards;
}

/* Oddech w PIONIE, bo i strzalka pokazuje w dol. Pozioma wersja z podpowiedzi
   przy "Pomin intro" wygladalaby tu jak drganie w bok. */
@keyframes hero-sterowanie-oddech {
    0%, 100% { transform: translateY(0); opacity: .72; }
    50%      { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll__sterowanie-wskaz { animation: none; }
    .hero-scroll__sterowanie-wskaz-luk,
    .hero-scroll__sterowanie-wskaz-grot { animation: none; stroke-dashoffset: 0; }
}

/* Napisy przy wskazniku gasna po ruszeniu z miejsca, sama myszka zostaje.
   Po starcie rakiety instrukcja jest juz zbedna - wystarczy zywa ikona,
   ktora przypomina, ze trzeba krecic dalej. */
.hero-scroll__wskaz-przewin.is-hidden,
.hero-scroll__mouse-label.is-hidden {
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hero-scroll__wskaz-przewin,
.hero-scroll__mouse-label {
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dlon z gestem przesuniecia (tylko dotyk) ────────────── */

/**
 * Na telefonie zamiast myszki pokazujemy sam gest: dlon jedzie w gore
 * po pionowym sladzie, gasnie i wraca na dol. Ruch jest wolny (2,6 s),
 * bo to instrukcja do przeczytania, a nie efekt.
 */
.hero-scroll__palec {
    display: none;
    position: relative;
    width: 34px;
    height: 62px;
    margin-inline: auto;
}

.hero-scroll__palec-dlon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 46px;
    color: #fff;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .9));
    animation: hero-palec-gest 2.6s ease-in-out infinite;
}

/* Slad, po ktorym jedzie palec - cienka kreska gasnaca ku gorze.
   Bez niej sam ruch dloni czyta sie jak drganie, a nie jak przesuniecie. */
.hero-scroll__palec-slad {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 30px;
    margin-left: -1px;
    border-radius: 2px;
    background: linear-gradient(to top, rgba(255, 255, 255, .55), transparent);
    animation: hero-palec-slad 2.6s ease-in-out infinite;
}

@keyframes hero-palec-gest {
    /* start na dole, spokojnie */
    0%, 10%   { transform: translateY(0); opacity: 1; }
    /* jedzie w gore */
    45%       { transform: translateY(-22px); opacity: 1; }
    /* gasnie u gory i wraca niewidoczna na dol */
    60%       { transform: translateY(-22px); opacity: 0; }
    61%       { transform: translateY(0); opacity: 0; }
    75%, 100% { transform: translateY(0); opacity: 1; }
}

@keyframes hero-palec-slad {
    0%, 10%   { opacity: 0; transform: scaleY(.2); transform-origin: bottom; }
    45%       { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
    60%, 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* Przelacznik: bez kursora znika myszka, pojawia sie dlon. */
@media (hover: none) {
    .hero-scroll__palec { display: block; }
    .hero-scroll__mouse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll__palec-dlon,
    .hero-scroll__palec-slad { animation: none; }
    .hero-scroll__palec-slad { opacity: .5; }
}