/* ============================================================================================================
                                      1. DEFINICJA CZCIONKI ALLER
   ============================================================================================================ */

@font-face {
    font-family: 'Aller';
    src: url('https://fonts.cdnfonts.com/s/12/Aller_Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




/* ============================================================================================================
                                      2. RESET I PODSTAWY
   ============================================================================================================ */


html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable; 
    overflow-x: hidden;  
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Aller", sans-serif;
    color: white;
    background: transparent; 
    overflow-x: hidden;
    letter-spacing: 2px; 
}


.s { 
    font-size: 75% !important; 
}
.w { 
    letter-spacing: 5px !important; 
}


/* Style linków tylko dla sekcji Revelation i Reviews */
#revelation a, 
#reviews a {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

#revelation a:hover, 
#reviews a:hover {
    text-decoration: underline !important;
}


/* ============================================================================================================
                                      3. TŁO WIDEO
   ============================================================================================================ */


.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Wideo pod spodem */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;

/* --- NASZ OBRAZEK STARTOWY --- */
    background-image: url('files/bg-jpg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#bg-video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    margin-top: -20px;
    transform: scale(0.35); 
    object-fit: cover;
    filter: brightness(1);  

/* --- PŁYNNE POJAWIENIE SIĘ WIDEO NAD OBRAZKIEM (opcjonalnie) --- */
    transition: filter 0.8s ease, transform 0.8s ease, opacity 0.5s ease;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, black 80%);
}






/* Jeśli kurtyna jest widoczna, tło MUSI być rozmyte i przyciemnione */
body:has(.long-curtain.is-visible) #bg-video {
    filter: brightness(0.2) blur(20px) !important;
    transform: scale(0.3) !important; /* Domyślna skala dla kurtyny */

transition: transform 0.8s ease; /* Płynne powracanie */
}

/* WYJĄTEK: Jeśli jesteśmy w sekcji LISTEN, nadpisujemy skalę na 0.35 */
body:has(#listen.show-logos) #bg-video {
    transform: scale(0.35) !important;
    /* brightness i blur zostaną pobrane z reguły wyżej */
}




/* —————————————————————————efekt rozmycia w kolejnych sekcjach——————————————————————————————— */
/* Stan bazowy wideo (w sekcji Revelation) */
#bg-video {
    transition: filter 0.8s ease, transform 0.8s ease; /* Płynne przejście efektu */
    filter: brightness(1) blur(0px);
}

/* Stan, gdy użytkownik zjedzie niżej (klasa dodawana przez JS) */
#bg-video.scrolled-down {
    filter: brightness(0.2) blur(20px); /* Mocne przyciemnienie i rozmycie */
    transform: scale(0.3); /* Opcjonalnie: lekkie powiększenie przy rozmyciu dodaje głębi */
}

/* Jeśli kurtyna jest widoczna, tło MUSI być rozmyte - koniec kropka */
.long-curtain.is-visible ~ #bg-video,
body:has(.long-curtain.is-visible) #bg-video {
    filter: brightness(0.2) blur(20px) !important;
    transform: scale(0.3) !important;
}




/* ============================================================================================================
                                      4. GŁÓWNY KONTENER
   ============================================================================================================ */


.content-container {
    display: flex;
    background: transparent;
    position: relative;
    z-index: 1;
}






/* ============================================================================================================
                                      5. MENU PO LEWEJ STRONIE
   ============================================================================================================ */


.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 430px;   
    height: 100vh;
    padding: 100px 90px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-sizing: border-box;
}

.main-logo {
    width: 100%;
    max-width: 130px;
    height: auto;
    margin-bottom: 22px;
    letter-spacing: normal;  
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    margin-bottom: 2.5px;
}


/* Styl dla ikonek flag */
.flag-icon {
    width: 18px;         /* Szerokość flagi - możesz zmienić */
    height: auto;        /* Zachowanie proporcji */
    vertical-align: middle; 
    transition: opacity 0.3s ease, transform 0.2s ease;
    opacity: 0.3;        /* Domyślnie lekko przygaszone */
}

/* Tylko wybrana flaga - pełna widoczność, ale rozmiar standardowy */
.lang-switcher a.active .flag-icon {
    opacity: 1;
    transform: scale(1); /* Rozmiar standardowy */
}

