* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
}

.full-page-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: visible;
}

/* Tło responsywne */
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img2/tlo-web.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

/* Wszystkie elementy w tej samej pozycji i rozmiarze - nakładają się idealnie */
.book-main,
.text-block-1,
.text-block-2,
.author-photo,
.info-tag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    height: 95vh;
    max-width: none;
}

.book-main img,
.text-block-1 img,
.text-block-2 img,
.author-photo img,
.info-tag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* b2 - najwyższa warstwa */
.text-block-2 {
    z-index: 6;
    animation: float1 8s ease-in-out infinite;
}

/* b1 - druga warstwa */
.text-block-1 {
    z-index: 5;
    animation: float2 7s ease-in-out infinite;
}

/* zawieszka - trzecia warstwa */
.info-tag {
    z-index: 4;
    animation: float3 9s ease-in-out infinite;
}

/* book - czwarta warstwa */
.book-main {
    z-index: 3;
    animation: float4 6.5s ease-in-out infinite;
}

/* fotot - najniższa warstwa */
.author-photo {
    z-index: 2;
    animation: float5 7.5s ease-in-out infinite;
}

/* Animacje lewitacji - każda inna */
@keyframes float1 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-15px); }
}

@keyframes float2 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-12px); }
}

@keyframes float3 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-18px); }
}

@keyframes float4 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-10px); }
}

@keyframes float5 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-14px); }
}

/* Przycisk CTA - na dole z odstępem, aby cała kompozycja mieściła się na ekranie */
.cta-button {
    position: absolute;
    left: 50%;
    bottom: 5vh;
    transform: translateX(-50%);
    z-index: 6;
}

.cta-button a {
    display: inline-block;
}

.cta-button img {
    width: 260px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(220, 53, 69, 0.4));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cta-button a:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 10px 24px rgba(220, 53, 69, 0.5)) brightness(1.1);
}

/* Responsywność - tablet */
@media (max-width: 1024px) {
    .book-main,
    .text-block-1,
    .text-block-2,
    .author-photo,
    .info-tag {
        width: 700px;
        height: 700px;
    }
    
    .cta-button img {
        width: 220px;
    }
}

/* Responsywność - mobile */
@media (max-width: 768px) {
    .background {
        background-image: url('img2/tlo-mob.webp');
        background-position: top center;
    }
    
    /* Zmiana źródła grafik na img3 dla mobile */
    .book-main img {
        content: url('img3/book.webp');
    }
    
    .text-block-1 img {
        content: url('img3/b1.webp');
    }
    
    .text-block-2 img {
        content: url('img3/b2.webp');
    }
    
    .author-photo img {
        content: url('img3/fotot.webp');
    }
    
    .info-tag img {
        content: url('img3/zawieszka.webp');
    }
    
    /* Zmiana kolejności warstw dla mobile: b2, b1, zawieszka, fotot, book */
    .text-block-2 {
        z-index: 6;
    }
    
    .text-block-1 {
        z-index: 5;
    }
    
    .info-tag {
        z-index: 4;
    }
    
    .author-photo {
        z-index: 3;
    }
    
    .book-main {
        z-index: 2;
    }
    
    .book-main,
    .text-block-1,
    .text-block-2,
    .author-photo,
    .info-tag {
        width: 100vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    .cta-button {
        position: absolute;
        bottom: 15vh;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .cta-button img {
        width: 200px;
    }
}

@media (max-width: 480px) {
    /* Zmiana źródła grafik na img3 dla małych ekranów */
    .book-main img {
        content: url('img3/book.webp');
    }
    
    .text-block-1 img {
        content: url('img3/b1.webp');
    }
    
    .text-block-2 img {
        content: url('img3/b2.webp');
    }
    
    .author-photo img {
        content: url('img3/fotot.webp');
    }
    
    .info-tag img {
        content: url('img3/zawieszka.webp');
    }
    
    /* Zmiana kolejności warstw dla małych ekranów: b2, b1, zawieszka, fotot, book */
    .text-block-2 {
        z-index: 6;
    }
    
    .text-block-1 {
        z-index: 5;
    }
    
    .info-tag {
        z-index: 4;
    }
    
    .author-photo {
        z-index: 3;
    }
    
    .book-main {
        z-index: 2;
    }
    
    .book-main,
    .text-block-1,
    .text-block-2,
    .author-photo,
    .info-tag {
        width: 100vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    .cta-button {
        position: absolute;
        bottom: 12vh;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .cta-button img {
        width: 180px;
    }
}