/* Główne tło strony (usunąłem duplikację) */
body {
    background-image: linear-gradient(to right, #061c3c, #072c53);
    /* background-color: #061c3c; Tutaj podaj swój kolor */
}

/* Zmienne CSS dla łatwiejszej modyfikacji kolorów i intensywności */
:root {
    /* Kolory i intensywność dla blasku tekstu (czerwony neon) */
    --text-glow-color: rgba(255, 0, 0, 0.9); /* Czerwony, prawie pełne krycie */
    --text-glow-intensity-max: 0 0 20px; /* Maksymalny blask dla tekstu, np. 20px rozmycia */
    --text-glow-intensity-off: 0 0 0px; /* Blask wyłączony */

    /* Kolory i intensywność dla blasku tła modułu (niebieskie krawędzie) */
    --bg-glow-color: rgba(0, 198, 255, 0.5); /* Niebieski, 50% krycia */
    --bg-glow-intensity-max: 0 0 40px 8px; /* Max blask dla tła, większe rozmycie i spread */
    --bg-glow-intensity-off: 0 0 0px 0px; /* Blask wyłączony */
}

/* --- ANIMACJA DLA LOGO SERENIT (ZMODYFIKOWANA, ABY MOGŁA KOSYNCHRONIZOWAĆ Z INNYMI) --- */
/* Zachowałem Twoje aktualne czasy i logikę z kodu, tylko zmieniłem nazwę na bardziej unikalną,
   żeby nie było zamieszania z innymi animacjami, które też mogłyby się nazywać "pulse-glow". */
@keyframes logo-pulse-glow {
    0% {
        filter: drop-shadow(var(--text-glow-intensity-off) rgba(0, 198, 255, 0)); /* Całkowity brak blasku */
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(0, 198, 255, 0.4)); /* Stopniowy, delikatny blask */
    }
    75% {
        filter: drop-shadow(0 0 14.4px rgba(0, 198, 255, 0.8)); /* Blask max 80% */
    }
    100% {
        filter: drop-shadow(var(--text-glow-intensity-off) rgba(0, 198, 255, 0)); /* Powrót do braku blasku */
    }
}

.logo-sphereit {
    animation: logo-pulse-glow 7s infinite; /* Twoje aktualne ustawienia dla logo */
}


/* --- GŁÓWNA ANIMACJA SYNCHRONIZUJĄCA LINIE TEKSTU I TŁO BANERA --- */
/* Całkowity czas cyklu to 10 sekund (Twoje aktualne ustawienie)
   Mamy 5 faz (4 linie tekstu + 1 faza dla tła), każda faza trwa 2 sekundy (10s / 5)
   W każdej fazie blask narasta w pierwszej połowie (pierwsza 1s) i wygasa w drugiej (druga 1s)
   Dla linii tekstu: 0% do 50% fazy = brak blasku, 50% do 75% = narasta, 75% do 100% = wygasa
   Czyli dla 2-sekundowej fazy, 0-1s = brak, 1-1.5s = narasta, 1.5-2s = wygasa.
*/
@keyframes full-banner-sequence {
    /* --- Faza 1: Blask na linii 1 (0s - 2s) --- */
    0% { /* Początek cyklu */
        /* Reset wszystkich efektów */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
    }
    /* 50% fazy to 10% całkowitego czasu (0.5 * 2s / 10s = 0.1) */
    /* 75% fazy to 15% całkowitego czasu (0.75 * 2s / 10s = 0.15) */
    10% { /* Linia 1 zaczyna świecić (maksymalny blask) */
        /* Ten blok dotyczy filtra dla pierwszej linii tekstu. */
        /* Ważne: `filter` może być animowany na elemencie `animated-line` */
    }
    15% { /* Linia 1 wygasa (do 0% blasku) */
    }
    20% { /* Koniec fazy 1, linia 1 jest bez blasku */
    }

    /* --- Faza 2: Blask na linii 2 (2s - 4s) --- */
    20.01% { /* Początek fazy 2 (Linia 2) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Reset dla tekstu przed startem */
    }
    30% { /* Linia 2 zaczyna świecić (maksymalny blask) */
    }
    35% { /* Linia 2 wygasa (do 0% blasku) */
    }
    40% { /* Koniec fazy 2, linia 2 jest bez blasku */
    }

    /* --- Faza 3: Blask na linii 3 (4s - 6s) --- */
    40.01% { /* Początek fazy 3 (Linia 3) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
    }
    50% { /* Linia 3 zaczyna świecić (maksymalny blask) */
    }
    55% { /* Linia 3 wygasa (do 0% blasku) */
    }
    60% { /* Koniec fazy 3, linia 3 jest bez blasku */
    }

    /* --- Faza 4: Blask na linii 4 (6s - 8s) --- */
    60.01% { /* Początek fazy 4 (Linia 4) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
    }
    70% { /* Linia 4 zaczyna świecić (maksymalny blask) */
    }
    75% { /* Linia 4 wygasa (do 0% blasku) */
    }
    80% { /* Koniec fazy 4, linia 4 jest bez blasku */
    }

    /* --- Faza 5: Blask na tle modułu (8s - 10s) --- */
    80.01% { /* Początek fazy 5 (Tło) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Upewnij się, że tekst już nie świeci */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color); /* Reset blasku tła przed startem */
    }
    90% { /* Tło zaczyna świecić (maksymalny blask) */
        box-shadow: var(--bg-glow-intensity-max) var(--bg-glow-color);
    }
    100% { /* Tło wygasa (do 0% blasku) i cykl się zamyka */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
    }
}

