@import url(./global.css);

.home-section {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--primary);
    z-index: 1;
}

/* Slideshow container */
.homeSlideshow {
    position: absolute;
    inset: 0;
    z-index: 0;

}

/* Cada slide */
.homeSlideshow .slide {
    position: absolute;
    height: 100%;
    inset: 0;
    opacity: 0.3;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}


.homeSlideshow .slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

/* Botões de navegação */
.homeSlideshow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: white;
    border: none;
    padding: 12px 16px;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.3s ease;
}

.homeSlideshow button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.prevSlide {
    left: 20px;
}

.nextSlide {
    right: 20px;
}



.slide-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background-color: var(--secondary);
    z-index: 10;
    transition: width 0s;
}

.slide.active .slide-progress {
    animation: slideProgressAnim 10s linear forwards;
}

@keyframes slideProgressAnim {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* Video Container & Overlay */
.video-container,
.video-overlay {
    position: absolute;
    inset: 0;
    /* top:0; left:0; right:0; bottom:0 */
}

.video-overlay {
    z-index: 10;
    cursor: default;
}

/* iframe base */
.video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Desktop */
.desktop-video {
    width: 177.77%;
    /* 16:9 */
    height: 100%;
    display: block;
    /* padrão */
}

/* Mobile */
.mobile-video {
    width: 100%;
    height: 177.77%;
    /* 9:16 */
    display: none;
    /* oculto por padrão */
}

/* Responsividade */
/* Mobile: até 1024px */
@media (max-width: 1024px) {
    .desktop-video {
        display: none;
    }

    .mobile-video {
        display: block;
    }
}