/**
 * Kreacje wideo - lustrzane odbicie portfolio-marquee.css na JASNYM tle:
 * ta sama mechanika (sticky pin, naglowek gasnie, karty wjezdzaja z dolu,
 * dym schodzi, scroll strony napedza poziome przewijanie), ale kierunek
 * przewijania W LEWO (scrollLeft od max do 0, sterowane w video-marquee.js),
 * rzad dosuniety do prawej, fade "z otchlani" na LEWEJ krawedzi, kolory
 * odwrocone (jasne tlo #f5f2ec jak what-you-get - sekcja siedzi zaraz po
 * niej, ciemny tekst). Karty = pionowe wideo 9:16 z generatora portfolio.
 */

.video-marquee {
    position: relative;
    /* Nizszy budzet niz realizacje (490vh) - kart z wideo jest kilka, nie 32,
       wiec poziomego przewijania jest malo; przy tej samej wysokosci scroll
       "stalby w miejscu". */
    height: 220vh;
    /* Ujemny margines - domyka za duza przerwe do what-you-get (zgloszone
       przez usera). Bezpieczny zakres: nie wiekszy niz dolny padding
       what-you-get (80-160px), zeby nieprzezroczysty pin nie przykryl jej
       tekstu, tylko pusty pas paddingu (to samo tlo, zero widocznego szwu). */
    margin-top: clamp(-140px, -8vw, -60px);
    /* Zmienne --vm-* interpoluje video-marquee.js podczas wjazdu sekcji:
       start = kolory jasne (zlanie z what-you-get), w POLOWIE wjazdu na
       ekran = pelna czern (życzenie usera: tlo zmienia sie na czarne w
       polowie zmiany sekcji). Fallbacki = stan jasny (mobile bez JS). */
    background: var(--vm-bg, #f5f2ec);
}

.video-marquee__pin {
    position: sticky;
    top: var(--nav-height, 72px);
    height: calc(100vh - var(--nav-height, 72px));
    background: var(--vm-bg, #f5f2ec);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-start + umiarkowany padding-top (bylo center + ogromny
       padding-bottom jak w realizacjach) - centrowanie zostawialo ~310px
       PUSTKI nad naglowkiem u samej gory sekcji, co razem z dolnym paddingiem
       what-you-get skladalo sie na "za duza przerwe" (zgloszone). Naglowek
       laduje w podobnym miejscu wizualnie (wyzej niz srodek), ale pusta
       strefa nad nim jest o polowe mniejsza. Karuzela to position:absolute -
       jej ladowanie na srodku nie zalezy od tego ukladu. */
    justify-content: flex-start;
    text-align: center;
    padding-inline: clamp(24px, 6vw, 96px);
    gap: clamp(56px, 8vw, 96px);
    padding-top: clamp(120px, 18vh, 220px);
    padding-bottom: clamp(16px, 3vw, 32px);
    overflow: visible;
}

.video-marquee__text {
    transition: opacity .1s linear, transform .1s linear, filter .1s linear;
}

.video-marquee__bottom {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 3vw, 40px);
    /* 22vh (bylo 45vh) - stan poczatkowy zgodny z RIDE_START_VH w
       video-marquee.js: karty widoczne od razu (~3/4 na ekranie), tylko
       podjezdzaja na miejsce tekstu. */
    transform: translateY(calc(-50% + 22vh));
}

.video-marquee__heading {
    margin: 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(2.75rem, 6.5vw, 5.75rem);
    color: var(--vm-ink, #0a0a0a);
}

/* "content" w gradiencie brandu (jak "projekt" w realizacjach) - gradient
   czytelny i na jasnym, i na czarnym tle, wiec przejscie theme jasny->ciemny
   go nie rusza. */
.video-marquee__heading-accent {
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.video-marquee__lead {
    margin: clamp(16px, 2.5vw, 28px) auto 0;
    max-width: 80ch;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--vm-muted, rgba(10, 10, 10, .65));
}

.video-marquee__viewport {
    /* Poziome gesty obsluguje ten pasek, pionowe oddajemy STRONIE.
       UWAGA: musza byc wymienione OBIE osie. Samo `pan-x` znaczy dla
       przegladarki "na tym elemencie wolno przesuwac WYLACZNIE w poziomie",
       czyli dokladnie odwrotnie niz mowil ten komentarz - swipe w gore/dol
       byl ignorowany i strona stala w miejscu, gdy palec trafil w pasek
       (zmierzone 2026-09-22 na emulowanym S22: 70 machniec przesunelo
       strone o 529 px). Przy obu osiach przegladarka sama wybiera kierunek
       po pierwszym ruchu palca: w bok jedzie karuzela, w dol strona. */
    touch-action: pan-x pan-y pinch-zoom;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade na PRAWEJ krawedzi - identycznie jak realizacje (user ostatecznie:
       "tak samo jak realizacje tylko ze w prawo"); na jasnym tle karty
       "wylaniaja sie z bieli". */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 99%);
    mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 99%);
    position: relative;
    --dim: .85;
    transform: translateY(64px);
    transition: transform .1s linear;
}

