/* =========================================================
   ECOTECH MOBILE NAV — HARD FIX
   Loaded last. Overrides every earlier blur / isolation /
   opacity-transition rule that freezes mobile GPUs.
   ========================================================= */

@media (max-width: 900px) {

  /* ---- 1. Kill every backdrop-filter and decorative blur on mobile ---- */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Decorative section blobs stay, but without live filter blur */
  .section::before,
  .section::after,
  .section-soft::before,
  .section-soft::after,
  .v3-system__wash,
  .cube-glow,
  .cube-card::after,
  .hero-visual::before,
  .hero-visual::after,
  .fx-blur,
  .capability-group {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
  }

  /* ---- 2. Nav bar: solid, no sampling of page behind it ---- */
  .eco-nav-v23 {
    position: fixed !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    transform: translateX(-50%) !important;
    background: #E9E7DF !important;
    border: 1px solid rgba(23, 37, 43, 0.12) !important;
    box-shadow: 0 8px 24px rgba(23, 37, 43, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    isolation: auto !important;
    overflow: visible !important;
    z-index: 100000 !important;
    transition: none !important;
  }
  .eco-nav-v23.is-scrolled {
    background: #E9E7DF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ---- 3. Backdrop: solid dim, never blur ---- */
  .eco-mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    background: rgba(23, 37, 43, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  .eco-mobile-nav-backdrop[aria-hidden="true"],
  body:not(.nav-open) .eco-mobile-nav-backdrop {
    display: none !important;
    pointer-events: none !important;
  }
  body.nav-open .eco-mobile-nav-backdrop,
  .eco-nav-v23.mobile-open + .eco-mobile-nav-backdrop {
    display: block !important;
    pointer-events: auto !important;
  }

  /* ---- 4. Sheet: solid panel, display toggle only (no opacity fade) ---- */
  .eco-nav-v23__sheet {
    position: fixed !important;
    top: calc(62px + env(safe-area-inset-top)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - 74px - env(safe-area-inset-top)) !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 100010 !important;
    display: none !important; /* closed by default */
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #F5F3EC !important;
    border: 1px solid rgba(23, 37, 43, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(23, 37, 43, 0.22) !important;
    padding: 18px 18px calc(24px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
    isolation: auto !important;
  }

  .eco-nav-v23.mobile-open .eco-nav-v23__sheet,
  .eco-nav-v23__sheet[aria-hidden="false"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .eco-nav-v23:not(.mobile-open) .eco-nav-v23__sheet,
  .eco-nav-v23__sheet[aria-hidden="true"] {
    display: none !important;
    pointer-events: none !important;
  }

  /* ---- 5. While menu open: freeze page paint under the menu ---- */
  /* Scroll lock is handled in JS via position:fixed + saved scrollY.
     Do not force overflow:hidden here — it can jump the page to the end. */
  body.nav-open {
    /* position/top set inline by navigation.js */
  }

  body.nav-open main,
  body.nav-open .home-page-v3,
  html.eco-nav-menu-open main {
    /* Stop the browser from repainting the whole homepage under the menu */
    /* content-visibility avoided — collapses height and jumps scroll */
    pointer-events: none !important;
  }

  body.nav-open #photonCanvas,
  html.eco-nav-menu-open #photonCanvas {
    display: none !important;
  }

  body.nav-open .hp7-marquee__track,
  body.nav-open [class*="marquee"],
  html.eco-nav-menu-open .hp7-marquee__track {
    animation-play-state: paused !important;
    animation: none !important;
  }

  /* ---- 6. Hamburger always tappable ---- */
  .eco-nav-v23__mobile {
    position: relative !important;
    z-index: 100020 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  .eco-mobile-menu-close,
  .eco-mobile-nav-accordion,
  .eco-nav-v23__sheet a {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Desktop keeps soft glass; mobile never does */
@media (min-width: 901px) {
  .eco-nav-v23 {
    /* leave core desktop styles alone */
  }
}

/* Extra: pause ALL continuous CSS animations while menu is open */
@media (max-width: 900px) {
  body.nav-open *,
  body.nav-open *::before,
  body.nav-open *::after,
  html.eco-nav-menu-open *,
  html.eco-nav-menu-open *::before,
  html.eco-nav-menu-open *::after {
    animation-play-state: paused !important;
  }

  /* Keep the menu itself interactive (don't pause its none animations) */
  body.nav-open .eco-nav-v23,
  body.nav-open .eco-nav-v23 *,
  body.nav-open .eco-mobile-nav-backdrop {
    animation-play-state: running !important;
  }

  /* Prefer visibility over content-visibility to avoid close jank */
  body.nav-open main {
    
    visibility: visible !important;
    /* Still block interaction with page under menu */
    pointer-events: none !important;
  }
}