/* Hero Dark Overlay and Vignette - Restored */

/* Dark gradient overlay for text readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.95) 0%,     /* Near-black at 95% opacity */
        rgba(0, 0, 0, 0.85) 15%,    /* Still very dark */
        rgba(0, 0, 0, 0.7) 25%,     /* Dark */
        rgba(0, 0, 0, 0.5) 35%,     /* Medium dark */
        rgba(0, 0, 0, 0.2) 45%,     /* Light */
        rgba(0, 0, 0, 0.0) 55%      /* Fully transparent */
    ) !important;
    z-index: 2 !important;
    pointer-events: none;
}

/* Vignette effect for cinematic focus */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background: radial-gradient(ellipse at center, 
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.1) 80%,
        rgba(0, 0, 0, 0.2) 95%,
        rgba(0, 0, 0, 0.3) 100%) !important;
    pointer-events: none;
    z-index: 2 !important;
}

/* Ensure proper stacking and containment */
.hero {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 10;
}

/* Video background */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Mobile and tablet overlay adjustments */
@media (max-width: 968px) {
    /* Full-width overlay with slight gradient for better readability */
    .hero::before {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.75) 0%,    /* Darker at top for text */
            rgba(0, 0, 0, 0.7) 50%,     /* Consistent middle */
            rgba(0, 0, 0, 0.65) 100%    /* Slightly lighter at bottom */
        ) !important;
    }
    
    /* Stronger vignette for mobile */
    .hero::after {
        background: radial-gradient(ellipse at center, 
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.3) 80%,
            rgba(0, 0, 0, 0.5) 100%) !important;
    }
}

/* Specific adjustments for very small screens */
@media (max-width: 480px) {
    .hero::before {
        background: rgba(0, 0, 0, 0.75) !important; /* Even darker for small screens */
    }
}

/* Gradient overlay element for additional control */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.95) 0%,     /* Near-black at 95% opacity */
        rgba(0, 0, 0, 0.85) 15%,    /* Still very dark */
        rgba(0, 0, 0, 0.7) 25%,     /* Dark */
        rgba(0, 0, 0, 0.5) 35%,     /* Medium dark */
        rgba(0, 0, 0, 0.2) 45%,     /* Light */
        rgba(0, 0, 0, 0.0) 55%      /* Fully transparent */
    ) !important;
    z-index: 2 !important;
    pointer-events: none;
}