Add liquid glass filter definitions to site layout

app/layout.tsx

@@ -21,6 +21,7 @@ import "./community.css";
 import "./community-social.css";
 import "./cinematic-intro.css";
 import "./tournaments.css";
+import "./site-glass.css";
 import { themeInitScript } from "@/shared/theme";
 import { SiteSettingsProvider } from "@/components/SiteSettingsProvider";
 import { initialSiteSettings } from "@/lib/site-settings";
@@ -52,6 +53,64 @@ export default async function RootLayout({
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body>
+        <svg
+          aria-hidden="true"
+          className="site-filter-definitions"
+          focusable="false"
+        >
+          <defs>
+            <filter
+              id="liquid-glass-distortion"
+              x="-10%"
+              y="-20%"
+              width="120%"
+              height="140%"
+              colorInterpolationFilters="sRGB"
+            >
+              <feTurbulence
+                type="fractalNoise"
+                baseFrequency="0.012 0.055"
+                numOctaves={2}
+                seed={7}
+                result="glass-noise"
+              />
+              <feGaussianBlur
+                in="glass-noise"
+                stdDeviation="2.5"
+                result="soft-glass-noise"
+              />
+              <feDisplacementMap
+                in="SourceGraphic"
+                in2="soft-glass-noise"
+                scale={18}
+                xChannelSelector="R"
+                yChannelSelector="G"
+                result="refracted-backdrop"
+              />
+              <feSpecularLighting
+                in="soft-glass-noise"
+                surfaceScale={3}
+                specularConstant={0.55}
+                specularExponent={32}
+                lightingColor="#fff"
+                result="glass-highlight"
+              >
+                <feDistantLight azimuth={315} elevation={55} />
+              </feSpecularLighting>
+              <feComposite
+                in="glass-highlight"
+                in2="SourceAlpha"
+                operator="in"
+                result="bounded-highlight"
+              />
+              <feBlend
+                in="refracted-backdrop"
+                in2="bounded-highlight"
+                mode="screen"
+              />
+            </filter>
+          </defs>
+        </svg>
         <a className="skip-link" href="#main-content">
           {t("Skip to content")}
         </a>