/* Liquid glass buttons — scaffolding for tests/glass.html.

   Glass has nothing of its own to show; it only shows what is behind it. So each
   option sits on its own bed — a photograph or a flat brand colour — and every
   effect is built from backdrop-filter plus layered highlights, never from a
   baked-in gradient that would look wrong the moment the ground changed. */

/* ── Demo beds ──────────────────────────────────────────────────────────── */

.gdemo { display: grid; gap: var(--s-6); }

.gdemo__bed {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-20) var(--s-12);
  border-radius: var(--r-lg, 20px);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* Unsplash placeholders standing in for Whisper photography */
.gdemo__bed[data-bed="1"],
.gdemo__bed[data-bed="photo"] { background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1600&q=70&auto=format&fit=crop"); }
.gdemo__bed[data-bed="3"] { background-image: url("https://images.unsplash.com/photo-1509062522246-3755977927d7?w=1600&q=70&auto=format&fit=crop"); }
.gdemo__bed[data-bed="5"] { background-image: url("https://images.unsplash.com/photo-1543269865-cbf427effbad?w=1600&q=70&auto=format&fit=crop"); }
.gdemo__bed[data-bed="2"] { background: linear-gradient(120deg, #0064F3, #002E8D 62%, #071450); }
.gdemo__bed[data-bed="4"] { background: linear-gradient(120deg, #FF4D00, #FF7A00 70%, #FFE600); }
.gdemo__bed[data-bed="orange"] { background: #FF4D00; background-image: none; }
.gdemo__bed[data-bed="blue"] { background: #0064F3; background-image: none; }
.gdemo__bed[data-bed="dark"] { background: #130F0C; background-image: none; }

.gdemo__bed--all { gap: var(--s-4); }

.gswitch { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gswitch__btn {
  font: inherit;
  font-size: var(--t-caption);
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: none;
  color: var(--fg-60);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.gswitch__btn:hover { color: var(--fg); }
.gswitch__btn.is-on { color: var(--fg); border-color: var(--fg); }

/* ── Shared button shell ────────────────────────────────────────────────── */

.gbtn {
  --gh: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gh);
  padding: 0 var(--s-8);
  border-radius: 999px;
  font-size: var(--t-body);
  line-height: 24px;
  color: #FFFFFF;
  /* the label has to survive on light photography too, hence the shadow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gbtn--sm { --gh: 44px; padding: 0 var(--s-6); font-size: var(--t-caption); }

/* ── 01 · plain refraction ──────────────────────────────────────────────── */

.gbtn--refract {
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 8px 24px -10px rgba(0, 0, 0, .45);
  transition: backdrop-filter .3s var(--ease), background-color .3s var(--ease);
}
.gbtn--refract:hover {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ── 02 · lensed pill ───────────────────────────────────────────────────── */

.gbtn--lens {
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(16px) saturate(150%) brightness(108%);
  -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%);
  border: 1px solid rgba(255, 255, 255, .22);
  /* the stacked insets are the glass's thickness: bright at the top edge where
     light enters, dark at the bottom where it exits, plus a faint inner ring */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 0 -1.5px 0 rgba(0, 0, 0, .22),
    inset 0 0 0 4px rgba(255, 255, 255, .06),
    0 10px 30px -12px rgba(0, 0, 0, .5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* the edges of a convex lens bend more light than its middle */
.gbtn--lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 50%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.16) 82%,
    rgba(255,255,255,.34) 100%);
  pointer-events: none;
  z-index: -1;
}
.gbtn--lens:hover { transform: translateY(-1px); }

/* ── 03 · specular sweep ────────────────────────────────────────────────── */

.gbtn--sweep {
  --mx: 50%;
  background: rgba(255, 255, 255, .11);
  backdrop-filter: blur(15px) saturate(155%);
  -webkit-backdrop-filter: blur(15px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 8px 26px -10px rgba(0, 0, 0, .45);
}
.gbtn--sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 160% at var(--mx) -10%,
    rgba(255,255,255,.5) 0%,
    rgba(255,255,255,.12) 45%,
    rgba(255,255,255,0) 70%);
  pointer-events: none;
  transition: opacity .3s var(--ease);
  opacity: .8;
}
.gbtn--sweep:hover::after { opacity: 1; }

/* ── 04 · squish on press ───────────────────────────────────────────────── */

.gbtn--squish {
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 8px 24px -10px rgba(0, 0, 0, .45);
  /* overshoot on release is what makes it read as a soft body, not a rectangle */
  transition: transform .45s cubic-bezier(.2, 1.5, .35, 1);
}
.gbtn--squish:hover { transform: scale(1.03); }
.gbtn--squish:active { transform: scale(.94, .88); transition-duration: .09s; }

/* ── 05 · frosted slab with drip ────────────────────────────────────────── */

.gbtn--frost {
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(26px) saturate(130%) brightness(104%);
  -webkit-backdrop-filter: blur(26px) saturate(130%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, .3);
  /* the doubled bottom inset is the thick lip where the glass pools */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -6px 10px -6px rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 12px 32px -12px rgba(0, 0, 0, .5);
}
/* a bead of light that slides down the rim on hover */
.gbtn--frost::after {
  content: "";
  position: absolute;
  left: 12%;
  top: -60%;
  width: 26%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0));
  pointer-events: none;
  opacity: 0;
  transition: transform .7s var(--ease), opacity .3s var(--ease);
}
.gbtn--frost:hover::after { opacity: 1; transform: translateY(150%); }

@media (prefers-reduced-motion: reduce) {
  .gbtn, .gbtn::after { transition: none !important; }
  .gbtn--squish:hover, .gbtn--squish:active, .gbtn--lens:hover { transform: none; }
  .gbtn--frost:hover::after { transform: none; }
}

/* Where backdrop-filter is unsupported the glass would read as a flat wash, so
   the fallback is an honest solid pill instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gbtn { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .4); }
}