/* ===== GlassSurface (React Bits, vanilla port — see js/glass-surface.js) =====

   Upstream's own stylesheet, with two deliberate adaptations:

   1. WHICH ENGINE GETS THE FILTER. Upstream detects whether a browser will
      actually RENDER a filtered backdrop-filter by sniffing the user-agent
      string for "Safari" and "Firefox" and assuming everything else is fine.
      That hardcodes today's three engines by name and says nothing about
      tomorrow's. This page already solved the same problem once, for
      css/liquid-glass.css's refraction layer, with a real feature query:
      `@supports (backdrop-filter: url(#id))` is true on every engine that
      PARSES the syntax — Chromium included — but Safari and Firefox both
      parse it and then render nothing, so the query alone still can't tell
      them apart. `-apple-system-body` and `-moz-appearance` close the gap:
      real properties that exist only on WebKit and only on Gecko, so
      `not (font: -apple-system-body)` rules out Safari and
      `not (-moz-appearance: none)` rules out Firefox, leaving Chromium as
      the one engine that clears all three.

   2. LIGHT/DARK. Upstream wraps every colour in `light-dark()`. This site has
      no light theme at all — --bg is #050505 unconditionally — so the dark
      branch of each pair is written out directly rather than left depending
      on a `color-scheme` declaration the page never makes.

   Every other value below is upstream's, unchanged. In particular the
   backdrop-filter carries NO blur: the `blur` prop softens the displacement
   map itself (see _updateMap in the JS), and what shows through the glass
   stays sharp. Blurring the backdrop here is exactly what turns this from a
   lens into an ordinary frosted panel. */

.glass-surface {
  position: relative;
  isolation: isolate;
  border-radius: var(--gs-radius, 20px);
  transition: opacity 0.26s ease-out;
}

/* Zero-size and clipped — the filter def inside carries no visual output of
   its own; see js/glass-surface.js. */
.glass-surface__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ===== Fallback: Safari, Firefox, and anything that can't render the filter
   Upstream's .glass-surface--fallback, dark branch. A frosted pane rather
   than a lens — honest about being a different thing, instead of pretending
   at a refraction the engine will not draw. */
.glass-surface {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
          backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .glass-surface {
    background: rgba(0, 0, 0, 0.4);
  }
  .glass-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: inherit;
    z-index: -1;
  }
}

/* ===== The real thing: Chromium
   Upstream's .glass-surface--svg, dark branch. Transparent by default
   (--glass-frost defaults to the backgroundOpacity prop, which is 0), no
   border, and eight layered shadows: two inset rim highlights that give the
   glass a lit edge, then three ambient drops and three inset depths that
   give it thickness. Those shadows are most of what makes the shape read as
   a physical object at all, since the body of it is see-through. */
@supports (backdrop-filter: url("#gs-test"))
      and (not (font: -apple-system-body))
      and (not (-moz-appearance: none)) {
  .glass-surface {
    background: hsl(0 0% 0% / var(--glass-frost, 0));
    border: 0;
    -webkit-backdrop-filter: var(--gs-filter, none) saturate(var(--glass-saturation, 1));
            backdrop-filter: var(--gs-filter, none) saturate(var(--glass-saturation, 1));
    box-shadow:
      0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
      0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
      0px 4px 16px rgba(17, 17, 26, 0.05),
      0px 8px 24px rgba(17, 17, 26, 0.05),
      0px 16px 56px rgba(17, 17, 26, 0.05),
      0px 4px 16px rgba(17, 17, 26, 0.05) inset,
      0px 8px 24px rgba(17, 17, 26, 0.05) inset,
      0px 16px 56px rgba(17, 17, 26, 0.05) inset;
  }
}

.glass-surface:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}