/* USUNIETE: nakladka "dymu" na kartach (opacity var(--dim)) - user chce, zeby
   kreacje wideo byly widoczne normalnie od poczatku, bez przyciemniania:
   "mają tylko wyświetlać się, działać". Ten patent zostaje w sekcji
   realizacji (portfolio-marquee), gdzie jest czescia efektu wylaniania. */

.video-marquee__viewport::-webkit-scrollbar {
    display: none;
}

.video-marquee__track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: max-content;
    /* Uklad identyczny z realizacjami: rzad startuje 11vw od LEWEJ, karty
       odplywaja za prawa krawedz. padding-right DUZY (45vw) - gwarantuje
       realny nadmiar do przewiniecia W PRAWO niezaleznie od liczby kart
       (przy 4 klipach rzad inaczej miescilby sie w ekranie, maxScrollLeft=0
       i przewijanie by nie istnialo - ta sama lekcja co w realizacjach).
       Gdy kreacji przybedzie, nadmiar bedzie naturalny a padding zostanie
       tylko "oddechem" na koncu jazdy. */
    padding-left: 11vw;
    padding-right: 45vw;
    /* Pionowy oddech na CIEN kart - viewport ma overflow-y:hidden (wymusza
       to overflow-x:auto), wiec box-shadow wystajacy poza pudelka kart byl
       twardo ucinany gora/dolem ("widac linie", zrzut od usera). Padding
       trzyma cien WEWNATRZ przycinanego obszaru. */
    padding-block: 44px;
}

.video-marquee__item {
    display: block;
    flex: 0 0 auto;
    position: relative;
    /* 18.5vw (bylo 15.2vw - miescilo sie 5+ kart) - user chcial 4.5 boksa w
       widoku, jak w realizacjach: dostepne 89vw / 4.5 kart z gapami => ~18.5vw.
       Wysokosc ~1.6 w/h - kompromis miedzy proporcja wideo 9:16 (2.0, byloby
       713px - nie miesci sie w pinie) a szerokoscia; object-fit:cover
       delikatnie przytnie klip gora/dolem. */
    width: clamp(280px, 18.5vw, 380px);
    height: clamp(420px, 29.6vw, 600px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--vm-card, #e8e4dc);
    box-shadow: 0 8px 30px var(--vm-shadow, rgba(0, 0, 0, .18));
}

.video-marquee__item-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    /* BEZ grayscale/przygaszenia (bylo: zgaszone do hover, lustro sekcji
       realizacji) - kreacje wideo maja byc widoczne w pelnym kolorze przez
       caly czas, same graja w petli (prosba usera). */
}

.video-marquee__item-media video,
.video-marquee__item-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

/* Oficjalny odtwarzacz platformy (TikTok/YouTube) wstrzykiwany przez
   video-marquee.js. Przykrywa miniature, gdy sie zaladuje. pointer-events
   wylaczone - klikniecie ma isc do linku karty, nie do playera. */
.video-marquee__item-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
    background: #000;
}

/* Plakietka platformy (TikTok / Instagram / Facebook / YouTube) w rogu karty -
   delikatna, szklana, nad wyszarzeniem karty (z-index 3 > dym .item::after). */
.video-marquee__item-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(10, 10, 10, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: .75;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.video-marquee__item:hover .video-marquee__item-badge {
    opacity: 1;
    transform: scale(1.06);
}

.video-marquee__item-badge img {
    display: block;
    width: 16px;
    height: 16px;
}

.video-marquee__item-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    /* NAD wyszarzeniem karty (::after ma z-index 2) - bez tego podpis byl
       przykryty nakladka i robil sie szary/nieczytelny na jasnych klatkach
       (zgloszone przez usera). */
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .15em;
    padding: 2.2rem 1.1rem .9rem;
    text-align: left;
    /* Mocniejszy cien pod tekstem - podpis musi byc czytelny takze na bardzo
       jasnych kadrach (np. zielona plansza TikToka). */
    background: linear-gradient(0deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .78) 45%, rgba(0, 0, 0, .3) 75%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
}

.video-marquee__item:hover .video-marquee__item-caption {
    opacity: 1;
    transform: translateY(0);
}

.video-marquee__item-title {
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.3vw, 1.35rem);
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