/* Efekt najechania - flaga się rozjaśnia i powiększa */
.lang-switcher a:hover .flag-icon {
    opacity: 1;
    transform: scale(1.15); /* Powiększa się tylko przy najechaniu */
    cursor: pointer;
}


/* Usunięcie podkreśleń i innych efektów tekstowych z linków z flagami */
.lang-switcher a {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}


/* ---     ———————————————————————————————————————————————————————————————     --- */
/* P O D S T A W O W Y   S T A N   L I N K Ó W   W   M E N U   (zawsze białe) */

.nav-links a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 20px;      
    font-weight: normal;
    letter-spacing: 13px;    
    text-transform: uppercase;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* E F E K T   N A J E C H A N I A   M Y S Z K Ą  (lekkie wyszarzenie / przezroczystość) */

.nav-links a:hover {
    opacity: 0.5;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* E F E K T   K L I K N I Ę C I A   ( A K T Y W N A   K O T W I C A ) - Po kliknięciu w adresie pojawi się np. #lyrics */

.nav-links a.active-link {
    color: #0587e3 !important;
    opacity: 1 !important;
}

/* Dodatkowy trik dla przeglądarek: wybór stały po kliknięciu */
:target ~ .content-container .side-menu .nav-links a[href*="#"] {
    /* To zapewnia, że styl zostanie przy wybranym elemencie */
}

/* Najprostsza metoda na "zaznaczenie" wyboru w CSS */
.nav-links a:focus {
    color: #0587e3 !important;
    outline: none;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* G Ł Ó W N Y   K O N T E N E R   J Ę Z Y K Ó W */

.lang-switcher {
    margin-top: 38px;
    font-family: "Aller";  
    letter-spacing: 3px;
    font-size: 16px;   
    font-weight: normal;
}

/* STYL DLA WSZYSTKICH LINKÓW (DOMYŚLNIE SZARE) */
.lang-switcher a {
    color: #888;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s;
}

/* STYL DLA LINKÓW PO NAJECHANIU MYSZKĄ */
.lang-switcher a:hover {
    color: white;
}

/* STYL DLA AKTYWNEGO (WYBRANEGO) JĘZYKA - MUSI BYĆ NIŻEJ NIŻ OGÓLNE 'a' */
.lang-switcher a.active {
    color: white; 

}

/* STYL DLA CIENKICH KRESEK | */
.lang-switcher .separator {
    color: #777; 
    font-weight: 100; 
    padding: 0 0.5px;
    font-family: Arial, sans-serif; 
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* S T Y L   T Y L K O   D L A   N A P I S U   ' C H O O S E   L A N G U A G E ' */

.lang-switcher p {
    font-family: "Aller";  
    margin-bottom: 4.5px;       /* interlinia */
    font-size: 12px;           /* Możesz go zmniejszyć względem linków */
    font-weight: normal;      /* Np. brak pogrubienia */
    letter-spacing: 2px;      /* Zmieniony, mniejszy kerning dla napisu */
    text-transform: lowercase; /* Małe litery, jeśli tak chcesz */
    color: #9c9c9c;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* S T Y L   L O O P  P L A Y E R */

.loop-switcher {
    margin-top: 38px; /* Odległość identyczna jak od menu do języków */
    font-family: "Aller";  
    letter-spacing: 2px;
    font-size: 12px;   
    font-weight: normal;
}

.loop-switcher p {
    font-family: "Aller";  
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: #9c9c9c;
}

.loop-switcher a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

.loop-switcher a:hover {
    color: white;
}

.loop-switcher a.active {
    color: #007bd1; /* Kolor gdy dany loop gra */
    font-weight: bold;
}

.loop-switcher .separator {
    color: #777; 
    font-weight: 100; 
    padding: 0 0.5px;
    font-family: Arial, sans-serif; 
}






/* ============================================================================================================
                                      6. PRAWA STRONA - CAŁA TREŚĆ
   ============================================================================================================ */



/* --- —————————————————————————————————————————————————————————————————————————————— --- */
/* --- S E K C J A   R E V E L A T I O N   (I KOLEJNE) --- */

/* 1. KONTENER GŁÓWNY */
.main-content {
    margin-left: 430px; /* Szerokość menu */
    position: relative;
    width: calc(100% - 430px); /* Wymuszamy szerokość pozostałej części ekranu */
}

/* 2. TERMINAL (REVELATION) */
.terminal-section {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Trzyma kolumnę po prawej */
    align-items: flex-end;     /* KLUCZ: Spycha tekst na sam dół ekranu */
    padding-right: 80px;       /* Margines od prawej krawędzi */
    padding-bottom: 120px;     /* KLUCZ: Twoje ~3cm odstępu od dolnej belki */
    z-index: 1;
    box-sizing: border-box;
}

.terminal-wrapper {
    width: 400px;              /* Szerokość Twojej kolumny */
    color: white;
    font-family: 'Aller', sans-serif;
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    
    /* To sprawia, że tekst "rośnie" do góry */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
}


/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S T Y L E   S E K C J I   L Y R I C S     --- */


/* 1. CAŁKOWITE USUNIĘCIE PASKA PRZEWIJANIA Z CAŁEJ STRONY (likwiduje czarny margines) */
html, body {
    -ms-overflow-style: none !important;  /* IE i Edge */
    scrollbar-width: none !important;     /* Firefox */
}

html::-webkit-scrollbar, 
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. GŁÓWNY KONTENER KURTYNY - To jest Twoja jedyna kurtyna */
.long-curtain {
    position: fixed;
    bottom: -100%;        /* Schowana */
    left: 490px;
    width: calc(100% - 490px);
    height: 100vh;
    z-index: 100;
    overflow-y: auto;    /* Przewijanie treści wewnątrz kurtyny */
    transition: bottom 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;


    /* Ukrywamy pasek wewnątrz kurtyny */
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: y mandatory; 
}

/* Ukrycie paska dla Chrome, Safari i Opery */
.long-curtain::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Stan wysunięty CAŁEJ kurtyny */
.long-curtain.is-visible {
    bottom: 0;
}



/* Sekcja Lyrics */
.lyrics-block {
    min-height: 100vh;
    padding: 100px 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 90, 200, 0.5); 
}


/* Sekcja Reviews */
.reviews-block {
    min-height: 100vh;           /* Każda sekcja w kurtynie ma wysokość ekranu */
    width: 100%;
    display: flex;
    flex-direction: column;      /* Układa zawartość pionowo */
    justify-content: flex-start; /* Zaczyna od góry */
    align-items: center;
    background: rgba(0, 14, 61, 0.6); 
    padding: 100px 0 0 0 !important; /* Odstęp od góry, bok i dół na ZERO */
    box-sizing: border-box;
    scroll-snap-align: start;
}

.lyrics-block, .reviews-block, #listen {
    scroll-snap-align: start; /* Każda sekcja chce się ustawić na początku ekranu */
scroll-snap-stop: always;
}

/* WSPÓLNE STYLE DLA TREŚCI (Jeden raz, porządnie) */
.lyrics-content, .reviews-content {
    max-width: 100%;			 
    width: 100%;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Aller', sans-serif;
    font-size: 10px;
    line-height: 1.2;
    padding: 0;			
    box-sizing: border-box;
}





/* 4. KURSOR */
.cursor {
    display: inline-block;
    width: 7px;
    height: 10px;
    background: white;
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}




/* 5. KONTENER PLAYERA - tutaj ustawiasz tło i przezroczystość */
.custom-player {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1); /* Szary, półprzezroczysty (0.1) */
    padding: 5px 20px;
    border-radius: 50px;
    margin: 40px 0 50px 0;
    border: 1px solid rgba(255, 255, 255, 0.4);

    max-width: 280px;  /* ogranicza szerokość paska */
    margin-left: auto; /* centruje w poziomie */
    margin-right: auto; /* centruje w poziomie */
}

/* Sam przycisk - teraz jest mały i nie zabiera zbędnego miejsca */
.player-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8); 
    font-weight: bold;
    cursor: pointer;
    font-family: sans-serif;
    width: 20px;         /* Zmniejszyłem z 30px na 20px */
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;      /* Blokuje kurczenie się przycisku */
}

