:root {
    --hover-transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, color 180ms ease;
    --hover-shadow: 0 5px 10px rgb(145 145 145 / 0.5);
}

@media (prefers-color-scheme: dark) {
    :root {
        --hover-shadow: 0 4px 8px rgb(94 94 94 / 0.5);
    }
}

.glass {
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    background: linear-gradient(
        135deg,
        rgb(225 225 225 / 0.34),
        rgb(204 204 204 / 0.12)
    );
    border: 1px solid rgb(255 255 255 / 0.35);
    box-shadow: inset 0 -1px 1px rgb(221 221 221 / 0.12),
    0 5px 10px rgb(0 0 0 / 0.2);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-user-select: none;
    user-select: none;
}

.dark .glass {
    text-shadow: 0 1px 2px rgb(85 85 85 / 0.35);
    background: linear-gradient(
        135deg,
        rgb(70 72 78 / 0.34),
        rgb(58 61 67 / 0.22)
    );
    border: 1px solid rgb(148 163 184 / 0.15);
    box-shadow: inset 0 1px 1px rgb(138 138 138 / 0.1);
}

:is(.buttonhover) {
    transition: var(--hover-transition);
    transform: translateZ(0);
    backface-visibility: hidden;
}

:is(.buttonhover):is(:hover, :focus, :active) {
    box-shadow: var(--hover-shadow);
    filter: brightness(1.15);
}

:is(.buttonhover):is(:hover, :focus-visible):not(:active) {
    animation: button-bump 220ms ease-out both;
}

:is(.buttonhover):focus-visible {
    outline: 2px solid rgb(165 165 165 / 0.7);
    outline-offset: 2px;
}

:is(.buttonhover):active {
    transform: translateY(1px) translateZ(0);
    box-shadow: inset 0 2px 5px 0 rgb(0 0 0 / 0.5);
    filter: brightness(1.05);
}

@keyframes button-bump {
    0% {
        transform: translateY(0) scale(1) translateZ(0);
    }

    55% {
        transform: translateY(-3px) scale(1.035) translateZ(0);
    }

    100% {
        transform: translateY(-1px) scale(1.015) translateZ(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.buttonhover):is(:hover, :focus-visible):not(:active) {
        animation: none;
    }
}