/**
 * UWAGA: WSZYSTKIE reguly :hover w tym pliku sa zamkniete w
 * @media (hover: hover) and (pointer: fine).
 * Powod: na dotyku przegladarka zostawia "przyklejony" stan hover po tapnieciu.
 * Efekt podmiany tytulu (original jedzie translateY(-100%%), na jego miejsce
 * wjezdza klon) wygladal wtedy jak "podnoszacy sie naglowek", a ze klon jest
 * na mobile ukryty - tekst po prostu znikal (zgloszone przez usera).
 * Nowe reguly hover DOPISUJ ZAWSZE wewnatrz tego media query.
 */

/**
 * Uslugi "cine" - style sportowane z main.css motywu Klikon Media V2
 * (sekcje .services / .cine-*), dostosowane do naszego motywu:
 * - sekcja od razu czarna (u nas poprzedzajacy astronaut-scroll konczy sie
 *   na czarno; w V2 flip jasne->czarne robil GSAP),
 * - preview: spring z GSAP zastapiony transition z lekkim overshootem,
 * - tlo hover (bg-img) pozycjonowane scroll-listenerem jak w V2 (vanilla),
 * - wysokosc wiersza z CSS (25vh = 4 wiersze na ekran, w V2 liczyl to JS).
 */

.services-cine {
    position: relative;
    /* Nad przypietym kadrem astronauty - sekcja wjezdza NA niego w momencie
       wejscia w tablet (ujemny margines nizej), zamiast czekac az pin sie
       odepnie i pokaze goly czarny ekran (zgloszone przez usera). */
    z-index: 3;
    /* Rowne buforowi holdu w .astronaut-scroll / HOLD_VH w
       astronaut-scroll.js - usługi zakrywaja pin dokladnie w oknie czerni. */
    margin-top: -45vh;
    /* Ten sam kolor co astronaut-scroll i portfolio-marquee - user nie chce
       zadnych odciec miedzy sekcjami. */
    background: var(--color-bg, #000408);
}

/* ── Pelnoekranowe tlo hover ─────────────────────────────── */

/* FIXED (bylo absolute + przeliczanie top w JS) - tlo ma wypelniac CALY
   monitor w momencie najechania na usluge, niezaleznie od tego gdzie w
   wysokiej sekcji jestesmy. Sekcja ma position:relative + z-index, wiec ta
   warstwa zostaje w jej kontekscie i siedzi POD lista (z-index 1). */
.services-cine__bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}

.services-cine__bg.is-active {
    opacity: 1;
}

.services-cine__bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity .6s ease;
}

.services-cine__bg-img.is-visible {
    opacity: 1;
}

.services-cine__bg-overlay {
    position: absolute;
    inset: 0;
    /* Mocniejsze przyciemnienie niz w V2 (bylo .65/.5/.4) - user chcial, zeby
       tla hover byly duzo mniej widoczne, tylko jako klimat pod tekstem. */
    background: linear-gradient(to right, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .84) 50%, rgba(0, 0, 0, .78) 100%);
    pointer-events: none;
}

/* Wrappery pod mobilne kolo - na desktopie przezroczyste dla layoutu. */
.services-cine__pin,
.services-cine__wheel {
    display: contents;
}

/* ── Wielki naglowek (wzorzec z referencji Cinery: ogromny napis
      wypelniony gradientem biel->szarosc, na TYM SAMYM tle co lista) ── */

.services-cine__head {
    position: relative;
    z-index: 1;
    /* Maly odstep od gornej krawedzi sekcji - naglowek ma byc widoczny
       natychmiast, gdy usługi wjezdzaja na kadr astronauty. */
    padding: clamp(32px, 5vh, 64px) clamp(2rem, 6vw, 6rem) clamp(48px, 8vh, 110px);
    /* Wieksze wciecie od LEWEJ niz standardowe - logo w belce jest dosuniete
       do krawedzi ekranu (main.css, .site-header__inner.container), wiec
       tresc musi je omijac, zeby nic nie wjezdzalo pod znak firmowy. */
    padding-left: clamp(24px, 13vw, 190px);
}