/* Same cyferki - mniejsza czcionka i brak sztywnej szerokości */
.time-display {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;     /* Tutaj zmniejszasz wielkość cyferek */
    font-family: sans-serif;
    font-weight: bold;
    min-width: 35px;     /* Dajemy tylko tyle, by czas się zmieścił */
    text-align: right;
    flex-shrink: 0;      /* Blokuje kurczenie się czasu */
}

/* Pasek postępu - tło */
.progress-container {
    flex-grow: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.8); /* Jasny czarny */
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

/* Pasek postępu - stan naładowania (kolor CZARNY) */
.progress-bar {
    width: 0%;
    height: 100%;
    background: #00a7ec !important;  
    border-radius: 2px;
}

/* Styl dla linijek tekstu */
.lyric-line {
    transition: color 0.9s ease, opacity 0.5s ease;
    opacity: 1;  
    color: #ffffff;  
}

.lyric-line.active {
    opacity: 1;
    color: #4acaff; /* Kolor podświetlenia */
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.9);
}






/* Zapobiega "haczeniu" scrolla o linki w terminalu */
#terminal-content a {
    pointer-events: auto; /* Standardowo działają */
}

/* Opcjonalnie: jeśli problem jest uciążliwy, można na czas scrollowania 
   dodawać klasę blokującą interakcję z linkami, ale najpierw sprawdź poprawkę JS poniżej */

