/**
 * Blanding Three.js 3D Banners - Global Responsive Styles (v2.0)
 * Optimized for Mobile Text Legibility, Soft Delicate Aesthetic & Content Relevance
 */

/* Container Isolation & Stacking Context */
.has-blanding-three-banner,
.blx-hero,
.ch-hero,
.bhs-hero,
.store-hero,
.blch-hero,
.store-header,
.woocommerce-products-header,
.bs-hero,
.bn-service-hero,
.bi-hero,
.bn-about-intro,
.gs-hero,
.gov-hero,
.pm-hero,
.pf-hero,
.bl-contact-page,
.blgp-project-contact,
.contact-section,
.blog-header-section,
.blbm-hero,
.blcg-archive-hero,
.bdm-sales-heading,
.hero-section,
.b404-main,
.hero.wrap,
.site-hero {
    position: relative !important;
    overflow: hidden !important;
}

/* 3D WebGL Canvas Layer - Soft, Delicate & Elegant Background */
.blanding-three-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    mix-blend-mode: screen; /* Smoothly integrates with dark/gradient hero backgrounds */
}

/* Desktop Canvas Opacity: Soft, non-distracting 50% */
.blanding-three-canvas.is-ready {
    opacity: 0.52 !important;
}

/* Ensure foreground content, typography, navigation, and buttons remain 100% clickable and readable */
.blx-hero > *:not(.blanding-three-canvas),
.ch-hero > *:not(.blanding-three-canvas),
.bhs-hero > *:not(.blanding-three-canvas),
.store-hero > *:not(.blanding-three-canvas),
.blch-hero > *:not(.blanding-three-canvas),
.store-header > *:not(.blanding-three-canvas),
.woocommerce-products-header > *:not(.blanding-three-canvas),
.bs-hero > *:not(.blanding-three-canvas),
.bn-service-hero > *:not(.blanding-three-canvas),
.bi-hero > *:not(.blanding-three-canvas),
.bn-about-intro > *:not(.blanding-three-canvas),
.gs-hero > *:not(.blanding-three-canvas),
.gov-hero > *:not(.blanding-three-canvas),
.pm-hero > *:not(.blanding-three-canvas),
.pf-hero > *:not(.blanding-three-canvas),
.bl-contact-page > *:not(.blanding-three-canvas),
.blgp-project-contact > *:not(.blanding-three-canvas),
.contact-section > *:not(.blanding-three-canvas),
.blog-header-section > *:not(.blanding-three-canvas),
.blbm-hero > *:not(.blanding-three-canvas),
.blcg-archive-hero > *:not(.blanding-three-canvas),
.bdm-sales-heading > *:not(.blanding-three-canvas),
.hero-section > *:not(.blanding-three-canvas),
.b404-main > *:not(.blanding-three-canvas),
.hero.wrap > *:not(.blanding-three-canvas),
.site-hero > *:not(.blanding-three-canvas),
.has-blanding-three-banner > *:not(.blanding-three-canvas),
.ch-wrap,
.ch-hero-grid,
.ch-hero-copy,
.ch-hero-art-stack,
.store-hero-container,
.blch-shell,
.blch-hero-wrap,
.blch-hero-actions,
.blch-vip-pass-banner,
.blbm-shell,
.blbm-hero-grid,
.blbm-hero-copy,
.blbm-hero-stats,
.bs-shell,
.bi-shell,
.blx-shell,
.gs-hero__grid,
.pf-hero__content,
.bl-contact-shell {
    position: relative !important;
    z-index: 3 !important;
}

/* Deactivate redundant 2D background canvas on home hero */
.blx-ambient-canvas {
    display: none !important;
}

/* Smooth blending of background glows */
.blx-hero-graphics {
    mix-blend-mode: multiply;
    opacity: 0.25;
    z-index: 2 !important;
}

.hero-bg-text {
    z-index: 2 !important;
    opacity: 0.05 !important;
}

/* =========================================================
   TABLET & MOBILE OPTIMIZATIONS (Very Soft, Air & Clean)
   ========================================================= */

@media (max-width: 1024px) {
    .blanding-three-canvas.is-ready {
        opacity: 0.40 !important;
    }
}

@media (max-width: 768px) {
    /* Mobile Canvas Opacity: Extra soft and gentle (26%), letting text shine with zero eye-strain */
    .blanding-three-canvas.is-ready {
        opacity: 0.26 !important;
    }

    /* Enhance mobile heading & paragraph readability */
    .has-blanding-three-banner h1,
    .has-blanding-three-banner h2,
    .has-blanding-three-banner .ch-hero-copy h1,
    .has-blanding-three-banner .blch-hero h1,
    .has-blanding-three-banner .bn-service-hero h1,
    .has-blanding-three-banner .pm-hero h1,
    .has-blanding-three-banner .gov-hero h1,
    .has-blanding-three-banner .pf-hero h1,
    .has-blanding-three-banner .blgp-project-contact h1 {
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
        word-break: keep-all;
    }

    .has-blanding-three-banner p,
    .has-blanding-three-banner .ch-hero-copy p,
    .has-blanding-three-banner .lead-text {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        word-break: keep-all;
    }

    /* Clean spacing on mobile hero containers */
    .ch-hero,
    .blch-hero,
    .bn-service-hero,
    .pm-hero,
    .gov-hero,
    .pf-hero {
        padding-top: 36px !important;
        padding-bottom: 40px !important;
    }
}