/*
 * Moaclab Liquid Glass surface primitives.
 *
 * Keep refraction browser-native: translucent color + backdrop sampling +
 * inset edge light. SVG displacement is intentionally excluded because it
 * distorts clipped pseudo-elements and produces seams over image/video heroes.
 */
:root {
  --mo-glass-blur: 18px;
  --mo-glass-saturation: 145%;
  --mo-glass-dark-fill: rgba(20, 18, 15, .70);
  --mo-glass-light-fill: rgba(242, 240, 234, .64);
  --mo-glass-panel-fill: rgba(234, 231, 223, .76);
}

:root[data-theme="dark"] {
  --mo-glass-light-fill: rgba(28, 26, 22, .68);
  --mo-glass-panel-fill: rgba(28, 26, 22, .82);
}

.mo-liquid-dark,
.mo-liquid-light,
.mo-liquid-panel {
  background-clip: padding-box !important;
  backdrop-filter: blur(var(--mo-glass-blur)) saturate(var(--mo-glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--mo-glass-blur)) saturate(var(--mo-glass-saturation)) !important;
  contain: paint;
}

.mo-liquid-dark {
  background-color: var(--mo-glass-dark-fill) !important;
  border-color: rgba(255, 255, 255, .30) !important;
  color: #f2f0ea !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 1px 0 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .32),
    0 12px 32px -18px rgba(0, 0, 0, .72) !important;
}

.mo-liquid-light {
  background-color: var(--mo-glass-light-fill) !important;
  border-color: rgba(255, 255, 255, .56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    inset 1px 0 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(21, 20, 16, .14),
    0 12px 32px -20px rgba(0, 0, 0, .46) !important;
}

.mo-liquid-panel {
  background-color: var(--mo-glass-panel-fill) !important;
  border-color: rgba(255, 255, 255, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 1px 0 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(21, 20, 16, .12),
    0 42px 100px -34px rgba(0, 0, 0, .58) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mo-liquid-dark { background-color: rgba(20, 18, 15, .94) !important; }
  .mo-liquid-light { background-color: rgba(242, 240, 234, .96) !important; }
  .mo-liquid-panel { background-color: rgba(234, 231, 223, .98) !important; }
}