/* CSS DLA TŁA ANIMOWANEGO */
body {
    /* Upewnij się, że nie ma marginesów, aby tło zajmowało cały ekran */
    margin: 0;
    /* Zapewnia, że body jest kontekstem pozycjonowania dla fal */
    position: relative;
    /* Dodatkowo, aby treść była widoczna nad tłem */
    z-index: 0;
}

.waves-container {
    position: fixed; /* Ustawia tło na stałe, aby nie przewijało się z treścią */
    top: 0;
    left: 0;
    width: 100vw; /* Szerokość 100% szerokości widoku */
    height: 100vh; /* Wysokość 100% wysokości widoku */
    /* Gradient tła, od ciemnego do bardzo ciemnego błękitu */
    background: linear-gradient(to bottom, #001f4c, #000a1a);
    z-index: -1; /* Umieszcza kontener z falami pod resztą zawartości */
}

.wave {
    position: absolute;
    /* Fale są szersze niż ekran, aby umożliwić płynne przesuwanie */
    width: 200%;
    height: 100%; /* Wysokość fali; możesz dostosować */
    /* Używamy rgba, aby kontrolować przezroczystość */
    background: rgba(2, 45, 100, 0.7);
    opacity: 0.8; /* Ogólna przezroczystość fali */
    /* Klucz do stworzenia falistego kształtu za pomocą border-radius */
    border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
    /* Punkt, wokół którego obracają się transformacje */
    transform-origin: 50% 50%;
    /* Początkowo fale zaczynają się poza ekranem po lewej */
    left: -50%;
    animation-timing-function: ease-in-out; /* Płynne tempo animacji */
    will-change: transform; /* Optymalizacja dla animacji transform */
}

/* Różne fale z różnymi kolorami, pozycjami i czasami animacji */
.wave-1 {
    background: rgba(0, 31, 76, 0.6);
    top: 10%;
    animation: waveAnimation 25s infinite alternate;
}

.wave-2 {
    background: rgba(0, 41, 92, 0.7);
    top: 30%;
    animation: waveAnimation 20s infinite alternate-reverse; /* Odwrócony kierunek animacji */
}

.wave-3 {
    background: rgba(0, 51, 108, 0.8);
    top: 50%;
    animation: waveAnimation 30s infinite alternate;
}

.wave-4 {
    background: rgba(0, 61, 124, 0.7);
    top: 70%;
    animation: waveAnimation 22s infinite alternate-reverse;
}

.wave-5 {
    background: rgba(0, 71, 140, 0.6);
    top: 90%;
    animation: waveAnimation 28s infinite alternate;
}

/* Definicja animacji fal */
@keyframes waveAnimation {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        /* Fale przesuwają się o 50% szerokości widoku i lekko obracają */
        transform: translateX(50vw) rotate(5deg);
    }
}