/* Gdy kurtyna jest widoczna, wyłączamy linki w terminalu, żeby nie blokowały scrolla */
body:has(.long-curtain.is-visible) #terminal-content a {
    pointer-events: none !important;
}

/* Kiedy kurtyna zniknie, linki znów będą działać normalnie */





/* Płynne wyłanianie i zanikanie liter digitalizacji */
#terminal-content {
    transition: opacity 0.6s ease-out, filter 0.6s ease-out;
    will-change: opacity, filter; /* Informacja dla karty graficznej, żeby działało super gładko */
}





/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S T Y L E   S E K C J I   R E V I E W S     --- */

/* Wnętrze Reviews - to musi rozciągać się na całą dostępną wysokość */
.reviews-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;                /* To sprawia, że ten div wypełnia całe Reviews */
    width: 100%;
    max-width: 100%;             /* Galeria dotknie krawędzi */
    padding: 0;
    box-sizing: border-box;
}

/* Układ dwukolumnowy dla recenzji */
.reviews-grid {
    display: flex;
    justify-content: space-between;
    gap: 160px; /* odległość między dwoma kolumnami */
    max-width: 1010px; /* To trzyma tekst w ryzach, to szerokość kazdej kolumny */
    margin: 0 auto 0px auto; /* Auto centruje recenzje */
    padding: 0 40px; /* Odstęp tekstu od krawędzi na małych ekranach, Margines bezpieczeństwa dla tekstu */
}

.reviews-col {
    flex: 1;
}

.review-item {
    margin-bottom: 40px;
    text-align: center; 
}





.review-item h3 {
    font-size: 13px;
    color: #ffffff; 
    margin-bottom: 13px;
    letter-spacing: 2.2px;
}

.review-item p {
    font-size: 9.7px;
    line-height: 1.6;
    color: #ffffff;
    opacity: 0.9;
    letter-spacing: 2.3px;
    text-transform: uppercase; /* Dla zachowania stylu ze screena */
    font-family: 'Aller', sans-serif;
    font-weight: normal;
}







.reviews-text-wrapper {
    flex-grow: 1;               /* Zabiera całe wolne miejsce */
    display: flex;
    flex-direction: column;     /* Układa nagłówek nad gridem */
    justify-content: flex-start;  /* Lepsze wyśrodkowanie wobec galerii i układa txt od góry, dzięki czemu nagłówek 'reviews' w każdym języku widnieje w tym samym miejscu */
    align-items: center;        /* Centruje w poziomie */
    width: 100%;
    margin-top: -2px;
}



/* Ważne: usuń ewentualne marginesy z nagłówków h2, żeby nie przesuwały środka */
.reviews-text-wrapper h2 {
    margin-top: 0;
}


/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S T Y L E   D L A   G A L E R I I     --- */

