Add 1 files

index.html

@@ -38,6 +38,7 @@
             border: 1px solid rgba(255, 137, 6, 0.1);
             position: relative;
             overflow: hidden;
+            z-index: 10;
         }
         
         .article-container::before {
@@ -123,6 +124,7 @@
             transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             transform: translateY(20px);
             opacity: 0;
+            isolation: isolate;
         }
         
         figure.visible {
@@ -140,6 +142,7 @@
             height: auto;
             display: block;
             transition: transform 0.5s ease;
+            object-fit: cover;
         }
         
         figure:hover img {
@@ -198,10 +201,11 @@
             font-size: 2.5rem;
             opacity: 0;
             animation: float 15s linear infinite;
-            z-index: -1;
+            z-index: 5;
             text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
             cursor: default;
             user-select: none;
+            pointer-events: none;
         }
         
         @keyframes float {
@@ -241,6 +245,7 @@
             border: 2px solid var(--primary);
             opacity: 0;
             transition: opacity 0.3s ease;
+            backdrop-filter: blur(5px);
         }
         
         .scroll-indicator.visible {
@@ -269,7 +274,7 @@
                 linear-gradient(rgba(15, 14, 23, 0.95), rgba(15, 14, 23, 0.95)),
                 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="1" height="1" x="0" y="0" fill="%23ff8906" opacity="0.05"/></svg>');
             pointer-events: none;
-            z-index: -2;
+            z-index: 1;
         }
         
         .digital-rain {
@@ -279,8 +284,9 @@
             width: 100%;
             height: 100%;
             overflow: hidden;
-            z-index: -1;
+            z-index: 2;
             opacity: 0.05;
+            pointer-events: none;
         }
         
         .digital-rain span {
@@ -311,6 +317,14 @@
             background: rgba(255, 137, 6, 0.05);
             position: relative;
             border-radius: 8px;
+            transform: translateX(20px);
+            opacity: 0;
+            transition: all 0.5s ease;
+        }
+        
+        .quote.visible {
+            transform: translateX(0);
+            opacity: 1;
         }
         
         .quote::before {
@@ -366,6 +380,10 @@
             h2 {
                 font-size: 1.5rem;
             }
+            
+            .emoji-float {
+                font-size: 1.5rem;
+            }
         }
     </style>
 </head>
@@ -389,7 +407,7 @@
                 <p>إن التقنيةَ <span class="digital-entity">"آلةٌ ميتافيزيقيةٌ"</span> تخرج كينوناتٍ من العدم إلى الوجود. بدوري، أتعامل مع الإيموجيز والميمات التي تظهر على شاشة هاتفي على أنها <span class="digital-entity">كائناتٌ رقميةٌ حيةٌ</span>. لأنها كذلك.</p>
                 
                 <figure>
-                    <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" 
+                    <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop" 
                          alt="الكائنات الرقمية تخرج من العدم إلى الوجود" 
                          class="w-full h-auto">
                     <figcaption>الكائنات الرقمية تخرج من العدم إلى الوجود (تصوير: رقمنة الوجود)</figcaption>
@@ -408,7 +426,7 @@
                 <p>خلال دراستي الجامعية، قرأت عبارةً سنسكريتيةً استوقفتني بشدة. تقول العبارة: <span class="digital-entity">"إن ما ينطوي عليه الأمر هو خلقُ العالم الذي اختار الإنسانُ أن يسكنه. لذا فمن الضروري تقليدُ عمل الآلهة"</span>. هذه المقولةُ السنسكريتيةُ تحاكي خلقَ الإنسانِ للعالم بتماهٍ كاملٍ مع فعل الله في خلق الوجود.</p>
                 
                 <figure>
-                    <img src="https://images.unsplash.com/photo-1544551763-46a013bb2dcc?q=80&w=2070&auto=format&fit=crop" 
+                    <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2165&auto=format&fit=crop" 
                          alt="العلاقة بين الخلق الإلهي والخلق التقني" 
                          class="w-full h-auto">
                     <figcaption>العلاقة بين الخلق الإلهي والخلق التقني (تصوير: جسر الميتافيزيقا)</figcaption>
