/*!
 * 大冷总管本地液态玻璃样式
 * Derived from:
 * - https://github.com/kevinbism/liquid-glass-effect (MIT)
 * - https://github.com/techlxrd/LiquidStyle (MIT)
 * Adapted for the public web pages in this project.
 */

.liquid-glass {
    --lg-tilt-x: 0deg;
    --lg-tilt-y: 0deg;
    --lg-shift-x: 0px;
    --lg-shift-y: 0px;
    --lg-pad: 4px;
    --lg-scale: 1;
    --lg-lift: 0px;
    --lg-bg-alpha: 0.045;
    --lg-border-alpha: 0.14;
    --lg-shadow-alpha: 0;
    --lg-gradient-opacity: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, var(--lg-border-alpha));
    background: rgba(255, 255, 255, var(--lg-bg-alpha));
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    backdrop-filter: blur(8px) saturate(135%);
    transform: perspective(800px) translateY(var(--lg-lift)) rotateX(var(--lg-tilt-x)) rotateY(var(--lg-tilt-y)) scale(var(--lg-scale)) translate3d(0, 0, 0);
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        -webkit-backdrop-filter 220ms ease,
        backdrop-filter 220ms ease;
    will-change: transform, backdrop-filter, box-shadow;
}

@supports ((-webkit-backdrop-filter: url(#dlg-liquid-glass-filter) blur(1px)) or (backdrop-filter: url(#dlg-liquid-glass-filter) blur(1px))) {
    .liquid-glass {
        -webkit-backdrop-filter: url(#dlg-liquid-glass-filter) blur(8px) saturate(135%);
        backdrop-filter: url(#dlg-liquid-glass-filter) blur(8px) saturate(135%);
    }
}

.liquid-glass::before {
    content: '';
    position: absolute;
    inset: var(--lg-pad);
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.02) 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%);
    opacity: var(--lg-gradient-opacity);
    transform: translate3d(var(--lg-shift-x), var(--lg-shift-y), 0);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.liquid-glass::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0.52;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.liquid-glass > * {
    position: relative;
    z-index: 1;
}

.liquid-glass--interactive {
    cursor: default;
}

.liquid-glass--interactive:hover,
.liquid-glass--interactive.is-liquid-active {
    --lg-scale: 1.018;
    --lg-lift: -2px;
    --lg-bg-alpha: 0.1;
    --lg-border-alpha: 0.3;
    --lg-shadow-alpha: 0.16;
    --lg-gradient-opacity: 0.88;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 26px 56px rgba(1, 40, 111, var(--lg-shadow-alpha));
    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.02);
    backdrop-filter: blur(16px) saturate(180%) brightness(1.02);
}

.liquid-glass--interactive:hover::before,
.liquid-glass--interactive.is-liquid-active::before {
    opacity: 0.9;
}

.liquid-glass--interactive:hover::after,
.liquid-glass--interactive.is-liquid-active::after {
    opacity: 0.95;
}

@supports ((-webkit-backdrop-filter: url(#dlg-liquid-glass-filter) blur(1px)) or (backdrop-filter: url(#dlg-liquid-glass-filter) blur(1px))) {
    .liquid-glass--interactive:hover,
    .liquid-glass--interactive.is-liquid-active {
        -webkit-backdrop-filter: url(#dlg-liquid-glass-filter) blur(16px) saturate(180%) brightness(1.02);
        backdrop-filter: url(#dlg-liquid-glass-filter) blur(16px) saturate(180%) brightness(1.02);
    }
}

.liquid-glass--strong {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.liquid-glass--soft {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.14);
}

.liquid-glass--dark {
    background: rgba(7, 23, 64, 0.16);
    border-color: rgba(191, 239, 255, 0.18);
}

.liquid-glass--button {
    box-shadow: none;
}

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