/**
 * "O nas / Załoga" - uklad wg referencji usera (nivora.framer.website),
 * LUSTRZANY: tresc po PRAWEJ przypieta (position:sticky - czysty CSS, zero
 * JS), po LEWEJ pionowa kolumna kart-grafik z podpisami przewijajaca sie
 * naturalnym scrollem strony obok stojacej tresci. Ciemne tlo (kontynuacja
 * czerni z konca video-marquee) + poswiaty brandu. CTA cut-corner - ta sama
 * kopia wzoru co portfolio-marquee (kazda sekcja trzyma wlasny CSS, zero
 * cross-file zaleznosci miedzy parts).
 */

/* PRZYPIETA sekcja (przebudowa na prosbe usera): ekran zatrzymuje sie na
   "O nas", zdjecia jada w srodku sterowane scrollem (about-crew.js), a na
   koncu tresc gasnie jak wylaczany tablet i wychodzimy z niego w finale.
   Wczesniej sekcja przewijala sie normalnie i po jej konskoncu z dolu
   wjezdzala czarna pustka - to bylo zgloszone jako blad. */
.about-crew {
    position: relative;
    background: var(--color-bg, #000408);
    /* 175vh (bylo 260vh) - user: "cztery razy zeskrolowalem zanim przeszlo".
       Krotszy budzet = ok. polowa mniej krecenia kolkiem, a zdjecia i tak
       przejezdzaja caly zestaw (ich ruch jest przeliczany na ten budzet). */
    height: 175vh;
    overflow: clip;
}

.about-crew__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* KURTYNA (zastapila zwijanie obrazu "jak kineskop" - user: "dziwnie to
   lata"). Dwie czarne plyty zjezdzaja z gory i z dolu i domykaja kadr;
   zaraz po domknieciu finał wyjezdza z tabletu. JS ustawia --crew-off
   (0 = otwarte, 1 = zamkniete). */
.about-crew__shutter {
    position: absolute;
    left: 0;
    right: 0;
    height: 51%;
    z-index: 6;
    background: #000000;
    pointer-events: none;
}

.about-crew__shutter--top {
    top: 0;
    transform: translate3d(0, calc(var(--crew-off, 0) * 100% - 100%), 0);
}

.about-crew__shutter--bottom {
    bottom: 0;
    transform: translate3d(0, calc(100% - var(--crew-off, 0) * 100%), 0);
}

/* Poswiaty glebi - ten sam jezyk co portfolio-marquee (radiale brandu). */
.about-crew::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 45% at 15% 35%, rgba(204, 0, 166, .07), transparent 70%),
        radial-gradient(ellipse 45% 40% at 90% 15%, rgba(115, 56, 234, .06), transparent 70%);
}

.about-crew__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    /* start (nie center) - warunek dzialania sticky: przypinany element musi
       miec swobode "jazdy" wewnatrz wyzszej kolumny galerii. */
    align-items: start;
    gap: clamp(48px, 7vw, 120px);
}

/* ── Lewa kolumna: staggered kolaz 2-kolumnowy ───────────────
   (iteracja usera: pojedynczy stos byl "za duzy i za prosty" - teraz karty
   sa o polowe mniejsze, w przeplocie z pionowym przesunieciem i lekkimi
   obrotami jak przypiete odbitki; hover prostuje karte i podswietla
   ramke kolorem brandu). */

/* Okno galerii - stala wysokosc kadru; track w srodku jedzie pionowo
   (transform z JS), bo sekcja jest przypieta i nie ma wlasnego scrolla. */
.about-crew__gallery {
    height: calc(100vh - clamp(80px, 12vh, 160px));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.about-crew__gallery-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
}

/* Parallax przy scrollu: --crew-par-a / --crew-par-b ustawia about-crew.js
   (lewa kolumna plynie w gore, prawa w dol - zdjecia "zyja" podczas
   rozswietlania tekstu). Transition krotki, zeby ruch nadazal za scrollem
   bez gumowania. */
.about-crew__card {
    margin: 0;
    transition: transform .15s linear;
}

.about-crew__card:nth-child(odd) {
    transform: translateY(var(--crew-par-a, 0px)) rotate(-1.4deg);
}

.about-crew__card:nth-child(even) {
    /* Przeplot - prawa kolumna startuje nizej, uklad przestaje byc siatka. */
    margin-top: clamp(44px, 5.5vw, 80px);
    transform: translateY(var(--crew-par-b, 0px)) rotate(1.6deg);
}

.about-crew__card:nth-child(odd):hover {
    transform: translateY(calc(var(--crew-par-a, 0px) - 6px)) rotate(0deg);
}

.about-crew__card:nth-child(even):hover {
    transform: translateY(calc(var(--crew-par-b, 0px) - 6px)) rotate(0deg);
}