.gallery-container {
    position: relative;
    width: 100%; /* Teraz 100% oznacza całą szerokość kurtyny od 490px do krawędzi ekranu */
    height: 240px; /* Wysokość sekcji z fotkami */
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border-top: 5px solid #0068c4; /* ten sam kolor co w stopce */
    /* ---------SYMULACJA DWUKOLOROWEGO BORDERA (ŁĄCZNIE 39px)----------- */
    /* Dolna część galerii: zamiast jednokolorowego border-bottom dajemy paddingi w dwóch kolorach, taki shadow-box */
            padding-bottom: 39px;    /* taka jest obliczona grubość footera/stopki */
            border-bottom: none; 
    /* Malujemy te 39px dwoma kolorami od dołu: najpierw kładziemy CZARNY na całe 34px, a potem kładziemy NIEBIESKI na całe 39px (wejdzie pod czarny, wystawi 5px) */
            box-shadow: 
             inset 0 -29px 0 0 #000000, 
             inset 0 -39px 0 0 #0068c4;
    /* ------------------------------------------------------------------ */
    margin-top: auto;
    display: flex;
    align-items: center;
}

.gallery-track {
    display: flex;
    width: max-content;
    height: 100%;
    align-items: center;
    gap: 0px;
    padding: 0px;
    will-change: transform; /* Optymalizacja dla płynności */
}

.gallery-track img {
    height: 100% !important; /* Wymuszamy konkretną wysokość zdjęć */
    width: auto;
    display: block;   /* Usuwa drobny odstęp pod obrazkiem */
    margin: 0; /* Upewnij się, że nie ma marginesów */
    padding: 0;
    cursor: pointer;
    transition: all 0.6s ease;
    will-change: transform;  /* NAPRAWIA PRZESKOKI PRZY SKALOWANIU OBRAZKÓW (ZAZWYCZAJ WYSTĘPUJĄCE GDY OBRAZ WRACA Z POWIĘKSZENIA DO PIERWOTNEGO WYMIARU */
    filter: brightness(0.9) contrast(1.08);     /* przyciemnione minimalnie obrazki na start - brightness(0.9) = przyciemnienie o 10%, a contrast(1.1) = zwiększenie kontrastu o 8% */
}

.gallery-track img:hover {
    transform: scale(1.02); 
    filter: brightness(1) contrast(1);
}



/* ---Półprzezroczyste przyciski boczne--- */
.gallery-nav {
    position: absolute;
    top: 0;
    height: 100%;
    width: 80px;
    border: none;
    background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0));
    color: rgba(255, 255, 255, 0.5);
    font-size: 30px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s;
}

.gallery-nav.next {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.gallery-nav:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}


/* --- LIGHTBOX (Okienko z X) --- */
.lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 85%;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 50px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}



.close-btn:hover {
    color: #0068c4;      /* Zmienia kolor na Twój niebieski */
    transform: scale(1.4); /* Opcjonalnie: delikatnie powiększa X, żeby był bardziej responsywny */
    transition: all 0.3s ease; /* Zapewnia płynną zmianę koloru */
}





/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S E K C J A   L I S T E N / B U Y     --- */


#listen {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important; /* Szklana podłoga - widzimy wideo pod spodem */
    position: relative;
    padding: 0px 0;
}

.listen-container {
    text-align: center;
    width: 100%;
    max-width: 800px;
}

/* Stan początkowy animacji - niewidoczne i małe */
.listen-header h2, 
.stream-link,
.press-kit-btn {
    opacity: 0;
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efekt sprężynowania */
}

/* Klasa aktywująca animację (dodawana przez JS) */
#listen.show-logos .listen-header h2,
#listen.show-logos .stream-link,
#listen.show-logos .press-kit-btn {
    opacity: 1;
    transform: scale(1);
}

/* Opóźnienia dla logosów, żeby pojawiały się jeden po drugim */
#listen.show-logos .stream-link:nth-child(1) { transition-delay: 0.05s; }
#listen.show-logos .stream-link:nth-child(2) { transition-delay: 0.10s; }
#listen.show-logos .stream-link:nth-child(3) { transition-delay: 0.15s; }
#listen.show-logos .stream-link:nth-child(4) { transition-delay: 0.20s; }
#listen.show-logos .stream-link:nth-child(5) { transition-delay: 0.25s; }
#listen.show-logos .stream-link:nth-child(6) { transition-delay: 0.30s; }
#listen.show-logos .stream-link:nth-child(7) { transition-delay: 0.35s; }
#listen.show-logos .stream-link:nth-child(8) { transition-delay: 0.40s; }
#listen.show-logos .stream-link:nth-child(9) { transition-delay: 0.45s; }
 
