/**
 * Background Compatibility Styles
 * 
 * This file contains styles to make section backgrounds compatible with
 * the animated background by making them transparent or semi-transparent
 * while preserving text readability.
 *
 * !IMPORTANT: These styles use !important to override other background styles
 * from background.css and front-page.css.
 */

/* Override global background styles */
html, body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body:before,
body::before {
    display: none !important; /* Hide all pseudo-element backgrounds from style.css and background.css */
}

/* Make the animated background fully visible */
#animated-background {
    z-index: -1 !important;
    opacity: 1 !important;
}

/* Override any background colors from style.css except footer */
.site-main,
.site-content,
.content-area,
.page,
.post,
.entry-content,
.entry,
.wrapper,
.container,
.site-header {
    background-color: transparent !important;
}

/* Force ALL elements to have transparent backgrounds except for cards and buttons */
*:not(#animated-background):not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-tertiary):not(svg):not(path):not(.card):not(.stat-card):not(.feature-card):not(.step-item):not(.partner-card):not(.cta-card):not(.roadmap-card) {
    background-color: transparent !important;
}

/* Ensure section content is above the animated background */
.section-title,
.section-subtitle,
.section-description,
.btn,
.nav-menu,
.site-header,
.hero-content,
.stats-grid,
.feature-grid,
.roadmap-grid,
.cta-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Allow footer to keep its original background and styling */
.site-footer {
    position: relative !important;
    z-index: 2 !important;
    /* Let the original CSS from style.css take effect */
}

/* Make ONLY the hero section background transparent */
.hero-section {
    background-color: transparent !important; /* Fully transparent background */
    backdrop-filter: blur(5px) !important; /* Subtle blur effect for better readability */
    -webkit-backdrop-filter: blur(5px) !important; /* For Safari */
    position: relative !important;
    z-index: 1 !important;
}

/* Allow all other sections to keep their unique backgrounds */
section:not(.hero-section),
.section:not(.hero-section),
.stats-section,
.why-choose-section,
.how-it-works-section,
.ecosystem-section,
.tokenomics-section,
.cta-section,
.features-section,
.roadmap-section,
.partners-section,
.about-section,
.faq-section,
.contact-section,
.footer-section,
[class*="-section"]:not(.hero-section) {
    position: relative !important;
    z-index: 1 !important;
    /* Remove any background overrides to let the original CSS take effect */
}

/* Ensure section content is above the animated background */
.hero-content,
.stats-grid,
.features-grid,
.steps-container,
.partners-grid,
.tokenomics-grid,
.cta-grid {
    position: relative !important;
    z-index: 2 !important; /* Ensure content is above background */
}

/* Preserve hero section gradient overlay */
.hero-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at top right, rgba(0, 255, 0, 0.1), transparent 50%) !important;
    z-index: 0 !important;
}

/* Enhance card backgrounds for better readability */
.card, 
.stat-card,
.feature-card,
.step-item,
.partner-card,
.cta-card {
    background-color: rgba(20, 30, 22, 0.3) !important; /* More transparent background */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 255, 0, 0.1) !important;
}

/* Ensure animated background is visible */
#animated-background {
    z-index: -1; /* Keep below all content */
    opacity: 1; /* Full opacity to ensure visibility */
}

/* Override the global background to ensure animated background is visible */
html, body {
    background-color: transparent !important;
    background-image: none !important;
}

/* Hide the body:before atmospheric layer from background.css to avoid conflicts */
body:before {
    display: none !important;
}