.about-crew__card-media {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    background: #0b0e16;
    transition: border-color .35s ease, box-shadow .35s ease;
}

.about-crew__card:hover .about-crew__card-media {
    border-color: rgba(204, 0, 166, .55);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .6),
        0 0 28px rgba(204, 0, 166, .2);
}

.about-crew__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.about-crew__card:hover .about-crew__img {
    transform: scale(1.05);
}

/* Placeholder do czasu wgrania grafik - przygaszony gradient brandu. */
.about-crew__photo-placeholder {
    background:
        radial-gradient(ellipse 80% 70% at 30% 25%, rgba(204, 0, 166, .22), transparent 65%),
        radial-gradient(ellipse 75% 65% at 75% 80%, rgba(115, 56, 234, .28), transparent 65%),
        linear-gradient(160deg, #0b0e16 0%, #131022 55%, #0a0d14 100%);
}

/* ── Prawa kolumna: tresc (cala sekcja jest juz przypieta) ── */

.about-crew__content {
    position: relative;
}

/* Duzy napis rozswietlany slowo-po-slowie (about-crew.js, wzorzec
   what-you-get) - zamiast naglowka, akapitow i punktow LOG (iteracja usera:
   ma byc jeden wielki tekst jak w referencji nivora). */
.about-crew__statement {
    margin: clamp(24px, 3vw, 40px) 0 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    font-size: clamp(1.7rem, 2.6vw, 2.9rem);
    color: #fff;
}

.about-crew__word {
    display: inline-block;
    color: rgba(255, 255, 255, .16);
    transition: color .4s ease;
}

.about-crew__word.is-lit {
    color: #fff;
}

/* "studiem projektowym" - cienka pochyla (kontrast typograficzny z gruba
   reszta napisu, prosba usera). Font-weight 300 wymaga zaladowanej odmiany
   Light w Poppins; fallback przegladarki: syntetyczne pocienienie. */
.about-crew__word--thin {
    font-weight: 300;
    font-style: italic;
}

/* Frazy akcentowe ("zadowoleni klienci", "nie zabraklo") - po rozswietleniu
   zamiast bieli dostaja gradient brandu z logo. Trik: gradient jest
   przypiety do tekstu caly czas (background-clip:text), ale przykrywa go
   normalny kolor slowa; przejscie color -> transparent plynnie odslania
   gradient tym samym mechanizmem co zwykle rozswietlanie. */
.about-crew__word--accent {
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    /* KRYJACY kolor przygaszenia (nie polprzezroczysta biel jak zwykle
       slowa) - przy background-clip:text polprzezroczysty kolor PRZEPUSZCZAL
       gradient i frazy wygladaly na zapalone od poczatku (zgloszone przez
       usera). #292a2d = ta sama jasnosc co rgba(255,255,255,.16) na czarnym
       tle, wiec przed rozswietleniem akcenty wygladaja identycznie jak
       reszta tekstu, a gradient odslania sie dopiero z klasa is-lit. */
    color: #292a2d;
}

.about-crew__word--accent.is-lit {
    color: transparent;
}

/* Inline emoji w tekscie (Twemoji SVG, wzorzec The Launch Company) -
   rozswietlaja sie w sekwencji ze slowami przez opacity (kolor nie dziala
   na <img>). Rakieta delikatnie sie unosi. */
.about-crew__emoji {
    opacity: .25;
    transition: opacity .4s ease;
}

.about-crew__emoji.is-lit {
    opacity: 1;
}

.about-crew__emoji img {
    display: inline-block;
    width: .95em;
    height: .95em;
    vertical-align: -.08em;
    /* Neonowy glow w kolorach gradientu ikon (fiolety brandu z logo). */
    filter:
        drop-shadow(0 0 5px rgba(204, 0, 166, .45))
        drop-shadow(0 0 10px rgba(115, 56, 234, .3));
}

@keyframes about-crew-rocket-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(2px, -5px) rotate(7deg); }
}

.about-crew__emoji--rocket img {
    animation: about-crew-rocket-float 2.8s ease-in-out infinite;
}

/* ── CTA cut-corner (kopia wzoru z portfolio-marquee) ────── */

@keyframes about-crew-cta-glow {
    0%, 100% {
        box-shadow:
            0 4px 0 0 rgba(0, 0, 0, .4),
            0 0 0 1px rgba(204, 0, 166, .6),
            0 0 24px rgba(204, 0, 166, .4),
            0 0 48px rgba(115, 56, 234, .3);
    }
    50% {
        box-shadow:
            0 4px 0 0 rgba(0, 0, 0, .4),
            0 0 0 1px rgba(204, 0, 166, .6),
            0 0 32px rgba(204, 0, 166, .55),
            0 0 56px rgba(115, 56, 234, .4);
    }
}