/* Licznik wyswietlen (ACF vp_views) - drobny wiersz nad tagiem. */
.video-marquee__item-views {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: clamp(.8rem, .95vw, .92rem);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.video-marquee__item-views::before {
    content: "";
    width: 1em;
    height: 1em;
    background: currentColor;
    /* Oko - maska SVG inline, zero dodatkowego requestu. */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
}

.video-marquee__item-tag {
    font-size: clamp(.85rem, 1vw, 1rem);
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--color-primary-light, #e879f9);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

@media (max-width: 768px) {
    /* ── MOBILE: KROTKI PIN + natywna karuzela swipe ───────────
       Wersja bez pinu (sekcja w zwyklym przeplywie) gubila caly rytm
       przejscia: naglowek po prostu odjezdzal razem ze strona. User chce
       tego samego co na desktopie, tylko krocej - sekcja LAPIE sie na
       ekranie, jeden ruch palcem wypycha naglowek do tylu i podciaga
       karuzele z dolu, a potem pin puszcza i strona jedzie dalej.
       Budzet przypiecia: 100svh (przejscie zjada pierwsze ~55%, reszta to
       oddech na obejrzenie/przewiniecie kart). POZIOMY przesuw kart zostaje
       natywny (overflow-x + scroll-snap) - na dotyku nic tego nie pobije,
       patrz historia trzech nieudanych podejsc wyzej. */
    .video-marquee {
                /* BUDZET PRZEWIJANIA: 260svh, bylo 100svh.
           Przy 100svh cale przejscie (naglowek do tylu, karuzela z dolu)
           mialo 0.48 x 844 = ok. 405 px przewijania. Jedno mocniejsze
           pociagniecie palcem na telefonie to 1500 px i wiecej, wiec
           animacja przelatywala w ulamku gestu i ladowales od razu w
           kolejnej sekcji - zgloszone przez usera jako "za szybko,
           przeskakuje". Teraz przejscie dostaje ok. 1050 px, czyli tyle,
           ze nawet szybki flick go nie zjada w calosci. Sasiednie sekcje
           dla porownania: uslugi 3.44 ekranu, astronauta 5.62. */
        height: calc(100svh + 160svh);
    }

    .video-marquee__pin {
        position: sticky;
        /* Pod stalym paskiem nawigacji, tak jak na desktopie. */
        top: var(--nav-height, 64px);
        height: calc(100svh - var(--nav-height, 64px));
        /* Dolny padding podnosi naglowek nad geometryczny srodek (ta sama
           sztuczka co na desktopie) - inaczej nad nim zostaje 266 px pustki,
           a karuzela ledwo wystaje zza dolnej krawedzi. Karuzeli to nie
           rusza, bo jest position:absolute, poza przeplywem. */
        display: flex;
        flex-direction: column;
        /* flex-start, NIE center. Przy wysrodkowaniu naglowek stal 323 px od
           gory pinu, wiec gdy sekcja wjezdzala z dolu, miedzy ostatnia usluga
           a "Kazdy projekt to osobna misja" zostawal wielki czarny pas
           (zgloszone przez usera). Od gory naglowek pokazuje sie od razu,
           a karuzela i tak jest position:absolute na 50%, wiec jej to nie
           rusza. */
        justify-content: flex-start;
        padding-top: clamp(40px, 8svh, 76px);
        gap: clamp(18px, 3.5vh, 30px);
        overflow: visible;
    }

    /* opacity/transform/filter pisze JS (postep przypiecia). */
    .video-marquee__text {
        padding: 0 20px;
    }

    .video-marquee__heading {
        font-size: clamp(1.9rem, 8.5vw, 2.5rem);
    }

    /* Wyjete z przeplywu - inaczej flex-center rezerwowalby miejsce na
       cala karuzele i naglowek wyladowalby przy gornej krawedzi. Pozycje
       w pionie pisze JS: od +45svh (wystaje z dolu) do 0 (na srodku). */
    .video-marquee__bottom {
        position: absolute;
        inset-inline: 0;
        top: 50%;
        transform: translateY(calc(-50% + 45svh));
        gap: clamp(16px, 3vh, 26px);
    }

    .video-marquee__viewport {
        --dim: 0;
        transform: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .video-marquee__track {
        gap: 14px;
        padding-left: 19vw;
        padding-right: 19vw;
        justify-content: flex-start;
        transform: none;
    }

    .video-marquee__item {
        width: 62vw;
        scroll-snap-align: center;
        opacity: 1;
    }

    .video-marquee__item-media {
        filter: none;
    }

    .video-marquee__item-caption {
        opacity: 1;
        transform: none;
    }

    /* Strzalki karuzeli - przewijaja natywny pasek o jedna karte. */
    .video-marquee__arrows {
        display: flex;
        justify-content: center;
        gap: 14px;
    }

    .video-marquee__arrow {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 1px solid rgba(204, 0, 166, .55);
        background: linear-gradient(135deg, rgba(204, 0, 166, .18), rgba(115, 56, 234, .18));
        color: #1a1a1e;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s ease, transform .1s ease;
    }

    .video-marquee__arrow:active {
        transform: scale(.92);
        background: linear-gradient(135deg, rgba(204, 0, 166, .4), rgba(115, 56, 234, .4));
    }

    .video-marquee__arrow svg {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-marquee {
        height: auto;
    }
    .video-marquee__pin {
        position: static;
        height: auto;
    }
    .video-marquee__track {
        flex-wrap: wrap;
        width: 100%;
    }
}

/* Strzalki tylko na dotyku - desktop przewija karuzele scrollem. */
@media (min-width: 769px) {
    .video-marquee__arrows { display: none; }
}