/* ========================================
   VIDEO BACKGROUND COMPONENT
   ======================================== */

/* Base video background container */
.video-bg-container {
    position: relative;
    overflow: hidden;
}

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

/* Video element */
.video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Dark overlay for better text readability */
.video-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 2;
}

/* Light overlay variant */
.video-bg-overlay-light {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Medium overlay variant */
.video-bg-overlay-medium {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Heavy overlay variant */
.video-bg-overlay-heavy {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%);
}

/* Gradient overlay with primary color */
.video-bg-overlay-primary {
    background: linear-gradient(135deg, rgba(219, 170, 102, 0.75) 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* Content above video */
.video-bg-content {
    position: relative;
    z-index: 3;
}

/* Fallback background image when video is loading */
.video-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        #1a1a1a 0%,
        #2d2d2d 25%,
        #1a1a1a 50%,
        #2d2d2d 75%,
        #1a1a1a 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: 0;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Enable video on mobile - display videos on all devices */
@media (max-width: 768px) {
    .video-bg video {
        display: block;
    }
    
    /* Keep fallback as loading state */
    .video-bg::before {
        display: block;
    }
}

/* Performance optimization: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .video-bg video {
        display: none;
    }
    
    .video-bg::before {
        animation: none;
    }
}