/**
 * Banner YouTube Video Background Styles
 */

/* Video background container */
.banner-section .bg.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* YouTube player containers */
.banner-section .youtube-bg-player {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 aspect ratio */
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

/* Active player (visible) */
.banner-section .youtube-bg-player.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* YouTube iframe styling */
.banner-section .youtube-bg-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Dark overlay on video for better text readability */
.banner-section .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 3;
    pointer-events: none;
}

/* Ensure content is above video */
.banner-section .auto-container {
    position: relative;
    z-index: 4;
}

/* Mobile optimization - reduce video quality on small screens */
@media (max-width: 768px) {
    .banner-section .youtube-bg-player {
        min-width: 100vw;
        width: 100vw;
        height: auto;
        min-height: 100vh;
    }
    
    /* Slightly darker overlay on mobile for better readability */
    .banner-section .video-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.7) 100%
        );
    }
}

/* Smooth transitions between videos */
@keyframes fadeInVideo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOutVideo {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}