/* ===============================================
   HERO VIDEO AND IMAGE OPTIMIZATIONS
   
   VIDEO OPACITY SYSTEM:
   - All videos default: opacity: 0 (hidden)
   - Active video only: opacity: 0.5 (50% visible)
   - This allows proper stacking without interference
   =============================================== */

/* Video Background Optimizations */
.hero-video {
    /* GPU acceleration for smooth transitions */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* No transitions for instant switching */
    will-change: opacity;
    
    /* Optimize video rendering */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    /* AGGRESSIVE RED TINT AND ENHANCED VISIBILITY */
    filter: 
        contrast(1.3) 
        brightness(0.85) 
        saturate(1.6) 
        hue-rotate(350deg) 
        sepia(0.3);
    
    /* Hidden by default - only active video should be visible */
    opacity: 0 !important;
    
    /* Additional battle-ready effects */
    mix-blend-mode: normal;
}

/* Active video styling - ENHANCED BATTLE MODE */
.hero-video.active {
    z-index: 2;
    
    /* INTENSIFIED red tint for active video */
    filter: 
        contrast(1.4) 
        brightness(0.8) 
        saturate(1.8) 
        hue-rotate(345deg) 
        sepia(0.4);
    
    /* Battle glow effect */
    box-shadow: 
        inset 0 0 50px rgba(239, 68, 68, 0.3),
        0 0 20px rgba(239, 68, 68, 0.2);
    
    /* 50% opacity for active video */
    opacity: 0.5 !important;
}

/* Action Images Slider Optimizations */
.hero-action-image,
.hero-action-image-mobile {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* Smooth opacity transitions */
    transition: opacity 1s ease-in-out;
    will-change: opacity;
    
    /* Optimize image rendering */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    /* Ensure consistent height with preserved aspect ratios */
    object-fit: contain;
    object-position: center;
}

/* Preload animation for smoother experience */
.hero-action-slider,
.hero-action-slider-mobile {
    /* Container optimization */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Desktop slider container - fixed height for consistent sizing */
.hero-action-slider {
    /* Ensure all images fit within the same height container */
    display: none; /* Hidden by default, shown via media query */
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* Mobile slider container - consistent sizing */
.hero-action-slider-mobile {
    /* Ensure all mobile images fit within the same height container */
    display: flex; /* Display on mobile */
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    .hero-video {
        /* Additional mobile optimizations */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        
        /* MOBILE RED TINT - slightly less intense for performance */
        filter: 
            contrast(1.2) 
            brightness(0.9) 
            saturate(1.4) 
            hue-rotate(355deg) 
            sepia(0.25);
    }
    
    /* Enhanced mobile video effects - NO BLUR */
    @media (max-width: 480px) {
        .hero-video {
            /* AGGRESSIVE mobile styling - no quality reduction */
            filter: 
                contrast(1.15) 
                brightness(0.92) 
                saturate(1.3) 
                hue-rotate(355deg) 
                sepia(0.2);
        }
        
        .hero-video.active {
            /* Extra intensity for small screens */
            filter: 
                contrast(1.25) 
                brightness(0.85) 
                saturate(1.5) 
                hue-rotate(350deg) 
                sepia(0.3);
        }
    }
    
    /* Optimize mobile images */
    .hero-action-image-mobile {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* Tablet and Desktop optimizations */
@media (min-width: 768px) {
    .hero-action-slider {
        display: flex; /* Show desktop slider */
    }
    .hero-action-slider-mobile {
        display: none; /* Hide mobile slider */
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-video {
        /* Tablet-specific optimizations */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-action-image,
    .hero-action-image-mobile {
        /* Crisp images on retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}

/* Performance optimizations for older browsers */
@supports not (transform: translate3d(0, 0, 0)) {
    .hero-video,
    .hero-action-image,
    .hero-action-image-mobile {
        /* Fallback for older browsers */
        position: relative;
        z-index: auto;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .hero-video,
    .hero-action-image,
    .hero-action-image-mobile {
        transition: none;
        animation: none;
    }
}

/* Instant video switching - no transitions */
.hero-video {
    transition: none !important;
}

/* AGGRESSIVE RED OVERLAY EFFECTS - Only for active videos */
.hero-video.active::before {
    
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center,
        rgba(239, 68, 68, 0.1) 0%,
        rgba(220, 38, 38, 0.15) 50%,
        rgba(185, 28, 28, 0.2) 100%
    );
    pointer-events: none;
    z-index: 2; /* Below the pulsing effect */
    mix-blend-mode: multiply;
}

/* BATTLE-READY PULSING EFFECT */
.hero-video.active::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(
        45deg,
        rgba(239, 68, 68, 0.1),
        rgba(220, 38, 38, 0.05),
        rgba(239, 68, 68, 0.1)
    );
    pointer-events: none;
    z-index: 3;
    animation: battlePulse 3s ease-in-out infinite;
}

@keyframes battlePulse {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.02);
    }
}

/* Dark mode considerations - removed fallback image styling */

/* Connection-based optimizations */
@media (prefers-reduced-data: reduce) {
    .hero-video {
        /* Hide videos for data-saver mode */
        display: none;
    }
}

/* Loading states - MAINTAIN BATTLE INTENSITY */
.hero-video[data-loading="true"] {
    opacity: 0; /* Hidden while loading (unless active) */
    /* NO BLUR - maintain aggression even while loading */
    filter: 
        contrast(1.2) 
        brightness(0.9) 
        saturate(1.4) 
        hue-rotate(355deg) 
        sepia(0.25);
}

.hero-video[data-loaded="true"] {
    opacity: 0; /* Hidden when loaded (unless active) */
    /* FULL BATTLE MODE when loaded */
    filter: 
        contrast(1.3) 
        brightness(0.85) 
        saturate(1.6) 
        hue-rotate(350deg) 
        sepia(0.3);
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* ACTIVE VIDEO OVERRIDES - Only active video should be visible */
.hero-video.active[data-loading="true"] {
    opacity: 0.3; /* 30% opacity while active video is loading */
}

.hero-video.active[data-loaded="true"] {
    opacity: 0.5; /* 50% opacity when active video is loaded */
}

/* Error states */
.hero-video[data-error="true"] {
    display: none;
}

/* Intersection Observer optimizations */
.hero-video:not(.in-viewport) {
    /* Pause processing for videos not in viewport */
    pointer-events: none;
}

/* Memory management for long sessions */
.hero-video.inactive {
    /* Remove from memory videos that haven't been active for a while */
    src: '';
    poster: '';
}

/* Critical rendering path optimizations */
.hero-section-loading .hero-video {
    opacity: 0; /* Hidden while section loads */
    pointer-events: none;
}

.hero-section-loaded .hero-video {
    opacity: 0; /* Hidden when section is loaded (unless active) */
    pointer-events: auto;
}

.hero-section-loaded .hero-video.active {
    opacity: 0.5; /* Only active video visible when section is loaded */
}

/* Smooth scrolling performance */
.hero-video-container {
    /* Isolate video rendering */
    isolation: isolate;
    contain: layout style paint;
}

/* WebGL fallbacks */
@supports (filter: blur(0px)) {
    .hero-video.low-performance {
        filter: none;
        transform: none;
        transition: opacity 0.3s ease;
    }
}

/* Battery optimization */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-video {
        /* Reduce frame rate on mobile portrait for battery saving */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
    }
}