/* ==========================================================================
   Střechy Fryč - Vlastní CSS styly a animace
   ========================================================================== */

/* Úvodní animace načítání (Preloader) */
#loader-wrapper {
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#animated-logo {
    transform-origin: 49% 63.33%;
    animation: diveIn 0.8s cubic-bezier(0.7, 0, 0.2, 1) 1s forwards;
}

.roof-left {
    animation: assembleLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.roof-right {
    opacity: 0;
    animation: assembleRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards;
}

.roof-window {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: popWindow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.45s forwards;
}

@keyframes assembleLeft {
    0% {
        transform: translate(-40px, 40px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes assembleRight {
    0% {
        transform: translate(40px, 40px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes popWindow {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes diveIn {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    20% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(80);
        opacity: 0;
    }
}

/* Překrytí na hlavní hero fotce */
.hero-overlay {
    background: linear-gradient(90deg, rgba(10, 49, 74, 0.9) 0%, rgba(10, 49, 74, 0.6) 100%);
}

/* Vlastní styly pro Swiper navigaci */
.swiper-button-next,
.swiper-button-prev {
    color: #E85D22 !important;
    background: white;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px !important;
}

.swiper-pagination-bullet-active {
    background: #E85D22 !important;
}