/* ==========================================================================
   Sahel Nights - Global Design System (main.css)
   ========================================================================== */

/* 1. Reset & Scrollbar Mechanics */
html { 
    scroll-behavior: smooth; 
}

.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* 2. Global Body & Theme Transitions */
body { 
    background-color: #F9F9FB; 
    color: #0F0F11; 
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 🍏 3. Dark Mode Specifics (Apple Cosmic Space Design System) */

html.dark body { 
    background: transparent !important;
    color: #FFFFFF; 
}

/* 🌌 الطبقة 1 (العمق البعيد): خلفية المجرة المتدرجة 50/50 */
html.dark::before {
    content: "";
    position: fixed;
    inset: -150px;
    background: 
        radial-gradient(circle at 50% 50%, rgba(31, 7, 59, 0.8) 0%, rgba(28, 26, 36, 0.5) 50%, rgba(0,0,0,0.8) 100%),
        linear-gradient(135deg, 
            #000000 0%, 
            #000000 35%, 
            #1c1a24 50%, 
            #220a3f 65%, 
            #18052e 100%
        ) !important;
    background-blend-mode: screen !important;
    background-size: 200% 200% !important;
    animation: cosmicNebulaShift 20s ease-in-out infinite alternate !important;
    z-index: -4; /* أبعد نقطة في الخلفية */
    pointer-events: none;
}

/* 💫 الطبقة 2 (الجديدة): الغبار الكوني الناعم جداً (Tiny Drifting Stardust) */
html.dark::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 200vh; /* الضعف عشان تسليم اللوب الرياضي */
    width: 1.5px; height: 1.5px;
    background: transparent;
    box-shadow: 
        /* --- المجموعة العلوية --- */
        7vw 12vh rgba(255,255,255,0.6), 22vw 28vh rgba(255,255,255,0.3), 45vw 8vh rgba(255,255,255,0.5), 
        61vw 23vh rgba(255,255,255,0.2), 88vw 15vh rgba(255,255,255,0.4), 14vw 45vh rgba(255,255,255,0.5), 
        33vw 62vh rgba(255,255,255,0.3), 52vw 41vh rgba(255,255,255,0.6), 79vw 58vh rgba(255,255,255,0.2), 
        94vw 35vh rgba(255,255,255,0.4), 8vw 82vh rgba(255,255,255,0.5), 29vw 91vh rgba(255,255,255,0.3), 
        48vw 75vh rgba(255,255,255,0.4), 68vw 89vh rgba(255,255,255,0.5), 85vw 77vh rgba(255,255,255,0.2),

        /* --- المجموعة السفلية المستنسخة بالحرف (+100vh) للوب السحري --- */
        7vw 112vh rgba(255,255,255,0.6), 22vw 128vh rgba(255,255,255,0.3), 45vw 108vh rgba(255,255,255,0.5), 
        61vw 123vh rgba(255,255,255,0.2), 88vw 115vh rgba(255,255,255,0.4), 14vw 145vh rgba(255,255,255,0.5), 
        33vw 162vh rgba(255,255,255,0.3), 52vw 141vh rgba(255,255,255,0.6), 79vw 158vh rgba(255,255,255,0.2), 
        94vw 135vh rgba(255,255,255,0.4), 8vw 182vh rgba(255,255,255,0.5), 29vw 191vh rgba(255,255,255,0.3), 
        48vw 175vh rgba(255,255,255,0.4), 68vw 189vh rgba(255,255,255,0.5), 85vw 177vh rgba(255,255,255,0.2);
    animation: tinyStardustConveyor 35s linear infinite;
    z-index: -3;
    pointer-events: none;
}

