/* =========================================================================
   Liquid Glass — the material itself.
   Reference: Apple HIG “Materials” + Technology Overviews “Liquid Glass”.
   A glass element is assembled from three optical layers:
     1) backdrop — refraction + blur + luminosity/saturation adaptation  (::before)
     2) tint     — translucent colour, grain and an optional dimming layer (::before bg)
     3) specular — the bright rim where light catches the bevel           (::after)
   plus an outer shadow that lifts this functional layer above the content layer.
   Every knob is a custom property so one element or the whole document can be
   retuned at once.
   ========================================================================= */

:root {
  --lg-blur: 24px;
  --lg-saturation: 180%;
  --lg-brightness: 108%;
  --lg-contrast: 100%;
  --lg-refract: ;                        /* url(#…) once refraction is on */

  --lg-tint-top: rgba(255, 255, 255, .18);
  --lg-tint-bottom: rgba(255, 255, 255, .09);
  --lg-dim: rgba(0, 0, 0, 0);
  --lg-noise: none;

  --lg-radius: 28px;
  --lg-rim-w: 1.5px;
  --lg-rim-angle: 145deg;
  --lg-rim-1: rgba(255, 255, 255, .75);
  --lg-rim-2: rgba(255, 255, 255, .07);
  --lg-rim-3: rgba(255, 255, 255, .42);

  --lg-inner-blur: 20px;
  --lg-inner-color: rgba(255, 255, 255, .28);
  --lg-inner-spread: -6px;

  --lg-shadow-y: 18px;
  --lg-shadow-blur: 40px;
  --lg-shadow-color: rgba(0, 0, 0, .28);

  --lg-spec: rgba(255, 255, 255, 0);
  --lg-spec-x: 50%;
  --lg-spec-y: 0%;

  --lg-lift: 0px;
  --lg-scale: 1;
}

.lg {
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-radius);
  box-shadow:
    0 var(--lg-shadow-y) var(--lg-shadow-blur) var(--lg-shadow-color),
    0 2px 6px rgba(0, 0, 0, .12),
    inset 0 0 var(--lg-inner-blur) var(--lg-inner-spread) var(--lg-inner-color);
  transition:
    box-shadow .42s cubic-bezier(.32, 1.25, .5, 1),
    translate .42s cubic-bezier(.32, 1.25, .5, 1),
    scale .42s cubic-bezier(.32, 1.25, .5, 1);
}

/* 1 + 2 — refracted, blurred, tinted backdrop */
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturation))
    brightness(var(--lg-brightness))
    contrast(var(--lg-contrast))
    var(--lg-refract);
  -webkit-backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturation))
    brightness(var(--lg-brightness))
    contrast(var(--lg-contrast));
  background-image:
    radial-gradient(130% 100% at var(--lg-spec-x) var(--lg-spec-y), var(--lg-spec) 0%, transparent 62%),
    var(--lg-noise),
    linear-gradient(180deg, var(--lg-tint-top) 0%, var(--lg-tint-bottom) 100%),
    linear-gradient(0deg, var(--lg-dim) 0%, var(--lg-dim) 100%);
  background-size: auto, 160px 160px, auto, auto;
}

/* 3 — specular rim, drawn as a masked gradient border so its angle is tunable */
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--lg-rim-w);
  pointer-events: none;
  background:
    linear-gradient(var(--lg-rim-angle),
      var(--lg-rim-1) 0%,
      var(--lg-rim-2) 26%,
      var(--lg-rim-2) 58%,
      var(--lg-rim-3) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
}

.lg > * { position: relative; z-index: 2; }

/* --- Liquid Glass responds to touch --- */
.lg--live { cursor: pointer; translate: 0 var(--lg-lift); scale: var(--lg-scale); }
body[data-interactive="1"] .lg--live:hover { --lg-lift: -2px; --lg-spec: rgba(255, 255, 255, .18); }
body[data-interactive="1"] .lg--live:active { --lg-scale: .97; --lg-lift: 0px; transition-duration: .12s; }
.lg--live:focus-visible { outline: 2px solid rgba(120, 190, 255, .9); outline-offset: 3px; }

/* --- parity with the system accessibility settings --- */
body[data-reduce-transparency="1"] .lg::before {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  --lg-tint-top: rgba(28, 32, 42, .82);
  --lg-tint-bottom: rgba(28, 32, 42, .82);
}
body[data-appearance="light"][data-reduce-transparency="1"] .lg::before {
  --lg-tint-top: rgba(248, 250, 255, .88);
  --lg-tint-bottom: rgba(248, 250, 255, .88);
}
body[data-increase-contrast="1"] {
  --lg-rim-1: rgba(255, 255, 255, .98);
  --lg-rim-2: rgba(255, 255, 255, .3);
  --lg-rim-3: rgba(255, 255, 255, .8);
  --lg-rim-w: 2px;
}

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