.services-cine__title {
    margin: 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    /* Baza; kontrast wag robia spany nizej ("Nasze" cienko, "usługi" grubo). */
    font-weight: 500;
    font-size: clamp(3.5rem, 12vw, 11rem);
    line-height: .92;
    letter-spacing: -.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #d8d8db 42%, #3a3a3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Kontrast wag w naglowku (prosba usera): "Nasze" cienko, "usługi" grubo. */
.services-cine__title-thin {
    font-weight: 300;
}

.services-cine__title-bold {
    font-weight: 800;
}

/* ── Lista ───────────────────────────────────────────────── */

.services-cine__list {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 clamp(2rem, 6vw, 6rem);
    /* Jak wyzej - kreski i tytuly zaczynaja sie za obszarem logo. */
    padding-left: clamp(24px, 13vw, 190px);
    z-index: 1;
}

.cine-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.5rem);
    height: 25vh;
    min-height: 180px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: opacity .4s ease, filter .4s ease;
}

.cine-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Focus: podswietlona TYLKO usluga pod kursorem, reszta lekko wyszarzona
   (prosba usera). Wyszarzenie = spadek krycia + desaturacja, dzieki czemu
   rzad "gasnie" miekko zamiast po prostu zniknac. */
@media (hover: hover) and (pointer: fine) {
.services-cine__list:hover .cine-item {
    opacity: .42;
    filter: grayscale(1);
}
}


@media (hover: hover) and (pointer: fine) {
.services-cine__list:hover .cine-item:hover {
    opacity: 1;
    filter: none;
}
}


.cine-item__circle {
    width: clamp(2.8rem, 4.5vw, 4rem);
    height: clamp(2.8rem, 4.5vw, 4rem);
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}

@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__circle {
    border-color: #cc00a6;
    background: radial-gradient(circle, rgba(204, 0, 166, .15) 0%, transparent 70%);
    box-shadow: 0 0 24px rgba(204, 0, 166, .25), inset 0 0 12px rgba(204, 0, 166, .1);
}
}


.cine-item__num {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: clamp(.7rem, 1.1vw, .9rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .08em;
    transition: color .4s ease;
}

@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__num {
    color: #cc00a6;
}
}


.cine-item__title {
    margin: 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    text-transform: uppercase;
}

.cine-item__title-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    height: 1.1em;
}

.cine-item__title-original,
.cine-item__title-clone {
    display: block;
    transition: transform .4s cubic-bezier(.6, .01, .05, .95);
}

.cine-item__title-original {
    color: rgba(255, 255, 255, .85);
}

.cine-item__title-clone {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%);
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #cc00a6;
}

@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__title-original {
    transform: translateY(-100%);
}
}


@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__title-clone {
    transform: translateY(0%);
}
}


/* Miniatura podgladu - CSS spring (w V2 GSAP back.out). */
.cine-item__preview {
    position: absolute;
    right: 22%;
    top: 50%;
    width: clamp(120px, 16vw, 240px);
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-50%) scale(.8);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__preview {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1), transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
}


.cine-item__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cine-item__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 260px;
    text-align: right;
}

.cine-item__desc {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    transition: color .35s ease;
}

@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__desc {
    color: #ffffff;
}
}


.cine-item__arrow {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, .2);
    transition: color .35s ease, transform .35s ease;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
.cine-item:hover .cine-item__arrow {
    color: #cc00a6;
    transform: translateX(4px);
}
}


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

