/* ==========================================================================
   GLASS — used sparingly, so it stays special.

   Stacking order used across the page:
       background → purple geometry → glass → type → glass → background
   Glass only reads as glass when there is something behind it to blur, so
   it is always placed over a shape or over type.

   Note: backdrop-filter only sees content inside its "backdrop root". An
   ancestor with opacity < 1, filter, clip-path or mask becomes that root,
   so never fade or filter an ancestor of a glass object.
   ========================================================================== */

.glass {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .55), transparent 55%),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -18px 30px -24px rgba(106, 59, 255, .35),
    var(--glass-shadow);
}

/* Clearer glass, for objects that sit over type: you should still see
   the letters behind it, just out of focus */
.glass--clear {
  background:
    radial-gradient(110% 80% at 18% 4%, rgba(255, 255, 255, .5), transparent 50%),
    linear-gradient(150deg, rgba(255, 255, 255, .32), rgba(236, 230, 255, .12));
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}

/* Glass over purple */
.glass--dark {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .22), transparent 55%),
    var(--glass-fill-dark);
  border-color: var(--glass-edge-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 30px 70px -34px rgba(8, 2, 30, .7);
  color: var(--on-dark);
}

/* Browsers without backdrop-filter: a denser, still-soft fill */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(248, 246, 255, .9); }
  .glass--dark { background: rgba(69, 32, 196, .85); }
}