/* ==========================================================================
   JJB Calibrated - glass material

   The material has four parts, and it needs all four to read as glass:
     1. a translucent, blurred, saturated backdrop
     2. a gradient hairline edge that is bright at the light source and
        fades away from it (the specular rim)
     3. an inner top highlight and an inner bottom shade (thickness)
     4. a cast shadow onto whatever is behind it (separation)

   Glass with nothing luminous behind it just looks like a grey box, so
   every glass surface must sit over the ambient layer in site.css.
   ========================================================================== */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background-image: linear-gradient(
    160deg,
    var(--glass-fill-top) 0%,
    var(--glass-fill-bottom) 55%,
    var(--glass-fill-top) 100%
  );
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 0 var(--glass-inset-top),
    inset 0 -1px 0 0 var(--glass-inset-bottom),
    var(--glass-cast);
}

/* content must ride above the pseudo-element edges */
.glass > * {
  position: relative;
  z-index: 1;
}

/* the specular rim: a 1px gradient border, punched through with a mask */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: linear-gradient(
    145deg,
    var(--glass-edge-light) 0%,
    var(--glass-edge-mid) 38%,
    var(--glass-edge-mid) 62%,
    var(--glass-edge-tint) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* the sheen: a soft light wash falling from the top-left corner */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: radial-gradient(
    120% 90% at 8% -10%,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
}

.on-light .glass::after {
  background-image: radial-gradient(
    120% 90% at 8% -10%,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}

/* ---- variants --------------------------------------------------------- */

.glass--quiet {
  --glass-blur: 18px;
  --glass-cast: 0 12px 34px -18px rgba(0, 0, 0, 0.6);
}

.glass--panel {
  --glass-blur: 34px;
  border-radius: var(--r-xl);
}

.glass--pill {
  border-radius: var(--r-pill);
  --glass-blur: 20px;
}

/* an interactive glass surface lifts and its rim brightens */
.glass--interactive {
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.glass--interactive:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 0 var(--glass-inset-top),
    inset 0 -1px 0 0 var(--glass-inset-bottom),
    0 34px 80px -26px rgba(0, 0, 0, 0.9);
}

.glass--interactive::before {
  transition: opacity var(--dur) var(--ease-out);
}

.glass--interactive:hover::before {
  opacity: 1;
  background-image: linear-gradient(
    145deg,
    var(--glass-edge-light) 0%,
    var(--glass-edge-mid) 30%,
    var(--glass-edge-tint) 70%,
    var(--signal) 100%
  );
}

/* ---- fallback: no backdrop-filter ------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background-color: rgba(14, 33, 24, 0.88);
  }
  .on-light .glass {
    background-color: rgba(255, 255, 255, 0.94);
  }
}

/* Backdrop blur is expensive. On small screens, thin it out rather than
   dropping it, so the material still reads but scrolling stays smooth. */
@media (max-width: 640px) {
  :root {
    --glass-blur: 16px;
  }
  .glass--panel {
    --glass-blur: 20px;
  }
}