/* --- Stylowanie i aplikowanie animacji do elementów --- */

/* Główny kontener banera - tu będzie zastosowana główna animacja pełnego cyklu */
.banner-container {
    animation: full-banner-sequence 10s infinite ease-in-out; /* CAŁA animacja trwa 10s */
    /* Twoje style tła z HTML, przeniesione tutaj dla porządku */
    background-image: url('https://sphereit.pl/media/templates/site/cassiopeia/css/images/BanerZ2.png');
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0px;
    /* Domyślny stan box-shadow */
    box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
}

/* Stylowanie poszczególnych linii tekstu */
/* Tu zastosujemy DOMYŚLNY stan, który będzie nadpisywany przez animację.
   Potrzebujemy też selektorów dla każdej linii, aby kontrolować jej filtr w @keyframes. */
.animated-line {
    /* Domyślny stan filtra - bez blasku */
    filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
    transition: filter 0.2s ease-in-out; /* Płynne przejścia dla blasku tekstu, gdy filtr się zmienia */
}

/* Upewnij się, że styl tekstu nie jest nadpisany - kolor jest inline w HTML */
.banner-container h2,
.banner-container h3 {
    text-align: center;
    font-size: 36px;
    color: #ffffff; /* Upewnij się, że tekst jest biały */
}

/* --- Kontrolowanie filtrów dla poszczególnych linii w pełnej animacji --- */
/* Te selektory będą "łapać" moment, kiedy ich filter powinien być aktywny
   w ramach nadrzędnej animacji `full-banner-sequence`.
   Musimy nadpisać domyślny `filter: drop-shadow` w punktach animacji.
   To jest najbardziej złożona część, bo animacja na rodzicu (banner-container)
   może kolidować z animacją na dziecku (animated-line), jeśli nie jest to dobrze skoordynowane.

   Alternatywą (którą już próbujemy z `animation-delay` i się "rozjeżdża")
   jest faktycznie animowanie wewnątrz jednej @keyframes.
   To, co tutaj zrobimy, to odwołanie się do `animation-play-state` lub `animation-timing-function`
   w @keyframes, ale prostszym sposobem jest użycie selektorów wewnątrz `@keyframes`
   dla elementu, który już ma klasę.
   CSS @keyframes może animować właściwości elementu, na którym jest zdefiniowane.
   Jeśli `full-banner-sequence` jest na `.banner-container`, to nie może bezpośrednio zmieniać
   `filter` na `.animated-line`.

   **TO JEST KLUCZOWY PROBLEM.** Jedna animacja `@keyframes` na rodzicu
   nie może animować właściwości elementów potomnych.

   **Musimy wrócić do koncepcji oddzielnych animacji z opóźnieniami,
   ALE z dokładnie skoordynowanymi czasami i `animation-fill-mode`.**
   "Rozjeżdżanie się" wynika najczęściej z braku `forwards` lub `infinite` w odpowiednich miejscach,
   lub właśnie z konfliktu.
*/

