/* Video Optimization for Hero Sections */
/* Prevents glitching and ensures smooth playback */

/* Base video optimizations */
#hero-video, 
.hero-video,
video[id*="hero"] {
    /* Hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
    
    /* Smooth rendering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    
    /* Position and sizing - FIXED: Don't override existing positioning */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* FIXED: Changed from -1 to 1, content should be higher */
    
    /* Quality settings */
    object-fit: cover;
    object-position: center center;
    
    /* Prevent layout shifts */
    background: #0D1B2A; /* Match your theme */
    
    /* Anti-aliasing */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    
    /* Performance optimizations */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Container optimizations */
#hero,
#hero-section,
.hero-container {
    position: relative;
    overflow: hidden;
    /* GPU acceleration for container */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Smooth scrolling */
    scroll-behavior: smooth;
    
    /* FIXED: Ensure proper stacking context */
    z-index: 1;
}

/* FIXED: Prevent video from covering content */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Loading state optimization */
#hero-video[data-loading="true"],
.hero-video[data-loading="true"] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#hero-video[data-loaded="true"],
.hero-video[data-loaded="true"] {
    opacity: 1;
}

/* Responsive video optimization */
@media (max-width: 768px) {
    #hero-video, 
    .hero-video,
    video[id*="hero"] {
        /* Mobile-specific optimizations */
        min-width: 100vw;
        min-height: 100vh;
        
        /* Reduce quality on mobile for better performance */
        image-rendering: auto;
    }
}

/* High-DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #hero-video, 
    .hero-video,
    video[id*="hero"] {
        /* Enhanced quality for retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Preload optimization classes */
.video-preload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0D1B2A 0%, #1B263B 100%);
    z-index: 1;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.video-preload.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Video poster optimization */
#hero-video::before,
.hero-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0D1B2A 0%, #1B263B 100%);
    z-index: -1;
}

/* Compression indicators for debugging */
.video-compressed {
    position: relative;
}

.video-compressed::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: #00CFFD;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 100;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.3; }
}

/* Performance monitoring */
.video-performance-monitor {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #00CFFD;
    padding: 5px 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    z-index: 9999;
    display: none;
}

.video-performance-monitor.show {
    display: block;
}

/* Smooth transition for hero content - FIXED: Ensure content is always visible */
.hero-content {
    /* Ensure content appears smoothly over video */
    position: relative;
    z-index: 10; /* FIXED: Much higher z-index to ensure visibility */
    opacity: 1; /* FIXED: Start visible, don't animate opacity */
    animation: fadeInUp 1s ease-out 0.2s forwards; /* FIXED: Faster animation */
    pointer-events: auto; /* FIXED: Ensure buttons are clickable */
}

/* Additional specificity for hero content elements */
#hero .hero-content,
#hero-section .hero-content {
    z-index: 15 !important; /* FIXED: Force higher z-index */
    position: relative !important;
}

/* Ensure buttons and links in hero content are clickable */
.hero-content button,
.hero-content a,
.hero-content .btn-primary,
.hero-content .cta-button {
    position: relative;
    z-index: 20 !important; /* FIXED: Highest z-index for interactive elements */
    pointer-events: auto !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0.8; /* FIXED: Start more visible */
        transform: translateY(15px); /* FIXED: Less movement */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Video error fallback */
.video-error-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0D1B2A 0%, #1B263B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    z-index: -1;
}

/* Specific optimizations for aboutUs video */
#hero-section video {
    /* Additional optimizations for about us page */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Buffer optimization */
video[preload="auto"] {
    /* Optimize buffering strategy */
    preload: metadata;
}

/* Intersection observer optimization */
.video-lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.video-lazy-load.loaded {
    opacity: 1;
}