/* ==========================================================================
   Frosted glass surface — the card component
   ========================================================================== */

glass-card {
    display: block;
    position: relative;
    min-width: 0;
    background: var(--color-surface);
    backdrop-filter: blur(var(--backdrop-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(1.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    padding: var(--space-16);
    transition: background-color var(--dur-slow) var(--ease),
                border-color var(--dur-slow) var(--ease),
                box-shadow var(--dur-med) var(--ease),
                transform var(--dur-med) var(--ease);
}

glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

html[data-theme="dark"] glass-card::before {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

glass-card:hover {
    box-shadow: var(--shadow-lg);
}