/* ✨ الطبقة 3: تيار النجوم الأبدي (مع عقارب الساعة) */
html.dark body::before {
    content: "";
    position: fixed;
    top: -100vmax; left: -100vmax; width: 300vmax; height: 300vmax;
    background: transparent;
    box-shadow: 
        20vmax 40vmax #fff, 80vmax 120vmax #cca2ff, 150vmax 50vmax #fff, 220vmax 180vmax #8cb4ff, 280vmax 250vmax #fff,
        30vmax 210vmax #cca2ff, 95vmax 280vmax #fff, 170vmax 260vmax #cca2ff, 240vmax 90vmax #fff, 110vmax 15vmax #8cb4ff,
        15vmax 160vmax #fff, 60vmax 85vmax #fff, 130vmax 290vmax #8cb4ff, 195vmax 140vmax #fff, 260vmax 35vmax #cca2ff,
        50vmax 275vmax #fff, 125vmax 195vmax #fff, 210vmax 220vmax #cca2ff, 285vmax 115vmax #fff, 75vmax 25vmax #fff;
    transform-origin: 50% 50%;
    animation: infiniteStreamClockwise 110s linear infinite; 
    z-index: -2;
    pointer-events: none;
}

/* 🛸 الطبقة 4: حزام المجرة العميق (عكس عقارب الساعة) */
html.dark body::after {
    content: "";
    position: fixed;
    top: -100vmax; left: -100vmax; width: 300vmax; height: 300vmax;
    background: transparent;
    box-shadow: 
        40vmax 80vmax rgba(255,255,255,0.9), 110vmax 30vmax rgba(255,255,255,0.7), 250vmax 270vmax rgba(210, 170, 255, 0.8),
        85vmax 210vmax rgba(140, 180, 255, 0.9), 180vmax 150vmax rgba(255,255,255,0.8), 290vmax 70vmax rgba(255,255,255,0.9),
        15vmax 285vmax rgba(255,255,255,0.7), 140vmax 10vmax rgba(210, 170, 255, 0.8), 225vmax 195vmax rgba(140, 180, 255, 0.7),
        70vmax 130vmax rgba(255,255,255,0.9), 265vmax 115vmax rgba(255,255,255,0.8), 55vmax 5vmax rgba(255,255,255,0.9);
    transform-origin: 50% 50%;
    animation: infiniteStreamCounter 75s linear infinite; 
    z-index: -1; /* أقرب طبقة لعين المستخدم */
    pointer-events: none;
}

/* 🚀 محركات الحركة الشاملة */

@keyframes cosmicNebulaShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes tinyStardustConveyor {
    from { transform: translateY(0); }
    to   { transform: translateY(-100vh); } /* إزاحة تساوي طول الشاشة بالضبط للوب مخفي */
}

@keyframes infiniteStreamClockwise {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes infiniteStreamCounter {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

/* 👑 4. Story Modal Global Locks */
body:has(#story-master-modal:not(.hidden)) {
    overflow: hidden !important; 
}

body:has(#story-master-modal:not(.hidden)) #include-stories {
    position: relative !important;
    z-index: 999999 !important; 
}

/* 🍎 5. Header Injection Fixes */
#main-header {
    max-w: 100vw !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

@media (max-w: 640px) {
    #main-header a[href*="index"] span { font-size: 18px !important; }
    #main-header .flex.items-center.gap-4, 
    #main-header .flex.items-center.gap-2 { gap: 6px !important; }
    #main-header a[title="Arabic Version"] { font-size: 11px !important; padding: 4px 8px !important; }
    #mobile-menu-btn svg { width: 24px !important; height: 24px !important; }
}

/* 🍎 6. Apple Smooth Scroll Animations */
.apple-fade-in-up {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.apple-fade-in-up.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 🔮 7. Events Slider Global Overrides */
#events-slider-wrapper h1, #events-slider-wrapper h2, #events-slider-wrapper h3, 
#events-slider-wrapper h4, #events-slider-wrapper h5, #events-slider-wrapper h6,
#events-slider-wrapper .event-title, #events-slider-wrapper h3 a {
    color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#events-slider-wrapper button,
#events-slider-wrapper a.btn {
    background-color: #D4AF37 !important;
    color: #050505 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* 8. Stories Filter Buttons Contrast */
.story-filter-btn {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.story-filter-btn.bg-goldAccent {
    background-color: #D4AF37 !important;
    color: #050505 !important;
    border-color: #D4AF37 !important;
}

.story-filter-btn:not(.bg-goldAccent) {
    background-color: rgba(25, 25, 27, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #a3a3a3 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}