/* React Bits GlassSurface (JS-CSS) adapted for contact copy buttons. */
.glass-surface {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    transition: opacity 0.26s ease-out, transform 0.3s ease, background 0.3s ease;
}

.glass-surface__filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
}

.glass-surface--svg {
    background: hsl(0 0% 100% / var(--glass-frost, 0.08));
    backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
    -webkit-backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
    box-shadow:
        0 0 2px 1px rgb(255 255 255 / 35%) inset,
        0 0 10px 4px rgb(255 255 255 / 15%) inset,
        0 8px 24px rgb(17 17 26 / 12%);
}

.glass-surface--fallback {
    background: rgb(255 255 255 / 12%);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid rgb(255 255 255 / 22%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 22%),
        inset 0 -1px 0 rgb(255 255 255 / 10%),
        0 8px 24px rgb(0 0 0 / 16%);
}

.glass-surface:focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

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