/* ==========================================================================
   ADDED: Pure WebGL Section Layout & Transparency Overrides
   ========================================================================== */

/* Hero Canvas Layer */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Sits behind hero content overlays */
    pointer-events: auto; /* Receives clicks for particle explosion */
}

/* Ensure hero content sits on top of canvas so buttons remain clickable */
.hero-content, 
.hero-visuals {
    position: relative;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through empty spaces to canvas */
}

/* Allow interactive buttons, links, and text selection in hero to function */
.hero-ctas,
.hero-ctas a,
.btn,
.capacity-badge,
.hero-title,
.hero-subtitle,
.hero-mockups,
.floating-bubble-container,
.floating-element {
    pointer-events: auto !important;
}

/* Background canvas for non-hero sections */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* Sits behind everything */
    pointer-events: none;
    background-color: #060606;
}

/* Revert custom cursor hiding if it was in body */
html, body, a, button, select, input, .service-card, .tab-btn {
    cursor: auto !important;
}

/* Make all sections transparent to allow fixed background shader to display */
.services,
.showcase-section,
.about,
.proof,
.workflow,
.cta-section,
.footer-section,
#services,
#showcase,
#about,
#proof,
#workflow,
#cta {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure navbar has blurred backing but lets bg shader show through */
.navbar.glass {
    background: rgba(7, 9, 14, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Body backdrop settings */
body {
    background-color: #060606 !important;
}

/* Support accessibility prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    /* Stop transitions if any custom classes were left */
    * {
        animation-delay: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}