/* ============================================
   LIQUID GLASS THEME
   Using SVG filters for real refraction/distortion
   Requires #liquid-prism-subtle filter in HTML
   ============================================ */

:root {
    --glass-radius: 34px;
}

/* ============================================
   LIQUID GLASS
   Chromatic aberration with light distortion
   ============================================ */

.glass {
    backdrop-filter: url(#liquid-prism-subtle);
    -webkit-backdrop-filter: url(#liquid-prism-subtle);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--glass-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.glass:hover:not(.navbar):not(.contact-bar) {
    transform: scale(1.01);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

/* ============================================
   NAVBAR OVERRIDE
   ============================================ */

.navbar.glass {
    background: rgba(255, 255, 255, 0.15);
}

.navbar.glass:hover {
    transform: translateX(-50%) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

/* ============================================
   CONTACT BAR OVERRIDE
   ============================================ */

.contact-bar.glass:hover {
    transform: translateY(-50%) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

/* ============================================
   BUTTON GLASS VARIANT
   ============================================ */

.btn-primary.glass {
    background: rgba(74, 155, 148, 0.35);
    backdrop-filter: url(#liquid-prism-subtle);
    -webkit-backdrop-filter: url(#liquid-prism-subtle);
    border: 2px solid rgba(255, 255, 255, 0.5);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-primary.glass:hover {
    background: rgba(74, 155, 148, 0.45);
    border-color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   FALLBACK for browsers without SVG filters
   ============================================ */

@supports not (backdrop-filter: url(#liquid-prism-subtle)) {
    .glass,
    .navbar.glass {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.85);
    }
    
    .btn-primary.glass {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(74, 155, 148, 0.85);
    }
}

/* ============================================
   MOBILE: Disable distortion for performance
   Use simple blur instead
   ============================================ */

@media (max-width: 768px) {
    .glass,
    .navbar.glass,
    .btn-primary.glass {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}