@@ -425,7 +443,7 @@
                 <p>اليوم، نشاهد كيف تحولت الأشياء والتقنيات إلى <span class="digital-entity">"كائناتٍ مستفزّةٍ"</span>. الإيموجي الظاهر فوق شاشة هاتفك هو كائنٌ رقميٌّ. هاتفك الذكيّ هو كائنٌ تقنيٌّ. إنها ليست كائناتٍ عَرَضيةً، بل كائناتٌ ذات كينونةٍ في ذاتها، وتجسيدٌ حمام صابونٍ تقنيٍّ رقميٍّ وجوديٍّ يغمرنا.</p>
                 
                 <figure>
-                    <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2165&auto=format&fit=crop" 
+                    <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" 
                          alt="الكائنات الرقمية ككينونات مستقلة" 
                          class="w-full h-auto">
                     <figcaption>الكائنات الرقمية ككينونات مستقلة (تصوير: عوالم متداخلة)</figcaption>
@@ -442,7 +460,7 @@
                 <p>تشبه ظروف خلق الكائنات الرقميّة تلك الظروف التي كان يخلقها الرومانُ والإغريقُ عندما ينشئون الـ"تيمبلوم" (Templum) (τέμενος).</p>
                 
                 <figure>
-                    <img src="https://images.unsplash.com/photo-1527004013197-933c91776e3e?q=80&w=2072&auto=format&fit=crop" 
+                    <img src="https://images.unsplash.com/photo-1600481176431-47ad2ab2745d?q=80&w=2070&auto=format&fit=crop" 
                          alt="التشابه بين المعابد القديمة والفضاءات الرقمية" 
                          class="w-full h-auto">
                     <figcaption>التشابه بين المعابد القديمة والفضاءات الرقمية (تصوير: عمارة المقدس)</figcaption>
@@ -455,7 +473,7 @@
                 <p>ولكن لم يبنِ الإغريقُ المعابدَ بشكلٍ عشوائيٍ، بل بنوها بأسلوبٍ دقيقٍ يراعي أشدَّ مراعاةٍ أحاسيسَ الداخلين إليها. كانت الأقسامُ توزَّع بين القاعة الرئيسية، والبهو، والردهة الخلفية، والخلوة المعزولة، والسيلا (Cella) - أي قاعةٍ مخفيةٍ وخاصةٍ جدًا - والإيبينوس (Epinaos) - وهو حجرةٌ صغيرةٌ في السيلا - بالإضافة إلى البروناوس (pronaos) - وهي مساحةٌ خارجيةٌ محاذيةٌ للسيلا يحدها عددٌ محددٌ من الأعمدة، إما أربعةٌ أو ستةٌ أو عشرةٌ.</p>
                 
                 <figure>
-                    <img src="https://images.unsplash.com/photo-1600481176431-47ad2ab2745d?q=80&w=2070&auto=format&fit=crop" 
+                    <img src="https://images.unsplash.com/photo-1544551763-46a013bb2dcc?q=80&w=2070&auto=format&fit=crop" 
                          alt="هندسة المعابد القديمة" 
                          class="w-full h-auto">
                     <figcaption>هندسة المعابد القديمة (تصوير: عمارة الروح)</figcaption>
@@ -469,7 +487,7 @@
                 
                 <h2>النيومين الرقمي</h2>
                 
