/* Liquid Glass Effect - Kinetic Edition */
.liquid-glass-card {
    position: relative;
    border-radius: 32px !important;
    overflow: hidden;
    cursor: grab;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    user-select: none;
    -webkit-user-drag: none;
    /* Remove default borders */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.liquid-glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 0, 0, 0.1);
}

.liquid-glass-card:active {
    cursor: grabbing;
}

.liquid-glass-card::before {
    /* Bend Layer (Backdrop blur with distortion) */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.liquid-glass-card::after {
    /* Face Layer (Main shadow and glow from React sm intensity) */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 24px rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.liquid-content {
    position: relative;
    z-index: 30;
    pointer-events: none;
    /* Let drag pass to card, but buttons inside should override */
}

/* Allow interaction for anchors and buttons inside liquid-content */
.liquid-content a,
.liquid-content button {
    pointer-events: auto;
}

.liquid-edge-highlight {
    /* Edge Layer (Inner highlights from React md intensity) */
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    box-shadow: none !important;
    pointer-events: none;
}