/* Hero 3D Background Styles */

/* Canvas positioning */
#hero-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: #f8f6f3 !important;
}

/* Ensure HERO content is above 3D background */
.topMv {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    margin-top: 0 !important;
}

.topMv__inner {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Add subtle overlay for better text readability */
.topMv::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0.1) 100%
    ) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Ensure all sections after HERO have proper backgrounds */
main > section:not(.topMv) {
    position: relative !important;
    z-index: 2 !important;
    background: white !important;
}

.topBlock {
    position: relative !important;
    z-index: 2 !important;
}

/* Fix footer positioning */
.commonFooter {
    position: relative !important;
    z-index: 3 !important;
    background: #333 !important;
}

/* Ensure header stays above everything */
.commonHeader {
    position: fixed !important;
    z-index: 9999 !important;
    background: white !important;
}

/* Alternating section backgrounds */
.topAbout {
    background: white !important;
}

.topNews {
    background: white !important;
}

.topBusiness {
    background: #f8f8f8 !important;
}

.topInterview {
    background: white !important;
}

.topContact {
    background: #f8f8f8 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #hero-canvas {
        height: 100vh !important;
        position: fixed !important;
    }

    .topMv {
        min-height: 100vh !important;
    }
}