/* ==========================================================================
   samisee.design, LIQUID GLASS
   Modelled on Apple's Liquid Glass (macOS 26): a translucent lens, not a
   frosted panel. What makes it read as glass, and where each part lives:

     body        backdrop blur + saturation, a whisper of tint, so what's
                 behind stays visible and alive              .lg
     refraction  the backdrop bends at the rim, like light through a thick
                 edge. Chromium only (SVG displacement in backdrop-filter);
                 glass.js adds it. Safari and Firefox get everything else.
     specular    a bright 1px line along the top edge, a softer return along
                 the bottom                                  box-shadow (inset)
     lowlight    a dark inner band at the bottom: the glass has thickness
     rim         a gradient edge, brightest top left, plus a hot spot that
                 follows the pointer, the way Apple's catches motion  ::before
     bubble      a curved reflection across the top, a faint coloured bounce
                 at the bottom: what makes it look round, not flat    ::after
     lift        two shadows: a tight contact one and a soft long one

   Knobs (set on the element): --lg-r radius, --lg-blur, --lg-tint (how much
   surface colour, 0 to 100%).
   ========================================================================== */

.lg {
  --lg-r: 22px;
  --lg-blur: 16px;
  --lg-tint: 34%;
  --lg-spec: color-mix(in srgb, #fff 46%, transparent);
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-r);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--os-ink) 9%, transparent), color-mix(in srgb, var(--os-ink) 2%, transparent) 62%),
    color-mix(in srgb, var(--os-surface) var(--lg-tint), transparent);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(190%) brightness(1.06);
          backdrop-filter: blur(var(--lg-blur)) saturate(190%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 0 var(--lg-spec),
    inset 0 -1px 0 0 color-mix(in srgb, #fff 9%, transparent),
    inset 1px 0 0 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 -16px 24px -16px color-mix(in srgb, var(--shade) 50%, transparent),
    inset 0 12px 20px -14px color-mix(in srgb, #fff 16%, transparent),
    0 1px 2px color-mix(in srgb, var(--shade) 32%, transparent),
    0 14px 36px -12px color-mix(in srgb, var(--shade) 60%, transparent);
}
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(160px 160px at var(--lx, 22%) var(--ly, 0%), color-mix(in srgb, #fff 90%, transparent), transparent 70%),
    linear-gradient(150deg,
      color-mix(in srgb, #fff 50%, transparent) 0%,
      color-mix(in srgb, #fff 8%, transparent) 38%,
      color-mix(in srgb, #fff 4%, transparent) 62%,
      color-mix(in srgb, var(--os-accent) 30%, transparent) 100%);
  -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);
}
.lg::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 28% -12%, color-mix(in srgb, #fff 15%, transparent), transparent 56%),
    radial-gradient(80% 55% at 82% 118%, color-mix(in srgb, var(--os-accent) 11%, transparent), transparent 62%);
}
.lg > * { position: relative; z-index: 1; }

/* a smaller, thicker-feeling variant for icon tiles and dock items */
.lg--chip {
  --lg-r: 15px;
  --lg-blur: 10px;
  --lg-tint: 22%;
  box-shadow:
    inset 0 1px 0 0 var(--lg-spec),
    inset 0 -1px 0 0 color-mix(in srgb, #fff 10%, transparent),
    inset 0 -10px 14px -10px color-mix(in srgb, var(--shade) 50%, transparent),
    inset 0 8px 12px -9px color-mix(in srgb, #fff 20%, transparent),
    0 1px 1px color-mix(in srgb, var(--shade) 30%, transparent),
    0 8px 18px -8px color-mix(in srgb, var(--shade) 55%, transparent);
}
.lg--chip::before {
  background:
    radial-gradient(70px 70px at var(--lx, 22%) var(--ly, 0%), color-mix(in srgb, #fff 90%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, #fff 55%, transparent), color-mix(in srgb, #fff 6%, transparent) 45%, color-mix(in srgb, #fff 22%, transparent));
}

@media (prefers-reduced-transparency: reduce) {
  .lg { background: var(--os-glass-dense); -webkit-backdrop-filter: none; backdrop-filter: none; }
}