/* Opóźnienie dla przycisku, żeby wyłonił się zaraz po ostatnim logo (0.45s + mały zapas) */
#listen.show-logos .press-kit-btn {
    opacity: 1;
    transform: scale(1);
    transition-property: opacity, transform;
    transition-delay: 0.45s; /* Ustawiamy ciut więcej niż ostatnie logo (0.45s) */
}


/* Reszta Twoich stylów siatki (grid) i przycisku zostaje bez zmian */
.streaming-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);           /*  1. Kolumny dopasują się do szerokości logo, nie będą "puste" w środku */
    justify-content: center;                          /*  2. To przesunie całą siatkę na środek kontenera */
    justify-items: center;                            /*  3. To sprawi, że każde logo będzie wycentrowane wewnątrz swojej kolumny */
    align-items: center;
    row-gap: 50px;                                    /* Odstęp między wierszami (interlinia) */
    column-gap: 180px;                                /* Odstęp między kolumnami (szerokość) */
    margin: 50px 0;
}

.stream-link img { 
    width: 190px; 
    filter: brightness(0) invert(1); 
    transition: all 0.6s ease;
    opacity: 0.9; /* białe, ale nie krzyczy kontrastem, bardzo subtelny efekt */
}

.stream-link img:hover { 
    filter: grayscale(0) invert(0) brightness(1);
    transform: scale(1.1); 
    opacity: 1;
}



.press-kit-btn {
    display: inline-block;
    margin-top: 60px; /* odstęp od logosów */
    padding: 9px 19px;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 2px;
    transition: 0.3s ease; /* Płynne przejście kolorów */
}
 
#listen.show-logos .press-kit-btn:hover {
    transition-delay: 0s;
    background: white;
    color: black;
}













/* ============================================================================================================
                                      7. STOPKA - CZCIONKA ALLER
   ============================================================================================================ */


.main-footer {
    background-color: #0068c4;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}

.footer-link {
    color: #ccc;
    text-decoration: none;
    font-family: 'Aller';  
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 5px;
}

.footer-link:hover {
    color: #fff;
}






/* ============================================================================================================
                                      8. SYSTEM PRZEŁĄCZANIA JĘZYKÓW
   ============================================================================================================ */


           /* Domyślnie ukrywamy wszystkie treści oznaczone klasą językową */
.content-lang {
    display: none;
    animation: fadeEffect 1s;
}

           /* Ta klasa będzie dodawana przez JavaScript do wybranego języka */
.content-lang.active {
    display: block;
}

           /* Specjalna zasada dla tekstów wewnątrz linii (np. w trackliście), żeby po przełączeniu nie wskakiwały do nowej linii */
span.content-lang.active {
    display: inline;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}








/* ============================================================================================================
                                      9. MINI PLAYER (TRACK PREVIEW)
   ============================================================================================================ */


/* Styl dla ikonki samplera */
.sampler-btn {
    cursor: pointer;
    margin-left: 6px;
    display: inline-block;
    transition: color 0.3s ease;
}


@keyframes samplerPulse {
    from { opacity: 1; }
    to { opacity: 0.3; }
}

/* Styl dla odlicznika (30s) */
.sampler-timer {
    font-size: 8px;
    color: #c9c9c9;
    margin-left: 8px;
    font-family: monospace;
    vertical-align: middle;
}

/* Dodajemy łapkę dla ikonek play */
.sampler-btn {
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.3s ease;
}

/* Animacja migania dla ikonki play */
.sampler-btn.playing {
    animation: samplerBlink 1s infinite alternate;
    color: #4acaff; /* Opcjonalnie: zmieni kolor na błękitny podczas grania */
}

@keyframes samplerBlink {
    0% { opacity: 1; }
    100% { opacity: 0.2; }
}





/* ============================================================================================================
                                     10. RESPONSIVE DESIGN (MOBILE)
   ============================================================================================================ */

/* Gdy ekran jest mniejszy niż 1024px (tablety i telefony) */
@media (max-width: 1024px) {

html, body {
    scroll-behavior: auto !important; /* Wyłączamy płynne przewijanie przy starcie, by uniknąć "pływania" */
    overflow-x: hidden !important; /* To dodatkowo zablokuje jakiekolwiek drgania na boki */
}

                                                            /* W I D E O   -   B A C K G R O U N D   N A   M O B I L E */

    #bg-video {
        /* Wymuszamy, by wideo zawsze wypełniało ekran, nawet jeśli je trochę przytnie */
        object-fit: cover !important; 
        width: 100vw !important;
        height: 100vh !important;
        will-change: transform;
        transform: scale(1) !important; /* Na mobile rezygnujemy z animacji skali, by nie "pływało" */
        margin-top: 0 !important;
        
        /* Twoje życzenie: stałe rozmycie i przyciemnienie */
        filter: brightness(0.3) blur(10px) !important;
        
        /* Wyłączamy przejścia (transition), żeby telefon nie "mulił" przy zmianach */
        transition: none !important;
    }

    /* Usuwamy czarne pasy (gradient), jeśli przeszkadzają */
    .video-overlay {
        background: rgba(0, 0, 0, 0.1); /* Lekka warstwa czerni zamiast radialnego gradientu */
    }

/* BLOKADA SKALOWANIA: Nawet gdy kurtyna jest widoczna, skala ma stać w miejscu */
    body:has(.long-curtain.is-visible) #bg-video,
    body:has(#listen.show-logos) #bg-video,
    #bg-video.scrolled-down {
        transform: scale(1) !important; /* Wymuszamy brak pomniejszania */
        filter: brightness(0.3) blur(10px) !important; /* Stały efekt wizualny */
    }

    /* Opcjonalnie: Jeśli kurtyna przesuwa wideo, zablokujmy to */
    .long-curtain.is-visible ~ #bg-video {
        transform: scale(1) !important;
    }


                                                            /* M E N U */

