/* ==========================================================================
   HKEMS-STMO · Acrylic / frosted glass layer
   A single material with three densities. Every surface that floats above
   the canvas uses one of these classes instead of a flat background.
   ========================================================================== */

.glass,
.glass--strong,
.glass--soft {
  position: relative;
  isolation: isolate;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 0 color-mix(in srgb, var(--glass-highlight) 60%, transparent),
    inset 0 -1px 0 0 color-mix(in srgb, var(--md-shadow) 12%, transparent);
}

.glass--strong {
  background-color: var(--glass-bg-strong);
}

.glass--soft {
  background-color: var(--glass-bg-soft);
  border-color: var(--glass-border-soft);
}

/* fine acrylic grain — keeps large blur panes from looking like plastic */
.glass::after,
.glass--strong::after,
.glass--soft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* tinted glass for callouts */
.glass-tinted {
  background-color: color-mix(in srgb, var(--md-primary) 14%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--md-primary) 26%, var(--glass-border));
}

.glass-warm {
  background-color: color-mix(in srgb, var(--md-tertiary) 12%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--md-tertiary) 24%, var(--glass-border));
}

/* browsers without backdrop-filter get an opaque, still translucent-looking
   surface: readable, never unreadable text over the page background */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass--strong,
  .glass--soft {
    background-color: color-mix(in srgb, var(--md-surface-container) 92%, transparent);
    border-color: var(--md-outline-variant);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass--strong,
  .glass--soft {
    background-color: var(--md-surface-container);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* on small screens the blur radius is expensive; trim it */
@media (max-width: 640px) {
  :root {
    --glass-blur: 16px;
  }
}