/* --- Blok_01.css - Browar Przystań (404 Error Page) --- */

/* Importujemy czcionki: Cinzel dla nagłówków, Pirata One dla pirackiego klimatu */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Pirata+One&display=swap');

/* Główny kontener sekcji błędu */
.error-section {
    position: relative; /* DODANO, żeby dzieci pozycjonowane absolutnie (large-logo) odnosiły się do niego */
    width: 100%;
    padding: 20px 20px; /* Zwiększony padding, żeby strona miała oddech */
    background-color: #000000;
    color: #a4b2a4; /* Przygaszona, patynowana zieleń */
    text-align: center;
    font-family: 'Georgia', serif; /* Domyślna czcionka */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Kontener dla logo i napisu 404 - klucz do wyśrodkowania */
.logo-text-wrapper {
    position: relative;
    width: 100%;
    min-height: 500px; /* Wymuszamy wysokość dla idealnego centrowania w pionie */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* Duże logo jako tło */
.large-logo {
    width: 600px;
    opacity: 0.15; /* Bardzo subtelne logo, tylko jako tło */
    filter: blur(1px); /* Lekkie rozmycie, żeby nie odciągało uwagi */
    z-index: 1;

    /* ZMIANY POZYCJONOWANIA */
    position: absolute;
    top: 0; /* Przykleja do górnej krawędzi .error-section */
    left: 50%;
    transform: translateX(-50%); /* Centruje w poziomie */
}

/* --- Napis 404: Efekt Metalicznego Odlewu --- */
.overlay-404 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 22rem; /* Nieco mniejszy, żeby się mieścił */
    font-weight: 500;
    line-height: 1;
    letter-spacing: -20px;
    text-transform: uppercase;
    z-index: 2; /* Podniesiony z-index, aby nic go nie przykrywało */
    pointer-events: none;

    /* Ustawiamy teksturę jako tło */
    background-image: url('../metal-texture.png');
    background-size: cover;
    background-position: center;
    
    /* TO JEST KLUCZOWE: wymuszamy, aby tło było widoczne wewnątrz liter */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Zamiast "transparent" dajemy kolor, który będzie widoczny, jeśli tekstura zawiedzie */
    color: rgba(164, 178, 164, 0.0);  
    
    /* Dodajemy obrys, żeby "wyciąć" napis z czarnego tła */
    -webkit-text-stroke: 2px rgba(164, 178, 164, 0.5);

    /* Cień, który nada głębi */
    text-shadow: 
        0 0 20px rgba(0, 0, 0, 1), /* Głęboki cień wokół liter */
        2px 2px 5px rgba(255, 255, 255, 0.2), /* Subtelne światło krawędziowe */
        0 0 50px rgba(74, 90, 84, 0.8); /* Poświata metalu */
}

/* --- Piracka Typografia --- */

/* Podtytuł z pirackim zacięciem */
.error-subtitle {
    font-family: 'Pirata One', cursive;
    font-size: 4rem; /* Duży, czytelny napis */
    color: #fff; /* Czysta biel, żeby odciąć się od patyny metalu */
    margin: -120px 0 20px; /* Przesuwamy w górę, żeby przytulił się do 404 */
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* Lekka poświata */
}

/* Opis z pirackim zacięciem */
.error-desc {
    font-family: 'Pirata One', cursive;
    font-size: 1.8rem;
    color: #8e9e8e;
    
    /* ZMIANA: Zwiększamy dopuszczalną szerokość bloku */
    max-width: 1000px; 
    
    /* ZMIANA: Pozwalamy tekstowi zajmować tyle miejsca, ile potrzebuje */
    width: 90%; 
    
    line-height: 1.4; /* Nieco mniejszy interliniowy odstęp też pomoże */
    margin: 0 auto;
    letter-spacing: 1px;
}

/* Kontener na animowaną falę */
.sea-wave-container {
    margin-top: 60px;
    height: 150px;
    overflow: hidden;
    width: 100%;
}






#water-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Za napisami */
    pointer-events: none; /* Żeby można było klikać w linki na stronie */
}

.error-section {
    position: relative; /* Kluczowe! */
    overflow: hidden;
    background: #000;
}






/* --- Responsywność dla urządzeń mobilnych --- */
@media (max-width: 992px) {
    .overlay-404 { font-size: 18rem; letter-spacing: -15px; }
    .large-logo { width: 450px; }
    .error-subtitle { font-size: 3rem; }
    .error-desc { font-size: 1.5rem; }
}

@media (max-width: 768px) {
    .logo-text-wrapper { min-height: 350px; }
    .overlay-404 { font-size: 12rem; letter-spacing: -10px; }
    .large-logo { width: 300px; }
    .error-subtitle { font-size: 2.2rem; margin-top: -10px; }
    .error-desc { font-size: 1.2rem; }

    .error-desc {
        font-size: 1.1rem; /* Zmniejszamy z 1.8 na 1.1 dla telefonów */
        width: 95%;        /* Rozciągamy na szerokość ekranu */
        letter-spacing: 0; /* Zmniejszamy odstępy, żeby upchnąć tekst */
    }

}