-                <p>ينشأ التمبلوم من خطوطٍ متخيلةٍ وخطوطٍ واقعيةٍ. إنه وسطٌ واقعيٌّ ينشأ عبر الهندسة المادية الواقعية، ويُفرز بين ثنايا الأعمدة والمساحات شروطَ إمكان الإحساس بوجود أشياءَ ليست إلا متخيلةً. إنه فضاءٌ ماديٌّ ينطوي على إمكانات الهندسة المتخيلة التي توحي بتغيراتٍ في البناء في حالةٍ إيهاميةٍ واستلابيةٍ، "تشير إلى تغييرٍ حتى في حالة عدم وجوده" <span class="footnote">(مقالة، www.perseus.tufts.edu، Templum، فقرة 11)</span>.</p>
+                <p>ينشأ التمبلوم من خطوطٍ متخيلةٍ وخطوطٍ واقعيةٍ. إنه وسطٌ واقعيٌّ ينشأ عبر الهندسة المادية الواقعية، ويُفرز بين ثنايا الأعمدة والمساحات شروطَ إمكان الإحساس بوجود أشياءَ ليست إلا متخيلةً. إنه فضاءٌ ماديٌّ ينطوي على إمكانات الهندسة المتخيلة التي توحي بتغيراتٍ في البناء في حالةٍ إيهاميةٍ واستلابيةٍ، "تشير إلى تغييرٍ حتى في حالة عدم وجوده" <span class="footnote">(مقالة، www.perseus.tufts.edu， Templum، فقرة 11)</span>.</p>
                 
                 <p>لقد نظروا إلى معمارية التمبلوم كهندسةٍ ذاتيةٍ وبصريةٍ. لذلك يُشرعُ عالمُ الخطوط المرئية وغير المرئية رحلةَ المخيلة والروح نحو مستوياتَ حسيةٍ لا تتحقق إلا في حالاتٍ نادرةٍ، إذ إن المعماريةَ الساحرةَ جدًا عليها أن تتجاوز السطحيةَ وتتوجه بجوهرها كي تحقق الـ"نيومين" (Numen).</p>
                 
@@ -491,7 +509,7 @@
                 <p>وما كانت لتتكون رهبة الكائنات الرقمية لو لم يكن هذا العالم الحالي؛ خُلقَ لكي يكون مرئياً. فعبر "الروح التي تترأس الشيء"، وعبر البعد البصري والخطوط المائلة المرئية والخيوط الوهمية ولعبة الأضواء التي توحي بكثافةٍ وهميةٍ في المادة، تنشأ "أنطوفانيا" فضاء المادة المنفصل والمنعزل. نحن هنا أمام مثالٍ حيٍّ عن آلية نشوء كينونة المكان ورهبته التي تجعله يأتي إلى الناظرين ككيانٍ في ذاته.</p>
                 
                 <figure>
-                    <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop" 
+                    <img src="https://images.unsplash.com/photo-1527004013197-933c91776e3e?q=80&w=2072&auto=format&fit=crop" 
                          alt="الأنطوفانيا الرقمية" 
                          class="w-full h-auto">
                     <figcaption>الأنطوفانيا الرقمية: كينونة المكان الرقمي (تصوير: عوالم الظل)</figcaption>
@@ -507,30 +525,31 @@
     <script>
         // Create floating emojis
         const emojis = ['👁️', '💾', '🖥️', '📱', '👾', '🤖', '🧿', '🔮', '🕹️', '🌐', '💻', '🔢', '🔣', '🎮', '🖱️', '⌨️', '📲', '🖨️', '🖲️', '💽'];
