/**
 * Final scrollytelling "wyjscie z tabletu" - sticky pin + canvas, wzorzec
 * 1:1 z astronaut-scroll.css (bez warstw hasel/CTA - czysty przelot).
 * 280vh = ~1740px budzetu scrolla na 193 klatki (ok. 9px scrolla na klatke,
 * podobne tempo co sekwencja wejscia).
 */

.wave-scroll {
    position: relative;
    /* Nad poprzednia sekcja - finał WJEZDZA na "O nas" w momencie czerni,
       dokladnie tak jak usługi wjezdzaja na kadr astronauty przy wejsciu
       w tablet. Ujemny margines = bufor intro (patrz INTRO_VH w
       wave-scroll.js - obie wartosci musza byc rowne). */
    z-index: 3;
    /* Duzy ujemny margines - sekcja nachodzi na "O nas" JESZCZE gdy ta jest
       na ekranie. Dzieki temu przejscie widac jako "O nas gasnie w czerni",
       a nie jako zjazd w dol do czarnego ekranu (zgloszone przez usera).
       Musi byc rowne INTRO_VH w wave-scroll.js. */
    /* -100vh = DOKLADNIE moment, w ktorym konczy sie przypiecie sekcji
       "O nas" (jej pin ma 100vh). Dzieki temu finał przejmuje ekran w tej
       samej klatce, w ktorej tamta sekcja przestaje byc przypieta - wczesniej
       przez ~720 px zamknieta kurtyna po prostu odjezdzala w gore i wygladalo
       to jak "podjezdzajaca z dolu sekcja" (zgloszone przez usera).
       40vh = budzet na wyjscie kamery z tabletu (INTRO_VH w JS). */
    margin-top: -100vh;
    width: 100%;
    height: calc(280vh + 40vh);
    /* PRZEZROCZYSTE (bylo --color-bg) - w fazie gaszenia musi byc widac
       sekcje pod spodem; czern daje osobna nakladka nizej, a pozniej i tak
       wszystko zakrywa nieprzezroczysta kanwa. */
    background: transparent;
}

/* Czern przejscia. Najpierw NARASTA nad sekcja "O nas" (cala scena gasnie
   w otchlani), potem gasnie, odslaniajac wyjezdzajacy z tabletu kadr. */
.wave-scroll__fade-black {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #000000;
    opacity: 0;
    pointer-events: none;
}

.wave-scroll__pin {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.wave-scroll__canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Start: niewidoczna i mocno przyblizona (jak ostatnia klatka wjazdu
       w tablet). JS odslania ja dopiero, gdy czern w pelni zakryje "O nas",
       i sprowadza skale do 1. */
    opacity: 0;
    transform: scale(2.6);
    transform-origin: center center;
}

@media (max-width: 768px) {
    /* -55svh = DOKLADNIE bufor holdu galerii w about-crew (::after, patrz
       about-crew.css). Galeria stoi sticky przez te 55svh, a final w tym
       samym oknie sie przypina i zamyka czern NAD zdjeciami - zero pustego
       zjazdu w dol miedzy sekcjami (zgloszone). Wczesniejsze -100vh pozeralo
       galerie zanim user ja obejrzal, a 0 dawalo martwy czarny scroll. */
    .wave-scroll {
        /* -105svh z rownania zaczepienia: galeria (sticky, zapas 55svh w
           about-crew) ma zostac w kadrze az czern domknie sie w polowie
           intro. Przy -55svh zapas konczyl sie ~190px PRZED pinem finalu
           i czern zamykala sie nad pustka (zmierzone). */
        margin-top: -105svh;
        /* WOLNIEJSZY przelot (bylo 280vh+40vh): na telefonie flick kciukiem
           to 1500-2500 px, wiec 193 klatki przelatywaly w jednym gescie
           (zgloszone). 520vh daje ~2.3x wiecej scrolla na klatke - astronauta
           wstaje i macha spokojnie, tak jak na desktopie. */
        height: calc(520vh + 40vh);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave-scroll {
        height: 100vh;
        margin-top: 0;
    }
    .wave-scroll__pin {
        position: static;
    }
    .wave-scroll__canvas {
        transform: none;
    }
    .wave-scroll__fade-black {
        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) {
    /**
     * Wysokosc tej sekcji chodzila juz w obie strony, wiec zapisuje powod:
     *
     *   520svh - astronauta machal spokojnie, ale pol strony schodzilo na
     *            przewijanie, w ktorym niewiele sie dzieje
     *   360svh - tempo zblizone do reszty strony, ale przy flicku kciukiem
     *            (1500-2500 px jednym gestem) 193 klatki przelatywaly tak
     *            szybko, ze machniecie gubilo sie w rozmazaniu
     *   460svh - obecne. Machniecie jest czytelne, a sekcja nie rozciaga
     *            sie na pol strony.
     *
     * Przy kolejnej zmianie licz to tak: dystans w px dzielony przez 193
     * klatki daje pikseli na klatke. Ponizej ~9 px na klatke animacja
     * zaczyna gubic plynnosc przy szybkim gescie.
     */
    .wave-scroll {
        height: 460svh;
    }
}