@media (max-width: 768px) {
    /* ── MOBILNE "KOLO" USLUG ─────────────────────────────────
       Sekcja przypina sie na caly ekran; srodkowy wiersz stoi w stalym
       miejscu (aktywny: gradientowy tytul, opis, podmienione tlo), a scroll
       przesuwa liste przez ten srodek. Sasiednie wiersze wygaszone i
       zamaskowane przy krawedziach - "zewnetrzne lekko znikaja".
       Mechanika: services-cine.js kwantyzuje postep pinu do indeksu i
       ustawia --wheel-y; plynnosc robi CSS transition (wzorzec z memory:
       skwantowany krok + transition, nigdy ciagly 1:1 scroll-follow).
       Wysokosc sekcji (budzet scrolla) ustawia JS. */
    .services-cine__pin {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
    }

    /* Tlo hover/aktywnej uslugi: na telefonie ABSOLUTE wewnatrz sticky pinu
       zamiast FIXED na caly ekran - fixed pelnoekranowa warstwa z obrazem
       jest znanym zabojca plynnosci scrolla na Androidzie. Pin i tak pokrywa
       caly ekran przez czas przypiecia, wiec wizualnie zero roznicy. */
    .services-cine__bg {
        position: absolute;
        height: 100%;
    }

    .services-cine__head {
        padding: calc(var(--nav-height, 64px) + 8px) 20px 8px;
        flex: none;
    }

    .services-cine__title {
        font-size: clamp(2.6rem, 13vw, 3.6rem);
    }

    /* Okno kola. Wygaszanie przy krawedziach robia NAKLADKI gradientowe
       (::before/::after), NIE mask-image - maska na kontenerze, ktorego
       dziecko dostaje transform co klatke, zmuszala telefon do rasteryzacji
       calej listy na CPU przy kazdym ruchu (FPS spadal do wartosci
       odbieranych jako zawieszony scroll). Nakladki to statyczne,
       kompozytowane warstwy - koszt zerowy. */
    .services-cine__wheel {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        overflow: hidden;
    }

    .services-cine__wheel::before,
    .services-cine__wheel::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 26%;
        z-index: 2;
        pointer-events: none;
    }

    .services-cine__wheel::before {
        top: 0;
        background: linear-gradient(180deg, rgba(0, 4, 8, .96) 0%, rgba(0, 4, 8, .55) 55%, transparent 100%);
    }

    .services-cine__wheel::after {
        bottom: 0;
        background: linear-gradient(0deg, rgba(0, 4, 8, .96) 0%, rgba(0, 4, 8, .55) 55%, transparent 100%);
    }

    .services-cine__list {
        padding: 0 16px 0 20px;
        /* transform ustawia JS bezposrednio - patrz services-cine.js */
        transform: translateY(0);
        /* BEZ transition na transform - lista jedzie 1:1 ze scrollem (JS),
           transition robila z tego skoki i martwe strefy. Zostaje tylko
           plynne przelaczanie podswietlenia (klasy na wierszach). */
    }

    /* Wiersz o STALEJ wysokosci - krok kola musi byc rowny, wiec zadnych
       auto-wysokosci. Tytul max 2 linie, opis max 2 linie. */
    .cine-item {
        grid-template-columns: auto 1fr;
        gap: 0 1rem;
        height: 148px;
        min-height: 0;
        padding-block: 0;
        align-items: center;
        align-content: center;
        overflow: hidden;
    }

    .cine-item__preview { display: none; }
    .cine-item__arrow { display: none; }

    .cine-item__title {
        font-size: clamp(1.3rem, 6vw, 2rem);
    }

    .cine-item__title-wrap {
        height: auto;
        overflow: visible;
    }

    .cine-item__title-clone { display: none; }

    .cine-item__meta {
        display: block;
        grid-column: 2;
        max-width: none;
        text-align: left;
        margin-top: 4px;
    }

    .cine-item__desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, .55);
    }

    /* Stany kola: wszystko poza srodkiem przygaszone. */
    .services-cine__list.has-active .cine-item {
        opacity: .38;
        filter: grayscale(1);
        transition: opacity .35s ease, filter .35s ease;
    }

    .services-cine__list.has-active .cine-item.is-active {
        opacity: 1;
        filter: none;
    }

    .cine-item.is-active .cine-item__title-original {
        background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #cc00a6;
    }

    .cine-item.is-active .cine-item__circle {
        border-color: #cc00a6;
        background: radial-gradient(circle, rgba(204, 0, 166, .15) 0%, transparent 70%);
        box-shadow: 0 0 24px rgba(204, 0, 166, .25);
    }

    .cine-item.is-active .cine-item__num { color: #cc00a6; }

    .cine-item.is-active .cine-item__desc { color: rgba(255, 255, 255, .85); }
}

