/* ── Liquid glass ────────────────────────────────────────────────────────
   Vanilla port of the React "liquid-glass" component. The React in that
   snippet was packaging, not substance: the effect is a backdrop blur, an
   SVG displacement filter, a translucent tint and two inset highlights.

   Apply by adding `glass` to any box. The SVG filter it references lives
   in `_glass-filter.svg.html` and must be inlined once per page.

   COST WARNING: backdrop-filter + an SVG displacement filter is one of the
   most expensive things you can put on a page, and it re-rasterises on
   every scroll frame. Use it on a handful of deliberate boxes. It is
   disabled below 640px and under prefers-reduced-motion for that reason.
   ──────────────────────────────────────────────────────────────────────── */

.glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  /* Sits above the page ground, below the content it wraps. */
  box-shadow:
    0 6px 6px rgba(0, 0, 0, .2),
    0 0 20px rgba(0, 0, 0, .1);
  transition: transform .7s cubic-bezier(.175, .885, .32, 2.2);
}

/* Layer 1 — the refraction. Blurs and warps whatever sits behind the box. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  isolation: isolate;
  pointer-events: none;
}

/* Layer 2 — the tint, plus the two inset highlights that read as a bevelled
   glass edge. Tinted to the site's cream rather than pure white so it sits
   in the brown/pink palette instead of fighting it. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgba(242, 240, 233, .10);
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, .28),
    inset -1px -1px 1px 1px rgba(255, 255, 255, .18);
  pointer-events: none;
}

/* Content must clear both layers. */
.glass > * {
  position: relative;
  z-index: 2;
}

/* Interactive variant — the spring-scale from the original. */
.glass-interactive:hover {
  transform: scale(1.015);
}
.glass-interactive:active {
  transform: scale(.995);
}

/* ── Bail-outs ────────────────────────────────────────────────────────── */

/* No backdrop-filter support: fall back to a flat translucent panel rather
   than an untinted transparent box that would leave text unreadable. */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .glass::before { background: rgba(34, 25, 15, .55); filter: none; }
}

/* Mobile: keep the tint and bevel, drop the blur and the displacement map.
   Those two are what cost battery, and at phone size the distortion reads
   as noise rather than glass. */
@media (max-width: 640px) {
  .glass::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    background: rgba(34, 25, 15, .45);
  }
  .glass { transition: none; }
  .glass-interactive:hover,
  .glass-interactive:active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  .glass-interactive:hover,
  .glass-interactive:active { transform: none; }
}