:root { 
    --cursor-size: 10px; 
    --follower-size: 30px; 
}

/* تصفير شامل لمنع الفوارق وضمان سلاسة التمرير */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body { 
    height: 100%; 
    width: 100%; 
    overscroll-behavior: none; /* منع الارتداد المزعج في المتصفحات */
}

html { 
    overflow-y: scroll; 
    scroll-behavior: smooth;
}

/* تحسين أداء العناصر المتحركة باستخدام تسريع العتاد (Hardware Acceleration) */
.page, .reveal, #custom-cursor, #cursor-follower, #modal-container {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* إخفاء الماوس الافتراضي */
@media (hover: hover) and (pointer: fine) {
    body { cursor: none !important; }
    a, button, input, textarea, [role="button"], .cursor-pointer { cursor: none !important; }
}

/* مؤشر الماوس المخصص - تحسين السلاسة */
#custom-cursor, #cursor-follower {
    position: fixed; 
    top: 0; 
    left: 0; 
    pointer-events: none; 
    z-index: 10000;
    transform: translate(-50%, -50%); 
    display: none;
    transition: transform 0.1s ease-out, opacity 0.3s ease; /* انسيابية الحركة */
}

#custom-cursor { 
    width: var(--cursor-size); 
    height: var(--cursor-size); 
    background: #BCCEDC; 
    border-radius: 50%; 
    mix-blend-mode: difference; 
}

#cursor-follower { 
    width: var(--follower-size); 
    height: var(--follower-size); 
    border: 1px solid #DCCEB4; 
    border-radius: 50%; 
    z-index: 9999;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1); /* حركة متابعة ناعمة */
}

/* حل مشكلة المسافة الفارغة وضمان انتقال سلس بين الصفحات */
.page {
    display: none; 
    opacity: 0; 
    width: 100%;
    padding-top: 80px; 
    min-height: 100vh;
    /* إضافة انتقال CSS بسيط ليكون مكملاً لـ GSAP */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page.active { 
    display: block; 
    opacity: 1; 
}

/* الناف بار الشفاف مع تنعيم الحركة */
.transparent-nav { 
    background: transparent; 
    backdrop-filter: blur(12px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scrolled-nav {
    background: rgba(23, 25, 26, 0.75) !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
}

.light .scrolled-nav {
    background: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-link { 
    position: relative; 
    padding-bottom: 4px; 
    transition: color 0.4s ease; 
}

.nav-link::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 2px; 
    background: #BCCEDC; 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

.nav-link:hover::after, .nav-link.active::after { 
    width: 100%; 
}

.nav-link.active { 
    color: #BCCEDC !important; 
}

/* المودال - تحسين سلاسة الظهور والإغلاق */
#main-modal {
    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.8);
    z-index: 200;
    display: none; 
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-modal.active {
    display: flex;
    opacity: 1;
}

#modal-container {
    transform: translateY(20px) scale(0.98);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* تأثير ارتداد بسيط فخم */
}

#main-modal.active #modal-container {
    transform: translateY(0) scale(1);
}

.slider-img { 
    transition: opacity 0.6s ease-in-out, transform 0.8s ease; 
}

/* عناصر الكشف - تقليل القفزة لزيادة السلاسة */
.reveal { 
    opacity: 0; 
    transform: translateY(8px); /* مسافة أقل لتقليل الإزاحة المفاجئة */
}

/* المنيو الجوال */
#mobile-overlay {
    clip-path: circle(0% at 90% 5%);
    transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

#mobile-overlay.open { 
    clip-path: circle(150% at 90% 5%); 
}