/* Immersive Video Integration - Module 5 */
/* Seamless fade effect for presentation.mp4 */

/* Main video container - remove borders and add radial fade */
.presentation-video,
.hero-video,
video[src*="presentation"],
#main-video,
.main-video-container video {
    border: none !important;
    border-radius: 0 !important;

    /* Radial gradient mask for seamless fade */
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%,
            black 30%,
            rgba(0, 0, 0, 0.8) 60%,
            transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%,
            black 30%,
            rgba(0, 0, 0, 0.8) 60%,
            transparent 100%);

    /* Alternative: Inset shadow approach (comment out mask-image above if using this) */
    /* box-shadow: inset 0 0 120px 60px var(--background-color, #1a1a2e); */
}

/* Ensure video container doesn't add unwanted padding/borders */
.video-container,
.hero-section,
.presentation-section {
    background: transparent;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Fullwidth video section */
.immersive-video-section {
    width: 100%;
    max-width: none;
    position: relative;
    overflow: hidden;
}

.immersive-video-section video {
    width: 100%;
    height: auto;
    display: block;
}

/* Remove player controls styling if needed for clean look */
video::-webkit-media-controls {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

video:hover::-webkit-media-controls {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .presentation-video,
    .hero-video,
    video[src*="presentation"] {
        mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,
                black 40%,
                rgba(0, 0, 0, 0.7) 70%,
                transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,
                black 40%,
                rgba(0, 0, 0, 0.7) 70%,
                transparent 100%);
    }
}