/* Resetujemy wszystkie poprzednie próby synchronizacji, wracamy do zaufanej metody
   z animation-delay, ale tym razem ZPEWNIAMY, że wszystko się zamyka poprawnie i
   nie będzie konfliktów. */

/* PRZEPISANA WERSJA DLA PEŁNEJ SYNCHRONIZACJI Z ODDZIELNYMI ANIMACJAMI */

/* --- Animacja dla pojedynczej linii tekstu (Czerwony Neon) --- */
@keyframes line-glow-red {
    0% {
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Brak blasku */
    }
    50% { /* Od 50% czasu trwania tej animacji */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Nadal brak blasku */
    }
    75% { /* Do 75% czasu trwania tej animacji - narastanie */
        filter: drop-shadow(var(--text-glow-intensity-max) var(--text-glow-color)); /* Narastanie do maksa */
    }
    100% { /* Do 100% czasu trwania tej animacji - wygasanie */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Wygasanie do zera */
    }
}

/* --- Animacja dla blasku tła kontenera (Niebieskie Krawędzie) --- */
@keyframes banner-background-glow-blue {
    0% {
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color); /* Brak blasku tła */
    }
    50% { /* Start narastania po 50% czasu trwania tej animacji */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
    }
    75% { /* Do 75% czasu trwania tej animacji - narastanie */
        box-shadow: var(--bg-glow-intensity-max) var(--bg-glow-color); /* Narastanie do maksa */
    }
    100% { /* Do 100% czasu trwania tej animacji - wygasanie */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color); /* Wygasanie do zera */
    }
}


/* Klasa dla animowanych linii tekstu */
.animated-line {
    /* Ustawimy duration i delay bezpośrednio w selektorach poniżej dla precyzji */
    animation-name: line-glow-red;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; /* Utrzymuje stan końcowy, ważny dla opóźnień */
    filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Stan początkowy bez blasku */
}

/* Animacja dla całego kontenera (tła) */
.banner-container {
    animation-name: banner-background-glow-blue;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    /* Domyślny stan box-shadow */
    box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);

    /* Twoje style tła z HTML, przeniesione tutaj dla porządku */
    background-image: url('https://sphereit.pl/media/templates/site/cassiopeia/css/images/BanerZ2.png');
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0px;
}

/* Opóźnienia i CZASY TRWANIA dla poszczególnych elementów - Całkowity cykl 10 sekund */
/* Każda z 5 faz (4 linie + 1 tło) będzie trwała dokładnie 2 sekundy */
/* Animacja dla każdego elementu ma trwać 2 sekundy, startując w swoim slocie */

.banner-container h2:nth-of-type(1) { /* Linia 1 */
    animation-duration: 2s; /* Jej animacja trwa 2s */
    animation-delay: 0s; /* Startuje od razu */
}

.banner-container h3:nth-of-type(1) { /* Linia 2 (pierwsze h3) */
    animation-duration: 2s;
    animation-delay: 2s; /* Startuje po 2s (gdy Linia 1 skończy) */
}

.banner-container h3:nth-of-type(2) { /* Linia 3 (drugie h3) */
    animation-duration: 2s;
    animation-delay: 4s; /* Startuje po 4s (gdy Linia 2 skończy) */
}

.banner-container h3:nth-of-type(3) { /* Linia 4 (trzecie h3) */
    animation-duration: 2s;
    animation-delay: 6s; /* Startuje po 6s (gdy Linia 3 skończy) */
}

.banner-container { /* Tło modułu */
    animation-duration: 2s; /* Animacja tła trwa 2s */
    animation-delay: 8s; /* Startuje po 8s (gdy Linia 4 skończy) */
    /* WAŻNE: Tutaj zmieniamy nazwę animacji tła, żeby nie było zamieszania */
    animation-name: banner-background-glow-blue;
    /* A cały cykl animacji banera, aby się powtarzało, ustawimy na samym końcu */
    /* To `banner-container` jest tym, co ma trwać 10s i powtarzać się.
       W tym scenariuszu, musimy zastosować sprytne rozwiązanie dla cyklu.
       Najpewniejsze jest, aby `banner-container` miał całkowitą animację
       tylko z `animation-iteration-count: infinite`, a poszczególne elementy
       były synchronizowane przez `animation-delay` względem **całkowitego cyklu**.
    */
}

