/* Glass: a frosted, semi-transparent surface that lets the content scrolling underneath show through, softened by a blur.
   Variants: .glass (bars, about 40% opaque) and .glass--panel (menus and other panels, about 46% opaque).
   .glass-lift is for the clickable items inside a glass panel: on hover, focus or press the item rises as a lighter pane of glass with a
   bright rim, a top highlight and a shadow. The item brings its own padding, radius and text colour; --glass-lift-mix, --glass-edge,
   --surface-lift and --shadow-lift are the tokens.
   It sets only the background and the blur; borders, radius and shadow belong to the component that wears it (see header.css).
   Amounts come from the --glass-* tokens. Keep the text on it at 4.5:1 or better against the page behind, in light and dark. */

.glass {
  background: color-mix(in srgb, var(--surface) var(--glass-bar-mix), transparent);
  -webkit-backdrop-filter: blur(var(--glass-bar-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-bar-blur)) saturate(var(--glass-saturate));
}
.glass--panel {
  background: color-mix(in srgb, var(--surface) var(--glass-panel-mix), transparent);
  -webkit-backdrop-filter: blur(var(--glass-panel-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-panel-blur)) saturate(var(--glass-saturate));
}

.glass-lift { position: relative; transition: background-color .18s, color .18s, box-shadow .18s, transform .18s cubic-bezier(.2, .8, .3, 1.25); }
.glass-lift:hover, .glass-lift:focus-visible, .glass-lift:active { z-index: 1; color: var(--teal-ink);
  background: color-mix(in srgb, var(--surface-lift) var(--glass-lift-mix), transparent);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-edge), inset 0 -8px 12px -8px color-mix(in srgb, var(--teal) 28%, transparent);
  transform: translateY(-2px) scale(1.03); }