/* MFC Glass. Sharp corners. No stroke. No shadow. */
:root {
  --glass-bg: rgba(238, 241, 246, .62);
  --glass-tint: rgba(1, 30, 83, .62);
  --glass-tint-hover: rgba(1, 30, 83, .78);
  --glass-light: rgba(255, 255, 255, .28);
}
[data-theme="dark"] {
  --glass-bg: rgba(38, 40, 46, .68);
  --glass-tint: rgba(255, 255, 255, .66);
  --glass-tint-hover: rgba(255, 255, 255, .82);
  --glass-light: rgba(255, 255, 255, .12);
}
.glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--glass-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: background .5s cubic-bezier(.22, .61, .36, 1);
}
.glass.tint { background: var(--glass-tint); }
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1);
  background: radial-gradient(140px 70px at var(--mx, 50%) var(--my, 0%), var(--glass-light), transparent 70%);
}
.glass:hover::after { opacity: 1; }
a.glass.tint:hover, button.glass.tint:hover, .glass.tint.is-hover { background: var(--glass-tint-hover); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
  .glass.tint { background: var(--accent); }
}

// The light on the glass follows the pointer.
document.querySelectorAll('.glass').forEach(function (el) {
  el.addEventListener('pointermove', function (e) {
    var box = el.getBoundingClientRect();
    el.style.setProperty('--mx', (e.clientX - box.left) + 'px');
    el.style.setProperty('--my', (e.clientY - box.top) + 'px');
  });
});