/* liquid-glass — core stylesheet (MIT) */
/* Adapted for vanilla HTML/CSS/JS use */

@property --lg-sheen-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}

@property --lg-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.58;
}

:root {
  --lg-filter:          url("#liquid-glass-filter");
  --lg-blur:            8px;
  --lg-saturate:        180%;
  --lg-opacity:         0.58;
  --lg-radius:          24px;
  --lg-border-opacity:  0.45;
  --lg-tint:            255 255 255;
  --lg-shadow:          0 22px 70px rgb(0 0 0 / 0.24);
  --lg-edge-red:        rgb(255 86 116 / 0.42);
  --lg-edge-cyan:       rgb(54 226 255 / 0.38);
}

.liquid-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--lg-radius);
  background: linear-gradient(
    var(--lg-sheen-angle),
    rgb(var(--lg-tint) / 0.38),
    rgb(var(--lg-tint) / 0.12) 38%,
    rgb(var(--lg-tint) / 0.2)
  );
  border: 1px solid rgb(255 255 255 / var(--lg-border-opacity));
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgb(255 255 255 / 0.42);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

.liquid-glass::before,
.liquid-glass::after {
  position: absolute;
  pointer-events: none;
  content: "";
  inset: 0;
  border-radius: inherit;
}

.liquid-glass::before {
  z-index: -1;
  background: rgb(var(--lg-tint) / var(--lg-opacity));
}

.liquid-glass::after {
  z-index: 3;
  box-shadow:
    inset  1px 0 var(--lg-edge-red),
    inset -1px 0 var(--lg-edge-cyan),
    inset  0  1px rgb(255 255 255 / 0.52),
    inset  0 -18px 32px rgb(255 255 255 / 0.08);
  mix-blend-mode: screen;
}

.liquid-glass__content {
  position: relative;
  z-index: 2;
}

.liquid-glass__refraction {
  position: absolute;
  z-index: -2;
  inset: -36px;
  background: var(--lg-scene-background, transparent);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  filter: var(--lg-filter);
  opacity: 0.82;
  transform: scale(1.035);
}

@supports (backdrop-filter: url("#liquid-glass-filter")) or (-webkit-backdrop-filter: url("#liquid-glass-filter")) {
  .liquid-glass:not(.liquid-glass--simple) {
    -webkit-backdrop-filter: var(--lg-filter) blur(var(--lg-blur)) saturate(var(--lg-saturate));
            backdrop-filter: var(--lg-filter) blur(var(--lg-blur)) saturate(var(--lg-saturate));
  }
  .liquid-glass:not(.liquid-glass--simple) .liquid-glass__refraction {
    display: none;
  }
}

.liquid-glass--simple {
  filter: var(--lg-filter);
}

.liquid-glass--subtle {
  --lg-border-opacity: 0.32;
}

.liquid-glass--vivid {
  --lg-border-opacity: 0.56;
}

.liquid-glass--vision {
  --lg-radius:         32px;
  --lg-shadow:         0 30px 90px rgb(0 0 0 / 0.3);
}

.liquid-glass--static {
  animation: none;
}

@keyframes lg-opacity-pulse {
  0%, 100% { --lg-opacity: calc(var(--lg-opacity-base, 0.58) - var(--lg-pulse-amplitude, 0.18)); }
  50%      { --lg-opacity: calc(var(--lg-opacity-base, 0.58) + var(--lg-pulse-amplitude, 0.18)); }
}

.liquid-glass--pulse-subtle,
.liquid-glass--pulse-vivid {
  --lg-opacity-base: var(--lg-opacity);
  animation: lg-opacity-pulse var(--lg-pulse-duration, 6s) ease-in-out infinite;
}

.liquid-glass--pulse-subtle {
  --lg-pulse-amplitude: 0.1;
  --lg-pulse-duration:  8s;
}

.liquid-glass--pulse-vivid {
  --lg-pulse-amplitude: 0.24;
  --lg-pulse-duration:  4s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass {
    background: rgb(var(--lg-tint) / 0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-glass,
  .liquid-glass *,
  .liquid-glass-filter-root * {
    animation: none !important;
  }
}