/* Futuristic Background Integration */
#futuristic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    background: transparent !important;
}

/* Ensure main content sits above background and is transparent */
.main-container, 
main.container,
.dashboard-wrapper,
.catalog-container,
.filters-container-v2,
.landing-wrapper,
.page-wrapper,
.site-wrapper {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* Force all hero sections to be transparent */
.hero-section,
.hero-v3,
.premium-hero {
    background: transparent !important;
    background-image: none !important;
}

/* Pseudo-elements in hero sections often have gradients */
.hero-section::before,
.hero-section::after,
.hero-v3::before,
.hero-v3::after {
    display: none !important;
}

/* Dark background fallback - exclude admin pages */
body:not(.admin-page):not([class*="admin"]) {
    background: transparent !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Inertial scrolling for iOS */
}

/* Admin pages should not use futuristic background */
body.admin-page,
body[class*="admin"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    background-attachment: fixed !important;
}

/* Mobile Scroll Optimization */
@media (max-width: 768px) {
    /* Simplify glass effects during scroll or on mobile in general to save GPU */
    .glass-morphism,
    .glass-card,
    .premium-card,
    .track-card,
    .filters-bar-v2,
    .catalog-container,
    .hero-section {
        backdrop-filter: blur(8px) !important; /* Reduced from 15px for performance */
        -webkit-backdrop-filter: blur(8px) !important;
        background: linear-gradient(135deg, rgba(20, 8, 48, 0.62), rgba(9, 20, 52, 0.58)) !important;
        box-shadow: none !important; /* Heavy shadows cause scroll lag */
        border: 1px solid rgba(129, 107, 255, 0.28) !important;
    }

    /* Disable expensive animations on mobile */
    .glitch-effect, 
    .glitch-text,
    .gfx-mesh,
    .floating-particles {
        animation: none !important;
    }

    /* Hardware acceleration for scrollable containers */
    .main-container, 
    main.container,
    .catalog-container,
    .dashboard-wrapper {
        will-change: transform;
        transform: translateZ(0); /* Force hardware acceleration */
    }
    
    /* Ensure no horizontal overflow causing jank */
    body, html {
        overflow-x: hidden;
        position: relative;
        width: 100%;
    }
}

/* Ultra-low-end / small phone optimization */
@media (max-width: 480px) {
    /* Further reduce blur for older GPUs */
    .glass-morphism,
    .glass-card,
    .premium-card,
    .track-card,
    .filters-bar-v2,
    .catalog-container,
    .hero-section {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* Disable will-change on very small screens to save memory */
    .main-container,
    main.container,
    .catalog-container,
    .dashboard-wrapper {
        will-change: auto;
        transform: none;
    }
}

/* Hide template background elements to show the canvas */
.bg-gfx-elements,
.floating-particles,
#particles,
.gfx-mesh,
.gfx-stars,
.gfx-grid,
.gfx-vignette,
.gfx-blob,
.gfx-scanner,
.bg-gfx-grid {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Adjust existing glass morphism to work with new background */
.glass-morphism,
.glass-card,
.premium-card,
.track-card {
    background: linear-gradient(140deg, rgba(20, 8, 48, 0.42), rgba(6, 16, 42, 0.38)) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(120, 98, 255, 0.3) !important;
}

/* Hero content needs visibility */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-section.has-background-media .hero-overlay {
    background: linear-gradient(135deg, rgba(7, 4, 24, 0.7) 0%, rgba(39, 9, 72, 0.52) 52%, rgba(8, 25, 72, 0.44) 100%) !important;
}