/* glass.css (owner: builder A): panes of wet glass (glass.js). Every colour is a token.
   A pane is any positioned element with [data-glass]. glass.js prepends a canvas that paints at z-index -1 inside the
   pane's own stacking context (isolation), so the pane's content always sits on top of the water. Until the first frame
   (or with no WebGL) the pane is frosted stone over the world, with the CSS dew layer. */
.glass-pane { isolation: isolate; }
.glass-gl { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; max-width: none; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .9s var(--settle); }
.gl-live > .glass-gl { opacity: 1; }

/* the poster: frosted, damp stone, until the water is running */
[data-glass]:not(.gl-done):not(.glass-bg-mode) { background: color-mix(in srgb, var(--bg-2) 52%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.gl-live [data-glass-bg] { opacity: 0; transition: opacity .9s var(--settle); }

/* no WebGL2: keep the frosted stone and bead it with the CSS dew */
[data-glass].no-gl { background: color-mix(in srgb, var(--bg-2) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
[data-glass].no-gl.glass-bg-mode { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass-dew { z-index: -1; --dew-o: .7; border-radius: inherit; }