/* ==========================================
   VIDEO BACKGROUND ENHANCEMENTS
   Add these to your existing style.css
   ========================================== */

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

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.4;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(10, 10, 15, 0.7) 0%, 
        rgba(10, 10, 15, 0.4) 50%, 
        rgba(10, 10, 15, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Enhanced Hero with Video Support */
.hero .video-background {
    z-index: 0;
}

.hero .stars-background {
    z-index: 0;
    opacity: 0.6;
    mix-blend-mode: screen;
}

/* Realm Video Backgrounds */
.realm-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.25;
    z-index: 0;
}

.realm-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.realm-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Empathy Realm Video Overlay */
.empathy-realm .realm-video-overlay {
    background: linear-gradient(180deg, 
        rgba(255, 0, 110, 0.4) 0%, 
        transparent 30%, 
        transparent 70%,
        rgba(251, 86, 7, 0.4) 100%);
}

.empathy-realm .realm-video {
    filter: hue-rotate(-10deg) saturate(1.3);
}

/* Drive Realm Video Overlay */
.drive-realm .realm-video-overlay {
    background: linear-gradient(180deg, 
        rgba(58, 134, 255, 0.4) 0%, 
        transparent 30%, 
        transparent 70%,
        rgba(131, 56, 236, 0.4) 100%);
}

.drive-realm .realm-video {
    filter: hue-rotate(10deg) saturate(1.2) brightness(1.1);
}

/* Genius Realm Video Overlay */
.genius-realm .realm-video-overlay {
    background: linear-gradient(180deg, 
        rgba(6, 255, 165, 0.4) 0%, 
        transparent 30%, 
        transparent 70%,
        rgba(6, 214, 160, 0.4) 100%);
}

.genius-realm .realm-video {
    filter: hue-rotate(5deg) saturate(1.4) brightness(1.2);
}

/* Exploration Realm Video Overlay */
.exploration-realm .realm-video-overlay {
    background: linear-gradient(180deg, 
        rgba(255, 190, 11, 0.4) 0%, 
        transparent 30%, 
        transparent 70%,
        rgba(255, 0, 110, 0.4) 100%);
}

.exploration-realm .realm-video {
    filter: hue-rotate(-5deg) saturate(1.3) brightness(1.15);
}

/* Video Controls */
.video-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero:hover .video-controls,
.realm-card:hover .video-controls {
    opacity: 1;
}

.video-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.video-control-btn:active {
    transform: scale(0.95);
}

/* Video Loading State */
.video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-family: var(--font-display);
    letter-spacing: 2px;
    z-index: 2;
}

.video-loading::after {
    content: '...';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Cinematic Fade-In Effect */
.video-fade-in {
    animation: videoFadeIn 2s ease-out;
}

@keyframes videoFadeIn {
    from {
        opacity: 0;
        filter: blur(20px);
    }
    to {
        opacity: 0.4;
        filter: blur(0);
    }
}

/* Mobile Video Fallback */
@media (max-width: 768px) {
    .video-background,
    .realm-video-bg {
        display: none;
    }
    
    /* Enhanced gradient fallbacks for mobile */
    .hero {
        background: 
            radial-gradient(circle at 20% 50%, rgba(255, 0, 110, 0.15), transparent 50%),
            radial-gradient(circle at 80% 50%, rgba(58, 134, 255, 0.15), transparent 50%),
            var(--bg-primary);
    }
    
    .empathy-realm {
        background: 
            radial-gradient(circle at 30% 30%, rgba(255, 0, 110, 0.1), transparent 70%),
            var(--bg-card);
    }
    
    .drive-realm {
        background: 
            radial-gradient(circle at 70% 30%, rgba(58, 134, 255, 0.1), transparent 70%),
            var(--bg-card);
    }
    
    .genius-realm {
        background: 
            radial-gradient(circle at 30% 70%, rgba(6, 255, 165, 0.1), transparent 70%),
            var(--bg-card);
    }
    
    .exploration-realm {
        background: 
            radial-gradient(circle at 70% 70%, rgba(255, 190, 11, 0.1), transparent 70%),
            var(--bg-card);
    }
}

/* Cinematic Scan Line Effect (Optional) */
.cinematic-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        transparent 1px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 3px
    );
    pointer-events: none;
    opacity: 0.1;
    z-index: 10;
    animation: scanlines 10s linear infinite;
}

@keyframes scanlines {
    from { transform: translateY(0); }
    to { transform: translateY(10px); }
}

/* Film Grain Effect (Optional) */
.film-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
    pointer-events: none;
    opacity: 0.3;
    z-index: 10;
    animation: grain 0.5s steps(10) infinite;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 10%); }
    80% { transform: translate(-15%, 0%); }
    90% { transform: translate(10%, 5%); }
}

/* Vignette Effect */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 9;
}

/* Performance: Reduce video quality on older devices */
@media (max-resolution: 150dpi) {
    .bg-video,
    .realm-video {
        opacity: 0.3;
        filter: blur(2px);
    }
}

/* High-end devices: Enhanced video effects */
@media (min-resolution: 2dppx) {
    .bg-video,
    .realm-video {
        opacity: 0.5;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .bg-video,
    .realm-video {
        display: none;
    }
    
    .video-background,
    .realm-video-bg {
        display: none;
    }
}

/* Video Placeholder (Before Load) */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.2), 
        rgba(118, 75, 162, 0.2), 
        rgba(240, 147, 251, 0.2));
    animation: placeholder-pulse 2s ease-in-out infinite;
}

@keyframes placeholder-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Chrome/Edge Video Optimization */
@supports (-webkit-appearance: none) {
    .bg-video,
    .realm-video {
        will-change: transform;
        backface-visibility: hidden;
        perspective: 1000px;
    }
}

/* Firefox Video Optimization */
@-moz-document url-prefix() {
    .bg-video,
    .realm-video {
        image-rendering: crisp-edges;
    }
}