.about-crew__cta {
    --btn-cut: 10px;
    position: relative;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    /* Blizej tekstu nad nim (bylo clamp(32,4vw,48)) i wysrodkowany w kolumnie
       tresci (width:fit-content + margin-inline:auto) - prosba usera. */
    margin-top: clamp(18px, 2.4vw, 28px);
    margin-inline: auto;
    padding: 1rem 2.5rem;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(204, 0, 166, .6);
    background: linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    clip-path: polygon(
        var(--btn-cut) 0,
        calc(100% - var(--btn-cut)) 0,
        100% var(--btn-cut),
        100% calc(100% - var(--btn-cut)),
        calc(100% - var(--btn-cut)) 100%,
        var(--btn-cut) 100%,
        0 calc(100% - var(--btn-cut)),
        0 var(--btn-cut)
    );
    box-shadow:
        0 4px 0 0 rgba(0, 0, 0, .4),
        0 0 0 1px rgba(204, 0, 166, .6),
        0 0 24px rgba(204, 0, 166, .4),
        0 0 48px rgba(115, 56, 234, .3);
    transition: transform .08s ease-out, background .2s ease, box-shadow .2s ease;
    overflow: hidden;
    animation: about-crew-cta-glow 3s ease-in-out infinite;
}

.about-crew__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(0, 0, 0, .12) 2px,
        rgba(0, 0, 0, .12) 4px
    );
    pointer-events: none;
    clip-path: inherit;
}

.about-crew__cta:hover {
    background: linear-gradient(135deg, #e01ac0 0%, #b01890 35%, #8a4ff5 70%, #5a25b8 100%);
    color: #fff;
    box-shadow:
        0 4px 0 0 rgba(0, 0, 0, .4),
        0 0 0 1px rgba(204, 0, 166, .6),
        0 0 36px rgba(204, 0, 166, .5),
        0 0 64px rgba(115, 56, 234, .5);
}

.about-crew__cta:active {
    transform: translateY(4px);
    box-shadow:
        0 0 0 0 rgba(0, 0, 0, .4),
        0 0 0 1px rgba(204, 0, 166, .6),
        0 0 20px rgba(204, 0, 166, .4);
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Mobile: bez pina i bez efektu gaszenia - normalny przeplyw. */
    .about-crew {
        height: auto;
        padding-block: clamp(64px, 12vw, 120px);
    }
    .about-crew__pin {
        position: static;
        height: auto;
        display: block;
    }
    .about-crew__inner {
        grid-template-columns: 1fr;
        gap: clamp(48px, 10vw, 72px);
    }
    .about-crew__shutter {
        display: none;
    }
    .about-crew__gallery {
        height: auto;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .about-crew__content {
        position: static;
        order: -1;
    }
    .about-crew__gallery {
        max-width: 480px;
        margin-inline: auto;
        width: 100%;
    }
    .about-crew__statement {
        font-size: clamp(1.45rem, 6vw, 1.9rem);
    }
}

@media (max-width: 900px) {
    /* Przejscie do finalu BEZ pustego zjazdu (prosba usera): po obejrzeniu
       galerii ekran ma stanac na zdjeciach, a czern finalu zamknac sie NAD
       nimi. Mechanika: __inner dostaje 55svh dodatkowego dystansu (::after
       jako element flexa), galeria jest sticky WEWNATRZ inner - stoi w
       kadrze przez caly ten dystans, a final (margin-top: -55svh w
       wave-scroll.css) w tym samym oknie przypina sie i zamyka czern nad
       przypieta galeria.
       UWAGA: inner MUSI byc flex-kolumna, nie gridem - sticky w gridzie
       trzyma sie wlasnej komorki (grid area), nie calego kontenera, wiec
       zapas wysokosci nic mu nie dawal (zmierzone: galeria uciekala). */
    /* Desktopowe overflow (clip na sekcji pod kurtyny, hidden na pinie)
       ZABIJALY sticky galerii - kontener z overflow != visible staje sie
       scrollerem odniesienia dla sticky, a ze sam nie scrolluje, przypiecie
       nigdy nie startowalo (zmierzone w lancuchu przodkow). Na mobile
       kurtyn nie ma, wiec odblokowujemy. */
    .about-crew {
        overflow: visible;
    }

    .about-crew__pin {
        overflow: visible;
    }

    .about-crew__inner {
        display: flex;
        flex-direction: column;
    }

    .about-crew__inner::after {
        content: "";
        display: block;
        flex: none;
        height: 55svh;
    }

    .about-crew__gallery {
        position: sticky;
        top: max(12svh, calc(100svh - 760px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-crew__cta {
        animation: none;
    }
    .about-crew__word {
        color: #fff;
    }
    .about-crew__word--accent {
        color: transparent;
    }
    .about-crew__emoji {
        opacity: 1;
    }
    .about-crew__emoji--rocket img {
        animation: none;
    }
}