-        for (let i = 0; i < 25; i++) {
+        for (let i = 0; i < 20; i++) {
             const emoji = document.createElement('div');
             emoji.className = 'emoji-float';
             emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
             emoji.style.left = Math.random() * 100 + 'vw';
             emoji.style.animationDuration = (5 + Math.random() * 15) + 's';
             emoji.style.animationDelay = Math.random() * 5 + 's';
-            emoji.style.fontSize = (1 + Math.random() * 3) + 'rem';
+            emoji.style.fontSize = (1 + Math.random() * 2) + 'rem';
+            emoji.style.zIndex = Math.floor(Math.random() * 5) + 5;
             document.body.appendChild(emoji);
         }
         
         // Create digital rain effect
         const digitalRain = document.getElementById('digitalRain');
-        for (let i = 0; i < 150; i++) {
+        for (let i = 0; i < 100; i++) {
             const drop = document.createElement('span');
             drop.style.left = Math.random() * 100 + 'vw';
             drop.style.animationDuration = (1 + Math.random() * 4) + 's';
             drop.style.animationDelay = Math.random() * 3 + 's';
-            drop.style.opacity = Math.random() * 0.5;
-            drop.style.height = (10 + Math.random() * 40) + 'px';
+            drop.style.opacity = Math.random() * 0.3;
+            drop.style.height = (10 + Math.random() * 30) + 'px';
             digitalRain.appendChild(drop);
         }
         
-        // Scroll reveal animations
+        // Scroll reveal animations with improved timing
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -538,11 +557,14 @@
                     
                     // For figures, add a slight delay between each one
                     if (entry.target.tagName === 'FIGURE') {
-                        entry.target.style.transitionDelay = `${Math.random() * 0.3}s`;
+                        entry.target.style.transitionDelay = `${0.1 + Math.random() * 0.2}s`;
                     }
                 }
             });
-        }, {threshold: 0.1});
+        }, {
+            threshold: 0.1,
+            rootMargin: '0px 0px -100px 0px'
+        });
         
         document.querySelectorAll('figure, .quote').forEach(el => {
             observer.observe(el);
@@ -569,14 +591,34 @@
             });
         });
         
-        // Add parallax effect to figures on scroll
-        window.addEventListener('scroll', () => {
+        // Improved parallax effect with requestAnimationFrame
+        let lastScrollPosition = 0;
+        let ticking = false;
+        
+        function updateParallax() {
             const figures = document.querySelectorAll('figure');
+            const scrollPosition = window.scrollY;
+            
             figures.forEach(figure => {
                 const rect = figure.getBoundingClientRect();
-                const scrollPercent = (rect.top / window.innerHeight) * 100;
-                figure.style.transform = `translateY(${scrollPercent * 0.2}px)`;
+                const figurePosition = rect.top + scrollPosition;
+                const scrollPercent = (scrollPosition - figurePosition + window.innerHeight) / (window.innerHeight * 2);
+                
+                if (scrollPercent > 0 && scrollPercent < 1) {
+                    figure.style.transform = `translateY(${scrollPercent * 30 - 15}px)`;
+                }
             });
+            
+            ticking = false;
+        }
+        
+        window.addEventListener('scroll', () => {
+            lastScrollPosition = window.scrollY;
+            
+            if (!ticking) {
+                window.requestAnimationFrame(updateParallax);
+                ticking = true;
+            }
         });
         
         // Add glow effect to headings when they come into view
@@ -586,11 +628,34 @@
                     entry.target.classList.add('animate__animated', 'animate__fadeInRight');
                 }
             });
-        }, {threshold: 0.5});
+        }, {
+            threshold: 0.5,
+            rootMargin: '0px 0px -100px 0px'
+        });
         
         document.querySelectorAll('h2').forEach(el => {
             headingObserver.observe(el);
         });
+        
+        // Preload images for smoother transitions
+        function preloadImages() {
+            const images = [
+                'https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop',
+                'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2165&auto=format&fit=crop',
+                'https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop',
+                'https://images.unsplash.com/photo-1600481176431-47ad2ab2745d?q=80&w=2070&auto=format&fit=crop',
+                'https://images.unsplash.com/photo-1544551763-46a013bb2dcc?q=80&w=2070&auto=format&fit=crop',
+                'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop',
+                'https://images.unsplash.com/photo-1527004013197-933c91776e3e?q=80&w=2072&auto=format&fit=crop'
+            ];
+            
+            images.forEach(src => {
+                const img = new Image();
+                img.src = src;
+            });
+        }
+        
+        window.addEventListener('load', preloadImages);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gladiopeace/kharia1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>