/* --- Smart Navbar Styles --- */
.header {
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, padding 0.4s ease !important;
}

/* القائمة مخفية عند التمرير للأسفل */
.header.header-hidden {
    transform: translateY(-100%);
}

/* القائمة في أعلى الصفحة (شفافة) */
.header.at-top {
    background: transparent !important;
    border-bottom-color: transparent !important;
    padding: 3rem 10% !important;
}

/* القائمة أثناء التمرير (زجاجية متطورة) */
.header.sticky {
    background: rgba(10, 10, 10, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--primary-glow) !important;
    padding: 1.5rem 10% !important;
}

/* مؤشر القسم النشط في القائمة */
.navbar a {
    position: relative;
}

.navbar a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
    transition: width 0.3s ease;
}

.navbar a.active::after {
    width: 100%;
}