/*
 * Liquid glass — one material, three finishes, two shapes.
 *
 *   .glass             material base: rim, drop shadow, pointer light, states
 *   .glass-btn         pill button (+ .glass-btn--round for the icon button)
 *   .glass-card        panel
 *
 *   .glass--frost      A · CSS only: backdrop blur + rim light. Every browser.
 *   .glass--clear      B · real refraction through an SVG filter (Hyalite), clear centre
 *   .glass--frosted    C · the same refraction with a frosted centre
 *
 * B and C bend the backdrop in Chromium only (Chrome, Edge, Android). Elsewhere
 * (Safari, Firefox, every iPhone browser) they get the mirror lens when the
 * background is an image (see the end of file), else the var() fallbacks keep B
 * clear with a painted bevel and C frosted.
 *
 * Frost (blur) per finish lives in the --glass-blur-* properties below. Override
 * them on any ancestor, or --glass-blur on a single element; glass.js hands the
 * value to Hyalite, so Chromium and Safari always show the same amount.
 *
 * Never put filter, opacity < 1 or mask on an ancestor of a glass element, and
 * don't nest glass in glass: the ancestor becomes a backdrop root and the glass
 * stops seeing the page behind it.
 */

:root {
  --glass-blur-a: 12px;
  --glass-blur-b: 2px;
  --glass-blur-c: 12px;
}

.glass {
  --glass-rim:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 -1px 1px rgb(255 255 255 / 0.12);
  /* A painted stand-in for a thick, bent edge where nothing can bend */
  --glass-bevel:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 0 10px rgb(255 255 255 / 0.16),
    inset 0 -8px 14px -10px rgb(0 0 0 / 0.35);
  --glass-drop: 0 10px 30px -10px rgb(0 0 0 / 0.45);
  --glass-frost: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06));
  --glass-light: 90px;

  position: relative;
  background-color: transparent; /* <button> would bring the UA's light grey */
  color: var(--monki-offwhite);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.25);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.3),
    box-shadow 0.35s,
    background-color 0.2s;
}

/* Light that follows the pointer; glass.js writes --glass-x / --glass-y */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle var(--glass-light) at var(--glass-x, 50%) var(--glass-y, 0%),
    rgb(255 255 255 / 0.22),
    rgb(255 255 255 / 0)
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

@media (hover: hover) {
  .glass:hover::after {
    opacity: 1;
  }

  .glass:is(a, button):hover {
    --glass-drop: 0 16px 36px -12px rgb(0 0 0 / 0.5);
    transform: translateY(-2px);
  }
}

.glass:is(a, button):active {
  scale: 0.97;
}

.glass:focus-visible {
  outline: 2px solid var(--monki-offwhite);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .glass {
    transition: none;
  }

  .glass:is(a, button):hover {
    transform: none;
  }
}

/* Shapes ------------------------------------------------------------------- */

.glass-btn {
  --glass-h: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: var(--glass-h);
  padding: 0 1.6em;
  border: 0;
  border-radius: 999px;
  font: 500 1rem/1 var(--font);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.glass-btn--round {
  width: var(--glass-h);
  padding: 0;
}

.glass-btn svg {
  width: 20px;
  height: 20px;
}

.glass-card {
  --glass-light: 240px;

  display: block;
  padding: 24px 28px 28px;
  border-radius: 28px;
}

/* A · Frost ---------------------------------------------------------------- */

.glass--frost {
  --glass-blur: var(--glass-blur-a);

  background-image: var(--glass-frost);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  box-shadow: var(--glass-rim), var(--glass-drop);
}

@media (hover: hover) {
  .glass--frost:hover {
    background-color: rgb(255 255 255 / 0.08);
  }
}

/* Light catching the rim, bright top-left and bottom-right like Apple's glass.
   B and C draw their own rim where Hyalite bends the backdrop. */
.glass--frost::before,
html:not(.has-hyalite) :is(.glass--clear, .glass--frosted)::before,
.glass.has-mirror::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.75),
    rgb(255 255 255 / 0) 35% 65%,
    rgb(255 255 255 / 0.4)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

/* B · Clear refraction / C · Frosted refraction ------------------------------ */

/* Hyalite writes --hyalite (the refraction filter) and --hyalite-edge (a sharp
   rim) onto each attached element. Tint sits above the refraction, never in it. */
.glass--clear,
.glass--frosted {
  box-shadow: var(--hyalite-edge, var(--glass-rim)), var(--glass-drop);
}

.glass--clear {
  --glass-blur: var(--glass-blur-b);
  --glass-tint: rgb(255 255 255 / 0.06);

  background-color: var(--glass-tint);
  -webkit-backdrop-filter: var(--hyalite, blur(var(--glass-blur)) saturate(160%));
  backdrop-filter: var(--hyalite, blur(var(--glass-blur)) saturate(160%));
}

.glass--frosted {
  --glass-blur: var(--glass-blur-c);
  --glass-tint: rgb(255 255 255 / 0.14);

  background-color: var(--glass-tint);
  -webkit-backdrop-filter: var(--hyalite, blur(var(--glass-blur)) saturate(150%));
  backdrop-filter: var(--hyalite, blur(var(--glass-blur)) saturate(150%));
}

/* Where nothing bends the backdrop, B stays clear (little blur, painted bevel)
   and C stays frosted */
html:not(.has-hyalite) .glass--clear {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.02));
  box-shadow: var(--glass-bevel), var(--glass-drop);
}

html:not(.has-hyalite) .glass--frosted {
  background-image: var(--glass-frost);
}

@media (hover: hover) {
  .glass--clear:is(a, button):hover {
    background-color: rgb(255 255 255 / 0.12);
  }

  .glass--frosted:is(a, button):hover {
    background-color: rgb(255 255 255 / 0.2);
  }
}

/* Mirror lens (experiment) -----------------------------------------------------
   WebKit can't bend the backdrop (bug 245510) but can filter an element itself.
   With a known background image, glass.js gives each B/C element a copy of that
   image lined up with the page: .glass__mirror-img carries the copy and the
   frost (oversized, so the blur has real pixels at the edge), .glass__mirror
   bends it with Hyalite, .glass__glaze lays tint and bevel on top, unbent. */

html .glass.has-mirror {
  isolation: isolate;
  overflow: hidden; /* the lens filter fills its whole box; this rounds the corners again */
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--glass-drop);
}

.glass__mirror,
.glass__glaze {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.glass__mirror {
  filter: var(--hyalite, none);
}

.glass__mirror-img {
  position: absolute;
  inset: calc(var(--glass-blur) * -2);
  background-repeat: no-repeat;
  filter: blur(var(--glass-blur)) saturate(150%);
}

.glass__glaze {
  background-color: var(--glass-tint);
  box-shadow: var(--glass-bevel);
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .has-mirror:is(a, button):hover .glass__glaze {
    background-color: rgb(255 255 255 / 0.2);
  }
}