/*
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║        RESPONSIVE UTILITIES - THE CONSTITUTION                ║
 * ║        دستور الاستجابة الموحد - ملف القواعد الأساسية          ║
 * ╚═══════════════════════════════════════════════════════════════╝
 * 
 * ✅ الغرض: توحيد سلوك الاستجابة عبر الموقع بالكامل
 * ✅ المبدأ: Fluid Design (تصميم سائل) بدلاً من نقاط توقف قاسية
 * ✅ التقنيات: CSS Variables, Clamp(), Cubic-Bezier
 */

:root {
    /* 
   * 1. PHYSICS-BASED ANIMATIONS (GPU OPTIMIZED)
   * تم استبدال 'all' بخصائص محددة لمنع Layout Thrashing
   * cubic-bezier(0.25, 1, 0.5, 1) = Apple easeOutExpo
   */
    --transition-smooth: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-spring: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-bounce: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fade: opacity 0.3s ease;

    /*
   * 2. FLUID SPACING (CLAMP)
   * تتغير المسافات تلقائياً بين الموبايل (375px) والديسك توب (1440px)
   * الصيغة: clamp(MIN, VAL + VW, MAX)
   */
    --fluid-space-xs: clamp(4px, 1vw, 8px);
    --fluid-space-sm: clamp(8px, 1.5vw, 16px);
    --fluid-space-md: clamp(16px, 3vw, 32px);
    --fluid-space-lg: clamp(32px, 5vw, 64px);
    --fluid-space-xl: clamp(60px, 8vw, 120px);

    /* Padded Containers */
    --fluid-container-padding: clamp(16px, 4vw, 40px);

    /*
   * 3. FLUID TYPOGRAPHY
   * نصوص تقرأ بوضوح على كل الشاشات
   */
    --fluid-font-xs: clamp(0.75rem, 0.8vw, 0.875rem);
    --fluid-font-sm: clamp(0.875rem, 1vw, 1rem);
    --fluid-font-base: clamp(1rem, 1.2vw, 1.125rem);
    --fluid-font-lg: clamp(1.25rem, 2vw, 1.5rem);
    --fluid-font-xl: clamp(1.75rem, 3vw, 2.5rem);
    --fluid-font-2xl: clamp(2rem, 4vw, 3.5rem);

    /*
   * 4. TOUCH TARGETS (SAFE AREAS)
   * أبعاد صديقة للأصابع مع احترام الهواتف الحديثة (Notch)
   */
    --touch-target-min: 44px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/*
 * ACCESSIBILITY
 * احترام رغبة المستخدم في تقليل الحركة
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-smooth: none;
        --transition-spring: none;
        --transition-hover: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * 5. UTILITY CLASSES - INTERACTION
 * كلاسات التفاعل المباشر
 */

/* تأثير الضغط (iOS Active State) - يقلص العنصر قليلاً عند اللمس */
.press-effect {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.2s ease;
    will-change: transform;
}

.press-effect:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

/* تحسين اللمس */
.touch-friendly {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* إخفاء ذكي بدون التأثير على SEO */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* تحويل القوائم إلى Stack عمودي في الموبايل */
.fluid-stack {
    display: flex;
    flex-direction: row;
    gap: var(--fluid-space-md);
}

@media (max-width: 768px) {
    .fluid-stack {
        flex-direction: column;
        gap: var(--fluid-space-sm);
    }
}

/* Scrollbar مخفي لكن قابل للتمرير (Mobile Native Feel) */
.scroll-snap-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* iOS Smooth Scroll - Critical */
    scrollbar-width: none;
    /* Firefox */
    display: flex;
    gap: var(--fluid-space-sm);
    padding-bottom: var(--fluid-space-sm);
    /* GPU Promotion for scrolling containers */
    will-change: scroll-position;
}

.scroll-snap-x::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.scroll-snap-item {
    scroll-snap-align: center;
    flex-shrink: 0;
}

/* Glassmorphism موحد */
.responsive-glass {
    background: rgba(var(--white-rgb), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--white-rgb), 0.3);
}

/* وضع الداكن للـ Glass */
[data-theme="dark"] .responsive-glass {
    background: rgba(var(--black-rgb), 0.7);
    border-color: rgba(var(--white-rgb), 0.1);
}

/*
 * 6. UNIVERSAL RENDERING & ANDROID POLISH
 * تحسينات عامة تضمن سلاسة أندرويد والتابلت
 */

/* تحسين عرض النصوص وجعلها أكثر حدة */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* إلغاء الارتداد المزعج عند نهاية الصفحة (App-like feel) */
html,
body {
    /* ⚡ CRITICAL FIX: Kill global smooth scroll to prevent fighting with JS */
    scroll-behavior: auto !important;
    /* Removed overscroll-behavior-y: none from here to fix desktop scroll */

    /* منع تأخير النقر 300ms على الشاشات اللمسية */
    touch-action: manipulation;
}

/* Apply overscroll behavior ONLY on mobile/touch devices */
@media (max-width: 1024px) {

    html,
    body {
        /* Removed overscroll-behavior-y: none to fix momentum scroll */
        -webkit-tap-highlight-color: transparent;
        /* ⚡ SAFETY: Prevent any scroll-snap leakage to main body */
        scroll-snap-type: none !important;
    }
}

/* منع الصور من تكسير التصميم أثناء التحميل */
img {
    height: auto;
    /* تخطي رسم الصور خارج الشاشة لتقليل استخدام الرام */
    content-visibility: auto;
}

/* 
 * 7. GLOBAL APP FEEL (Sherlock Holmes Findings)
 * تحسينات شاملة لجميع الأجهزة (لابتوب + موبايل)
 */

/* تحسين الأزرار والروابط لتشبه التطبيقات */
button,
.btn,
a,
.nav-item,
.card,
.interactive-card,
.info-badge {
    user-select: none;
    /* منع تحديد النص */
    -webkit-user-select: none;
    cursor: pointer;
    /* إلغاء الوميض الرمادي عند النقر في الموبايل */
    -webkit-tap-highlight-color: transparent;
}

/* 
 * 8. GLOBAL MAC-LIKE SCROLLBAR (Desktop Polish ONLY 💻)
 * توحيد شكل السكرول بار ليصبح نحيفاً وأنيقاً فقط على الكمبيوتر
 * الموبايل يعود للسكرول المخفي الأصلي (Native Feel)
 */
@media (min-width: 1025px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(var(--black-rgb), 0.2);
        border-radius: 20px;
        border: 3px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(var(--black-rgb), 0.4);
    }
}

/* ⚡ MOBILE: AGGRESSIVE SCROLLBAR KILLER */
@media (max-width: 1024px) {
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }

    * {
        scrollbar-width: none !important;
        /* Firefox */
        -ms-overflow-style: none !important;
        /* IE/Edge */
    }
}

/* Dark Mode Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(var(--white-rgb), 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--white-rgb), 0.4);
}