/* Układ pionowy zamiast poziomego */

    .content-container {
        flex-direction: column; 
    }



/* 1. Ustawiamy menu, by przesuwało się z całą stroną (nie fixed) */
    .side-menu {
        position: relative !important; /* Zamiana z fixed na relative */
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 40px 20px !important;
        
        /* Wyśrodkowanie wszystkich elementów wewnątrz */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        text-align: center !important;
        
        background: transparent !important; /* Tło bierze z wideo pod spodem */

top: 0 !important;
left: 0 !important;
    }

/* 2. Wyśrodkowanie Logo */
    .main-logo {
        margin: 0 auto 30px auto !important;
        max-width: 180px !important; /* Możesz dostosować wielkość logo na mobile */
    }

/* 3. Wyśrodkowanie linków menu */
    .menu-links {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-bottom: 40px !important;
    }

    .menu-links a {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    /* Jeśli masz te elementy w jednym kontenerze bocznym (np. bottom-stuff) */
    .menu-bottom-section {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

/* 5. Naprawa głównego kontenera treści */
    .main-content {
        margin-left: 0 !important; /* Likwidujemy margines boczny z wersji desktop */
        width: 100% !important;
        padding: 0 !important;
    }




                                                            /* S E K C J E   I   K U R T Y N A */



/* 6. Kurtyna na cały ekran (Mobile) */
.long-curtain {
    position: relative !important;        /* Na mobile kurtyna musi przewijać się naturalnie, jeśli menu zniknęło już na górze */
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;            /* dodane dla bezpieczeństwa */
    visibility: visible !important;       /* dodane dla bezpieczeństwa */
    opacity: 1 !important;                /* dodane dla bezpieczeństwa */
}

/* 7. Sekcja digitalizacji (REVELATION) */
.terminal-section {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;  
    padding: 60px 20px !important; 
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.terminal-wrapper {
    width: 100% !important;
    max-width: 600px !important; 
    margin: 0 auto !important;
    text-align: center !important;
}

#terminal-content {
    display: block !important;
    opacity: 1 !important;
    font-size: 11px !important; /* Dostosuj wielkość liter */
    line-height: 1.6 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Ukrywamy migający kursor na telefonach, bo przy statycznym tekście wygląda źle */
.cursor {
    display: none !important;
}

/* 7. Kurtyna - dopasowanie do statycznego układu */
.long-curtain {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important; /* Na mobile kurtyna jest częścią strony */
    opacity: 1 !important;
    overflow: visible !important;
}




/* 8. SEKCJA LYRICS MOBILE */
#lyrics {
    padding-top: 60px !important;    /* Twoja idealna góra */
    margin-top: 0 !important;
    
    /* Wymuszamy skrócenie sekcji */
    min-height: 0 !important;        /* Kasujemy "trzymanie" wysokości przez system */
    height: auto !important;         /* Pozwalamy sekcji dopasować się do tekstu */
    
    padding-bottom: 70px !important; /* To teraz realnie ustawi odstęp na dole */
}

#lyrics .lyrics-content {
    margin-top: -10px !important;   /* Twoje idealne podciągnięcie tekstu */
}




/* 9. SEKCJA REVIEWS */
.reviews-grid {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important; /* Blokada przewijania na boki */
    }

        /* 9a. Wywalamy kolumny - teraz każdy kontener kolumny to po prostu zwykły blok */
        .reviews-col {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        /* 9b. Centrujemy recenzje i nadajemy im równe odstępy */
        .review-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 50px !important;
        text-align: center !important;
        
        /* Marginesy wewnętrzne - to one odsuną tekst od brzegów */
        padding-left: 35px !important;
        padding-right: 35px !important;
        
        /* To sprawi, że 100% szerokości + padding = nadal 100% szerokości ekranu */
        box-sizing: border-box !important; 
    }

        /* Dodatkowo dla samego tekstu wewnątrz, by nigdzie nie uciekał */
        .review-item p, .review-item h3 {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        word-wrap: break-word !important; /* Rozbije bardzo długie wyrazy, gdyby się nie mieściły */
    }


        .reviews-grid {
         margin-top: 15px !important; /* Margines oddzielający recenzje od galerii */
         margin-bottom: 70px !important; /* Margines oddzielający recenzje od galerii */
    }

         /* Na wszelki wypadek upewniamy się, że ostatni element wewnątrz też ma luz */
         .reviews-col:last-child .review-item:last-child {
         margin-bottom: 0 !important; /* Resetujemy margines pojedynczej recenzji, bo grid załatwia sprawę */
    }



         /* 9c. Dopieszczenie góry sekcji REVIEWS */
         #reviews {
         padding-top: 90px !important;    /* Zmniejszamy odstęp od góry całej sekcji */
         min-height: 0 !important;        /* Kasujemy wymuszanie wysokości */
         height: auto !important;
    }

         #reviews .reviews-text-wrapper {
         margin-top: 0 !important;        /* Zerujemy marginesy wewnętrznego kontenera */
         padding-top: 0 !important;
    }

         #reviews h2 {
         margin-top: 0 !important;        /* Jeśli nagłówek sam w sobie pchał tekst w dół */
         margin-bottom: 30px !important;  /* Odstęp od nagłówka do pierwszej recenzji */
    }




