/* =========================================
   EFFECT: GLASS & BORDERS (High Translucency)
   ========================================= */

/* 1. Disable Fog completely */
section::before,
.hero::before {
    display: none !important;
}

/* 2. Sharp Dividers */
section,
.hero {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Global Glass Class (Applied to Cards & Nav) */
.skill-card,
.portfolio-item,
.contact-card,
.card,
.modal-card,
.top-app-bar,
.navigation-bar,
.sidebar-card,
.dropdown-card {
    /* Highly transparent background for the glass effect */
    background-color: rgba(18, 18, 18, 0.45) !important;

    /* Strong Blur */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* Crisp Borders */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    /* Inner Glow for depth */
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.03),
        0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Light Mode Specifics */
body[data-theme='light'] .skill-card,
body[data-theme='light'] .portfolio-item,
body[data-theme='light'] .contact-card,
body[data-theme='light'] .top-app-bar,
body[data-theme='light'] .navigation-bar {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.1) !important;
}