/*
 * Glass Morphism Styles - Centralized for All Portals
 * Thick Glass Tile Effect
 *
 * To modify the glass effect across all portals, update these CSS variables
 */

:root {
    /* Thick Glass Tile Base Styles */
    --glass-background: rgba(20, 20, 20, 0.60);
    --glass-background-hover: rgba(30, 30, 30, 0.70);
    --glass-border-radius: 20px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.08), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
    --glass-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    --glass-blur: blur(30px) saturate(180%);
    --glass-border: 2px solid rgba(255, 255, 255, 0.15);
    --glass-border-hover: 2px solid rgba(255, 255, 255, 0.25);
}

/* Glass Panel Utility Class */
.glass-panel {
    background: var(--glass-background);
    border-radius: var(--glass-border-radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
    background: var(--glass-background-hover);
    box-shadow: var(--glass-shadow-hover);
    border: var(--glass-border-hover);
    transform: translateY(-2px);
}

/* Mixin for applying glass morphism to existing classes */
.glass-effect {
    background: var(--glass-background) !important;
    border-radius: var(--glass-border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
}

.glass-effect:hover {
    background: var(--glass-background-hover) !important;
    box-shadow: var(--glass-shadow-hover) !important;
    border: var(--glass-border-hover) !important;
}