/**
 * Stops hidden overlays blurring the screen.
 *
 * THE PROBLEM
 * A full-viewport `backdrop-filter: blur()` is among the most expensive things
 * a page can ask for: on every frame the compositor snapshots everything behind
 * the layer and gaussian-blurs it. Hiding such a layer with opacity, or by
 * sliding it off-screen, does NOT stop that — the element stays in the render
 * tree and keeps paying the cost while completely invisible.
 *
 * This site hid overlays both ways, so the browser was continuously blurring
 * copies of the viewport nobody could see: twelve of them on the admin panel,
 * four on the services page, and the mobile menu on all six public pages —
 * including on desktop, where that menu is never opened.
 *
 * The symptom is distinctive: data loads fast, then everything *feels* sluggish,
 * because the work is in the compositor rather than in the network or the
 * database.
 *
 * THE FIX
 * Switch the blur off while the overlay is hidden. No JavaScript changes are
 * needed — the existing open/close code already toggles these exact classes, so
 * opening an overlay stops the rule matching and the blur returns instantly.
 *
 * WHAT IS DELIBERATELY NOT TOUCHED
 * Blurs on genuinely visible elements — the sticky header, frosted cards — keep
 * working. Rule 1 is scoped to `.inset-0` so it only ever matches full-screen
 * overlays, never a decorative layer that happens to use `pointer-events-none`.
 */

/* 1. Overlays hidden with opacity, e.g.
      <div class="fixed inset-0 ... backdrop-blur-sm opacity-0 pointer-events-none">
      and overlays whose blurred backdrop is a child of that container. */
.pointer-events-none.inset-0[class*="backdrop-blur"],
.pointer-events-none.inset-0 [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 2. Panels slid off-screen by a transform, e.g. the mobile menu
      <div id="mobile-menu" class="fixed inset-0 ... backdrop-blur-xl translate-x-full">
      Off-screen is not hidden: it is still composited, and still blurring. */
[class*="translate-x-full"][class*="backdrop-blur"],
[class*="translate-y-full"][class*="backdrop-blur"],
[class*="translate-x-full"] [class*="backdrop-blur"],
[class*="translate-y-full"] [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}