/**
 * Liquid frosted glass (from Instagram reel technique):
 * backdrop-filter blur + saturate, plus SVG feTurbulence/feDisplacementMap refraction.
 * Served from /public so LightningCSS cannot rewrite backdrop-filter to -webkit-only
 * (Chromium applies url(#filter) on unprefixed backdrop-filter only).
 */

.glass,
.surface {
  backdrop-filter: blur(3px) saturate(180%);
  -webkit-backdrop-filter: blur(3px) saturate(180%);
}

@supports (backdrop-filter: url(#pulse-liquid-glass)) {
  .glass,
  .surface {
    backdrop-filter: url(#pulse-liquid-glass) blur(3px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass,
  .surface {
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
  }
}