@media (prefers-reduced-motion: reduce) {
    .services-cine__bg,
    .services-cine__bg-img,
    .cine-item__preview,
    .cine-item__title-original,
    .cine-item__title-clone {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: USLUGI JAKO ZWYKLA LISTA
   ═══════════════════════════════════════════════════════════════
   Przebudowa po serii nieudanych poprawek kola sterowanego scrollem
   (krok 320 -> 620 -> 320, odroczone tlo, wylaczone tlo, zmienna CSS
   zamieniona na transform, krok zrownany z wysokoscia wiersza).
   Kazda z nich zdejmowala jakis pojedynczy koszt, a sekcja nadal sie
   przycinala - bo problemem bylo samo zalozenie, ze lista ma byc
   przesuwana transformem przy kazdej klatce przewijania.

   Tutaj sekcja jest zwyklym blokiem: przewija sie razem ze strona,
   natywnie, na watku kompozytora. Zero JS w petli scrolla. Wszystkie
   uslugi sa widoczne naraz i czytelne, bez przygaszania - nie ma juz
   "aktywnej" pozycji, bo nie ma czym jej wybierac.
   Na desktopie kolo dziala bez zmian. */
@media (max-width: 768px) {
    .services-cine {
        height: auto;
        min-height: 0;
    }

    .services-cine__pin {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .services-cine__wheel {
        height: auto;
        min-height: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Nakladki gora/dol byly maska "okna" starego kola (26% wysokosci,
       prawie czarne) - kolo tu juz nie istnieje, wheel to caly, wysoki
       blok listy, wiec te same nakladki leza teraz na pierwszych i
       ostatnich uslugach zamiast na krawedziach malego okna. Stad
       zgloszenie usera: dwie pierwsze uslugi wygladaly na przyciemnione
       mocniej niz reszta. */
    .services-cine__wheel::before,
    .services-cine__wheel::after {
        display: none;
    }

    .services-cine__list,
    .services-cine__list.has-active {
        transform: none !important;
        padding-block: clamp(8px, 2vh, 20px);
    }

    /* Wszystkie pozycje pelna sila - bez wygaszania i odbarwiania,
       bo bez kola nie ma aktywnej pozycji. */
    .services-cine__list .cine-item,
    .services-cine__list.has-active .cine-item {
        opacity: 1;
        filter: none;
        transition: none;
    }

    /* Opis bez przyciecia do dwoch linii - skoro wszystko stoi
       nieruchomo, nie ma powodu urywac zdania. */
    .cine-item__desc {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
        color: rgba(255, 255, 255, .72);
    }

    /* Tlo sekcji zostaje jedno, stale - podmiana per usluga i tak byla
       wylaczona na dotyku, bo dekodowanie obrazow w trakcie gestu bylo
       najdrozsza rzecza w tej sekcji. */
    .services-cine__bg { opacity: 1; }
}

/* ── MOBILE: NAGLOWEK PRZYPIETY, LISTA PLYNIE OBOK ──────────────
   Lukasz chce, zeby naglowek trzymal sie ekranu, dopoki nie przewiniesz
   wszystkich uslug. Stara mechanika robila to skryptem: przesuwala liste
   transformem przy kazdej klatce scrolla i to wlasnie sie przycinalo,
   bo konkurowalo z natywnym przewijaniem telefonu.

   Tutaj efekt jest ten sam, a koszt zerowy: przypinamy SAM NAGLOWEK
   (position: sticky), a lista przesuwa sie obok niego zwyklym scrollem
   przegladarki. Sticky liczy kompozytor, nie JavaScript - wiec nic nie
   walczy o klatki. */
@media (max-width: 768px) {
    /* Pin musi znow obejmowac oba bloki, ale NIE przykleja sie sam -
       jest tylko kontenerem, wzgledem ktorego sticky ma sens. */
    .services-cine__pin {
        position: relative;
        display: block;
    }

    .services-cine__head {
        position: sticky;
        top: var(--nav-height, 64px);
        z-index: 3;
        /* Tlo, zeby wiersze listy nie przeswitywaly pod naglowkiem,
           gdy pod niego wjezdzaja. */
        background: linear-gradient(180deg,
            var(--color-bg, #000408) 0%,
            var(--color-bg, #000408) 72%,
            transparent 100%);
        padding-block: clamp(14px, 2.4vh, 24px) clamp(18px, 3vh, 30px);
        margin-bottom: clamp(4px, 1vh, 10px);
    }

    /* Ostatnia usluga potrzebuje zapasu pod soba, zeby dalo sie ja
       wyprowadzic spod przypietego naglowka, zanim sekcja sie skonczy. */
    .services-cine__list {
        padding-bottom: clamp(20px, 4vh, 44px);
    }
}

/* ── MOBILE: podswietlenie uslugi na srodku ekranu ──────────────
   Klase .ma-srodek dokłada services-cine.js razem z obserwatorem.
   Przygaszenie jest delikatne (0.5, bez odbarwiania), bo lista stoi
   nieruchomo i mocniejsze wygaszanie czytaloby sie jak awaria, a nie
   jak akcent. Animujemy WYLACZNIE opacity - to wlasciwosc, ktora
   przegladarka sklada na kompozytorze, wiec nie kosztuje klatek. */
@media (max-width: 768px) {
    .services-cine__list.ma-srodek .cine-item {
        opacity: .38;
        filter: none;
        transition: opacity .3s ease;
    }

    .services-cine__list.ma-srodek .cine-item.is-active {
        opacity: 1;
    }

    /* Ten sam gradient marki co wszedzie indziej (hover na desktopie w tym
       samym pliku, przyciski, badge) - #cc00a6 -> #a01580 -> #7338ea ->
       #4c1d9e. Wczesniej stal tu inny, rozjasniony zestaw kolorow wymyslony
       ad-hoc, zeby podswietlenie nie wygladalo na czarnym tle na wygaszone -
       user zauwazyl, ze to nie jest nasz gradient. */
    .services-cine__list.ma-srodek .cine-item.is-active .cine-item__title-original {
        background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
    }

    /* Opis aktywnej tez jasniejszy niz sasiednie. */
    .services-cine__list.ma-srodek .cine-item.is-active .cine-item__desc {
        color: rgba(255, 255, 255, .92);
    }

    .services-cine__list.ma-srodek .cine-item.is-active .cine-item__num { color: #cc00a6; }

    .services-cine__list.ma-srodek .cine-item.is-active .cine-item__circle {
        border-color: #cc00a6;
        box-shadow: 0 0 22px rgba(204, 0, 166, .4);
    }

    @media (prefers-reduced-motion: reduce) {
        .services-cine__list.ma-srodek .cine-item { transition: none; }
    }
}

/* ── Pozycja prowadzaca do podstrony uslugi ─────────────────────────
   Odnosnik rozciagniety na caly wiersz zamiast oplatania tytulu: klikalne
   jest wszystko, od numeru po strzalke, a struktura pozostaje ta sama,
   wiec animacje wiersza dzialaja bez zmian. */
.cine-item--klikalna { cursor: pointer; }

.cine-item__link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
}

/* Strzalka reaguje takze na kursor nad samym odnosnikiem. */
.cine-item--klikalna:hover .cine-item__arrow { transform: translateX(6px); }