/* ═══════════════════════════════════════════════════════════════
   DHALMIA — Stacking Context Fix
   File:     /css/dh-stacking-fix.css
   Purpose:  Resolve portfolio/project page "draw-through" where
             content bleeds through sections during scroll.
   Load:     After dh-global-v5.css and dh-nav-drawer-v2.2.css
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   A) SCOPE ISOLATION
   Contain all child stacking contexts within .dh-scope and
   .dhalmia-project so transforms from GSAP ScrollTrigger
   (parallax, scrub, etc.) don't escape and conflict with
   the fixed nav or noise overlay.
   ─────────────────────────────────────────────────────────── */

.dh-scope,
.dhalmia-project {
  isolation: isolate;
  position: relative;
  z-index: 1;
  background-color: var(--bg-0, #0F0F0F);
}


/* ───────────────────────────────────────────────────────────
   B) NOISE OVERLAY — Reduce z-index
   The ::before noise overlay only needs to sit above the
   scope background (z-index: 1), NOT above the nav (9999).
   The isolation on .dh-scope prevents this from leaking out.
   ─────────────────────────────────────────────────────────── */

.dh-scope::before {
  z-index: 1 !important;
}


/* ───────────────────────────────────────────────────────────
   C) CONTENT SECTIONS — Opaque backgrounds
   When GSAP applies transform (parallax scrub), each
   element gains its own stacking context. Without an opaque
   background, content from sections below becomes visible.
   Ensure all major containers within the scope have a
   background color matching the site dark theme.
   ─────────────────────────────────────────────────────────── */

.dh-scope > .elementor,
.dh-scope > .elementor > .elementor-inner,
.dh-scope > .elementor > .elementor-inner > .elementor-section-wrap,
.dhalmia-project > .elementor,
.dhalmia-project > .elementor > .elementor-inner,
.dhalmia-project > .elementor > .elementor-inner > .elementor-section-wrap {
  background-color: inherit;
}

/* Elementor sections within the scope: fill background where absent */
.dh-scope .elementor-section:not([data-settings*="background"]),
.dhalmia-project .elementor-section:not([data-settings*="background"]) {
  background-color: var(--bg-0, #0F0F0F);
}

/* Elementor containers (Flexbox layout) */
.dh-scope .e-con:not([data-settings*="background"]),
.dhalmia-project .e-con:not([data-settings*="background"]) {
  background-color: var(--bg-0, #0F0F0F);
}


/* ───────────────────────────────────────────────────────────
   D) PROJECT-SPECIFIC SECTIONS — Opaque backgrounds
   Named sections that commonly have GSAP transforms applied.
   ─────────────────────────────────────────────────────────── */

.dp-hero,
.dp-story,
.dp-pillars,
.dp-gallery,
.dp-related,
.dp-cta,
.rw-hero,
.rw-intro,
.rw-gallery,
.rw-process,
.port-hero,
.port-projects,
.port-recognition {
  position: relative;
  z-index: 1;
  background-color: var(--bg-0, #0F0F0F);
}


/* ───────────────────────────────────────────────────────────
   E) NAV STAYS ON TOP
   Reinforce the nav's position above the isolated scope.
   Because .dh-scope has isolation:isolate, its z-index:1
   creates a single stacking layer. The nav at z-index:9999
   sits above the entire scope reliably.
   ─────────────────────────────────────────────────────────── */

.dh-nav {
  z-index: 9999;
}


/* ───────────────────────────────────────────────────────────
   F) FOOTER — Opaque background above scope
   The footer sits after .dh-scope and should not be affected
   by scroll transforms within the scope.
   ─────────────────────────────────────────────────────────── */

.dh-footer {
  position: relative;
  z-index: 2;
  background-color: var(--bg-0, #0F0F0F);
}


/* ───────────────────────────────────────────────────────────
   G) SCROLL-TRIGGERED PARALLAX CONTAINERS
   Elements that receive GSAP scrub transforms need an opaque
   background on their immediate wrapper to prevent bleed.
   ─────────────────────────────────────────────────────────── */

.dp-hero__figure,
.dp-story__figure,
.dh-gallery__visual,
.rw-gallery__tile,
.rw-hero__media {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-0, #1A1A1A);
}


/* ───────────────────────────────────────────────────────────
   H) REDUCED MOTION — No extra treatment needed
   ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dh-scope,
  .dhalmia-project {
    isolation: auto;
  }
}