/* ============================================================================
   Nexian Global — Mobile "lite atmosphere"   (2026-05-24)
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   Android phones flickered badly on every external page. Root cause: the
   design stacks many GPU-compositor-heavy effects on top of each other —

     • ~9–12 `backdrop-filter: blur()` layers per page (nav, footer, language
       menu, cards, modal, panels) …
     • … composited over a FIXED background that is both blurred (`blur(2px)`)
       and continuously animated (`ken-burns`, infinite) …
     • … plus 3 large `filter: blur(60–120px)` smoke clouds + war-glow + fog,
       all animated …
     • … plus 60 animated ember particles …
     • … plus a full-screen `backdrop-filter` that landing.php REWRITES on
       every scroll frame.

   A mobile GPU cannot re-rasterise that many full-screen blur layers each
   frame, so layers are dropped and redrawn → the flicker / unreadable content
   players reported.

   WHAT THIS FILE DOES
   On touch / small screens ONLY, it neutralises the flicker sources:
   removes every backdrop-filter, freezes + de-blurs the background, hides the
   animated blur/particle layers, and pins the scroll overlay to a static
   value. Desktop is completely untouched.

   LOAD ORDER / SPECIFICITY
   Loaded from page-shell.phtml's <head> (so it covers the landing AND every
   shell page). Page-specific stylesheets (landing.css, manual.css, …) load
   later in the page <body>, so the overrides here use `!important` to win.
   Paired with a matchMedia guard in landing.php that stops the scroll-driven
   backdrop-filter writer on the same devices.

   Frosted panels stay readable without the blur because each already carries
   an opaque-enough background (0.55–0.93 alpha; nav/footer 0.88), so they
   simply degrade to plain solid panels.
   ============================================================================ */

@media (max-width: 767px), (hover: none) and (pointer: coarse) {

    /* 1 ── Kill EVERY backdrop-filter. This is the single biggest flicker
       source on Android (re-rasterising a blurred backdrop every frame). */
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 2 ── De-blur + freeze the fixed background on the landing AND on every
       shell page (the shared .atmosphere-bg). A static, sharp background
       costs the compositor nothing. */
    .landing-atmos-bg,
    .atmosphere-bg {
        filter: none !important;
        animation: none !important;
    }

    /* 3 ── Remove the heavy animated blur / particle layers outright. They are
       pure decoration; on mobile they only cost GPU memory + repaints. */
    .smoke-cloud,
    .ground-fog,
    .war-glow,
    .hero-embers,
    .ember,
    .hero-ember {
        display: none !important;
    }

    /* 4 ── Static scroll-dim instead of the per-frame backdrop-filter overlay.
       (landing.php no longer writes backdrop-filter on mobile; rule 1 already
       stripped the CSS blur — here we just give it a fixed, slightly stronger
       tint so foreground text keeps its contrast without the blur.) */
    .landing-atmos-dim {
        background-color: rgba(2, 6, 23, 0.5) !important;
    }

    /* 5 ── The few panels whose background was on the translucent side get a
       touch more opacity so they read cleanly now that the blur is gone.
       (Most panels are already 0.7–0.93 and need nothing.) */
    .hero-countdown-pill {
        background: rgba(30, 18, 8, 0.85) !important;
    }
    .glass-soft {
        background: rgba(10, 7, 3, 0.85) !important;
    }
}