/* ===== SPACE TRAVEL BACKGROUND ANIMATION ===== */

.space-travel-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Behind sunburst navigation (z-index: 5) */
    overflow: hidden;
    pointer-events: none; /* Allow clicks to pass through to navigation */
    background: #000; /* Fallback background */
}

.space-travel-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #000; /* Fallback while loading */

    /* Video-specific optimizations */
    -webkit-video-decoder: hardware;
    video-decoder: hardware;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.space-travel-background {
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
}

.space-travel-video {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Desktop - Full quality */
@media (min-width: 1024px) {
    .space-travel-video {
        /* Full quality video playback */
    }
}

/* Tablet - Balanced quality and performance */
@media (max-width: 1023px) and (min-width: 768px) {
    .space-travel-video {
        /* Optimized for tablet performance */
    }
}

/* Mobile - Optimized for performance */
@media (max-width: 767px) {
    .space-travel-video {
        /* Mobile-optimized video playback */
    }
}

/* ===== ACCESSIBILITY ===== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .space-travel-background {
        display: none;
    }

    .sunburst-navigation-overlay {
        background: rgba(255, 255, 255, 0.9); /* Stronger overlay for static background */
    }

    /* Fallback static background for reduced motion */
    body {
        background: linear-gradient(135deg,
            #0f172a 0%,
            #1e293b 25%,
            #334155 50%,
            #475569 75%,
            #64748b 100%);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .space-travel-background {
        opacity: 0.7;
    }

    .sunburst-navigation-overlay {
        background: radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.95) 60%,
            rgba(255, 255, 255, 0.8) 75%,
            rgba(255, 255, 255, 0.5) 85%,
            transparent 100%
        );
    }
}

/* ===== LOADING STATE ===== */
.space-travel-background.loading {
    background: linear-gradient(135deg,
        #0f172a 0%,
        #1e293b 25%,
        #334155 50%,
        #475569 75%,
        #64748b 100%);
}

.space-travel-background.loading + .sunburst-navigation-overlay {
    opacity: 1; /* Ensure overlay is visible during loading */
}

.space-travel-background.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(14, 165, 233, 0.3);
    border-top-color: rgba(14, 165, 233, 0.8);
    border-radius: 50%;
    animation: backgroundLoading 1s linear infinite;
    z-index: 2;
}

@keyframes backgroundLoading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== ERROR STATE ===== */
.space-travel-background.error {
    background: linear-gradient(135deg, 
        #1e293b 0%, 
        #334155 50%, 
        #475569 100%);
}

/* ===== OVERLAY EFFECTS ===== */

/* White semi-transparent overlay for sunburst navigation visibility */
.sunburst-navigation-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Width and height set dynamically by JavaScript based on sunburst size */
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.8) 60%,
        rgba(255, 255, 255, 0.6) 75%,
        rgba(255, 255, 255, 0.3) 85%,
        transparent 100%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 3; /* Between video (z-index: 1) and sunburst (z-index: 5) */
    transition: all 0.3s ease;
}

/* Subtle vignette effect to enhance depth */
.space-travel-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 70%,
        rgba(0, 0, 0, 0.15) 90%,
        rgba(0, 0, 0, 0.25) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Enhance the space atmosphere with subtle color overlay */
.space-travel-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(14, 165, 233, 0.02) 0%,
        transparent 25%,
        transparent 75%,
        rgba(56, 189, 248, 0.02) 100%
    );
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* ===== DEVICE-SPECIFIC OPTIMIZATIONS ===== */

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .space-travel-video {
        /* High DPI video optimization */
    }
}

/* Touch devices - optimize for battery */
@media (hover: none) and (pointer: coarse) {
    .space-travel-background {
        transform: translate3d(0, 0, 0);
    }

    .space-travel-video {
        /* Optimize video for mobile battery life */
        will-change: auto;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .space-travel-background {
        display: none;
    }
}

/* ===== DEBUGGING STYLES (commented out by default) ===== */
/*
.space-travel-background.debug {
    border: 2px solid red;
}

.space-travel-background.debug::before {
    content: 'Space Travel BG';
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    background: rgba(255, 0, 0, 0.7);
    padding: 5px;
    font-size: 12px;
    z-index: 10;
}
*/