/* 10. SEKCJA REVIEWS - GALERIA MOBILE */
.gallery-container {
    padding-bottom: 0 !important; /* Kasujemy ten wielki padding z desktopa */
    box-shadow: none !important;  /* Wyłączamy dwukolorową symulację stopki */
    
    /* Czyste, równe ramki */
    border-top: 5px solid #0068c4 !important;
    border-bottom: 5px solid #0068c4 !important;
}



/* --- 11. SEKCJA LISTEN MOBILE --- */

/* 11a. Wymuszamy widoczność (ignorujemy animację JS, jeśli nie odpala) */
#listen .listen-header h2, 
#listen .stream-link,
#listen .press-kit-btn {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important; /* Na mobile lepiej wyłączyć te springi, żeby od razu było widać */
}

#listen {
    min-height: auto !important; /* Skracamy sekcję, żeby nie była na cały ekran */
    padding: 90px 0 !important;
}

/* 11b. Naprawa siatki logosów - robimy 2 kolumny zamiast 3 */
.streaming-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Dwie równe kolumny */
    column-gap: 10px !important;  /* Drastycznie zmniejszamy przerwę między logosami */
    row-gap: 40px !important;     /* Odstęp góra-dół */
    margin: 40px auto !important;
    width: 90% !important;        /* Żeby nie dotykały brzegów ekranu */
}

/* 11c. Zmniejszamy same obrazki logosów */
.stream-link img { 
    width: 140px !important; /* Mniejsze logo, żeby 2 obok siebie się zmieściły */
    filter: brightness(0) invert(1) !important; /* Zawsze białe na mobile */
}

/* 11d. Przycisk Press Kit */
.press-kit-btn {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    font-size: 10px !important;
    display: inline-block !important;
}




}