/* Globalna animacja cyklu dla kontenera, aby wszystko się zapętlało */
.banner-container {
    /* Tu ustawiamy całkowity czas trwania cyklu i powtarzanie,
       ale bez specyficznej nazwy animacji, którą mogłaby nadpisać */
    /* To jest trochę tricky, bo `animation` to skrócony zapis.
       Lepiej jest zdefiniować oddzielnie `animation-name`, `duration` itp.
       dla każdej z animacji, a `banner-container` będzie pełnił rolę
       "orchestratora" dla swojego własnego cienia.
    */
    /* Zatem, wracamy do podejścia, gdzie każda animacja ma swoją nazwę i jest przypisana.
       Problemy z synchronizacją wynikały z niedokładnych opóźnień lub kolizji.
       Teraz opóźnienia będą sumować się do 10s cyklu. */
    animation-duration: 10s; /* Całkowity czas cyklu dla tła */
    animation-name: banner-background-glow-blue; /* Nazwa animacji dla tła */
    animation-delay: 8s; /* Tło startuje po 8s */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* Upewnij się, że styl tekstu nie jest nadpisany przez animacje */
.banner-container h2 span,
.banner-container h3 span,
.banner-container h2 strong {
    color: #ffffff; /* Zapewnij biały kolor tekstu */
    font-size: 36px; /* Zapewnij rozmiar czcionki */
}


/* Definicja animacji jednorazowego "zapłonu" na start strony */
@keyframes initial-glow {
    0% {
        filter: drop-shadow(0 0 0px rgba(0, 198, 255, 0));
        opacity: 0.8;
    }
    100% {
        filter: drop-shadow(0 0 40px rgba(0, 198, 255, 0.5));
        opacity: 1;
    }
}

/* Styl dla głównego kontenera Flexbox menu */
.main-menu-flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap; /* KLUCZOWA ZMIANA: ZAWSZE nowrap, aby nie zawijało */
    padding: 5px 0;
    width: 70%; /* Możesz zwiększyć do 90-100% dla lepszego wykorzystania miejsca na małych ekranach */
    margin: 0 auto;
}

/* Opcjonalnie: Responsywność dla mniejszych ekranów */
/* ZMIANA: Usunięcie flex-wrap: wrap; tutaj, aby zawsze były w jednej linii */
@media (max-width: 768px) {
    .main-menu-flex-container {
        width: 95%; /* Zwiększenie szerokości na małych ekranach */
        /* flex-wrap: wrap; - USUNIĘTO - NIE CHCEMY, ŻEBY SIĘ ZAWIAŁO */
        justify-content: center; /* nadal centrowanie */
        padding: 5px 0;
    }
}

/* Styl dla pojedynczego elementu menu (linku <a> z obrazkiem) */
.menu-button-link {
    display: block;
    text-align: center;
    flex: 1 1 auto; /* Umożliwia elementom elastyczne kurczenie się i rozciąganie */
    margin: 0 5px;
    min-width: 50px; /* KLUCZOWA ZMIANA: Dodajemy minimalną szerokość, aby nie stały się niewidoczne */
                   /* Dostosuj tę wartość! Może 60px, 70px, w zależności od obrazków */
    transition: transform 0.3s ease-in-out;
}

/* Styl dla obrazka w linku */
.menu-button-img {
    max-width: 100%;
    height: auto;
    max-height: 60px; /* Ograniczenie maksymalnej wysokości, by menu nie było za duże */
    display: block;
    margin: 0 auto;

    animation: initial-glow 3s forwards ease-out;
    filter: drop-shadow(0 0 40px rgba(0, 198, 255, 0.5));
    transition: filter 1s ease-in-out, transform 0.3s ease-in-out;
}

/* Styl dla efektu HOVER (gdy najedziesz myszką na przycisk) */
.main-menu-flex-container .menu-button-link:hover .menu-button-img {
    filter: drop-shadow(0 0 40px rgba(0, 198, 255, 1)) !important;
    transform: scale(1.05);
    transition: filter 1s ease-in-out !important, transform 0.3s ease-in-out !important;
}

/* Styl dla efektu ACTIVE (gdy klikniesz przycisk) */
.main-menu-flex-container .menu-button-link:active .menu-button-img {
    transform: scale(0.95);
    filter: drop-shadow(0 0 10px rgba(0, 198, 255, 0.8));
    transition: transform 0.1s ease-out, filter 0.1s ease-out;
}