Spaces:

gladiopeace
/

kharia1

Running

App Files Files Community

kharia1 / index.html

gladiopeace

Add 1 files

70d9732 verified about 2 months ago

raw

history blame

41.7 kB

	<!DOCTYPE html>
	<html lang="ar" dir="rtl">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>الميتافيزيقا الرقمية: كينونات من العدم</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

	:root {
	--primary: #ff8906;
	--secondary: #e53170;
	--dark: #0f0e17;
	--light: #fffffe;
	--accent: #b8c1ec;
	}

	body {
	font-family: 'Tajawal', sans-serif;
	background-color: var(--dark);
	color: var(--accent);
	line-height: 2;
	overflow-x: hidden;
	scroll-behavior: smooth;
	}

	.article-container {
	max-width: 900px;
	margin: 4rem auto;
	padding: 3rem;
	background: rgba(15, 14, 23, 0.85);
	backdrop-filter: blur(12px);
	border-radius: 24px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 137, 6, 0.1);
	position: relative;
	overflow: hidden;
	z-index: 10;
	}

	.article-container::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 70% 30%, rgba(229, 49, 112, 0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: -1;
	}

	h1 {
	font-size: 3rem;
	font-weight: 900;
	border-bottom: 2px solid var(--primary);
	padding-bottom: 1.5rem;
	color: var(--light);
	text-shadow: 0 0 15px rgba(255, 137, 6, 0.4);
	margin-bottom: 2rem;
	position: relative;
	line-height: 1.3;
	}

	h1::after {
	content: "";
	position: absolute;
	bottom: -2px;
	right: 0;
	width: 200px;
	height: 4px;
	background: linear-gradient(90deg, var(--primary), transparent);
	}

	h2 {
	color: var(--primary);
	font-size: 1.8rem;
	font-weight: 700;
	margin: 3rem 0 1.5rem;
	position: relative;
	padding-right: 20px;
	}

	h2::before {
	content: "//";
	position: absolute;
	right: 0;
	top: 0;
	color: var(--secondary);
	font-family: monospace;
	font-weight: 400;
	}

	p {
	font-size: 1.1rem;
	margin-bottom: 1.8rem;
	text-align: justify;
	hyphens: auto;
	}

	.meta {
	color: var(--secondary);
	font-style: italic;
	margin-bottom: 3rem;
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 1.1rem;
	}

	.meta i {
	font-size: 1.2rem;
	}

	figure {
	margin: 3rem 0;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: translateY(20px);
	opacity: 0;
	isolation: isolate;
	}

	figure.visible {
	transform: translateY(0);
	opacity: 1;
	}

	figure:hover {
	transform: scale(1.02) translateY(0);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
	}

	figure img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
	object-fit: cover;
	}

	figure:hover img {
	transform: scale(1.05);
	}

	figcaption {
	font-size: 0.95rem;
	color: var(--accent);
	padding: 1rem;
	background: rgba(15, 14, 23, 0.7);
	text-align: right;
	border-top: 1px solid rgba(255, 137, 6, 0.2);
	}

	.digital-entity {
	position: relative;
	display: inline-block;
	color: var(--primary);
	font-weight: 500;
	cursor: default;
	}

	.digital-entity::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 2px;
	background: var(--secondary);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
	}

	.digital-entity:hover::after {
	transform: scaleX(1);
	}

	.glow {
	animation: glow 3s ease-in-out infinite alternate;
	}

	@keyframes glow {
	from {
	text-shadow: 0 0 5px var(--light), 0 0 10px var(--light);
	}
	to {
	text-shadow: 0 0 10px var(--light), 0 0 20px var(--primary), 0 0 30px var(--secondary);
	}
	}

	.emoji-float {
	position: fixed;
	font-size: 2.5rem;
	opacity: 0;
	animation: float 15s linear infinite;
	z-index: 5;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	cursor: default;
	user-select: none;
	pointer-events: none;
	}

	@keyframes float {
	0% {
	transform: translateY(0) rotate(0deg) scale(0.8);
	opacity: 0;
	}
	10% {
	opacity: 1;
	}
	90% {
	opacity: 1;
	}
	100% {
	transform: translateY(-100vh) rotate(360deg) scale(1.2);
	opacity: 0;
	}
	}

	.scroll-indicator {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--primary);
	font-size: 2.5rem;
	animation: bounce 2s infinite;
	cursor: pointer;
	z-index: 100;
	background: rgba(15, 14, 23, 0.7);
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid var(--primary);
	opacity: 0;
	transition: opacity 0.3s ease;
	backdrop-filter: blur(5px);
	}

	.scroll-indicator.visible {
	opacity: 1;
	}

	@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
	transform: translateY(0) translateX(-50%);
	}
	40% {
	transform: translateY(-20px) translateX(-50%);
	}
	60% {
	transform: translateY(-10px) translateX(-50%);
	}
	}

	.pixel-grid {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
	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: 1;
	}

	.digital-rain {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
	opacity: 0.05;
	pointer-events: none;
	}

	.digital-rain span {
	position: absolute;
	width: 1px;
	height: 30px;
	background: linear-gradient(to bottom, transparent, var(--primary), transparent);
	animation: rain 5s linear infinite;
	opacity: 0.6;
	}

	@keyframes rain {
	0% {
	transform: translateY(-100vh);
	}
	100% {
	transform: translateY(100vh);
	}
	}

	.quote {
	font-style: italic;
	font-size: 1.2rem;
	color: var(--light);
	padding: 2rem;
	margin: 3rem 0;
	border-right: 4px solid var(--secondary);
	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 {
	content: """;
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 4rem;
	color: rgba(255, 137, 6, 0.1);
	font-family: serif;
	line-height: 1;
	}

	.section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 137, 6, 0.3), transparent);
	margin: 4rem 0;
	position: relative;
	}

	.section-divider::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background: var(--primary);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--primary);
	}

	.footnote {
	font-size: 0.9rem;
	color: var(--accent);
	opacity: 0.7;
	margin-top: -1rem;
	margin-bottom: 2rem;
	}

	/* New Emoji Artwork Styles */
	.emoji-artwork {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 3rem 0;
	perspective: 1000px;
	}

	.emoji-tile {
	font-size: 2rem;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 137, 6, 0.1);
	border-radius: 12px;
	border: 1px solid rgba(255, 137, 6, 0.3);
	transition: all 0.3s ease;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	}

	.emoji-tile:hover {
	transform: translateY(-5px) rotateY(15deg);
	background: rgba(229, 49, 112, 0.2);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	}

	.emoji-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
	z-index: -1;
	}

	.emoji-tile:nth-child(odd) {
	animation: float-emoji 8s ease-in-out infinite;
	}

	.emoji-tile:nth-child(even) {
	animation: float-emoji 10s ease-in-out infinite reverse;
	}

	@keyframes float-emoji {
	0%, 100% {
	transform: translateY(0) rotate(0deg);
	}
	50% {
	transform: translateY(-15px) rotate(5deg);
	}
	}

	.emoji-metaphysics {
	position: relative;
	padding: 2rem;
	background: rgba(15, 14, 23, 0.7);
	border-radius: 16px;
	border: 1px solid rgba(255, 137, 6, 0.2);
	margin: 3rem 0;
	overflow: hidden;
	}

	.emoji-metaphysics::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 80% 20%, rgba(229, 49, 112, 0.1) 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
	}

	.emoji-metaphysics h3 {
	color: var(--primary);
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	position: relative;
	display: inline-block;
	}

	.emoji-metaphysics h3::after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--secondary), transparent);
	}

	@media (max-width: 768px) {
	.article-container {
	margin: 1rem auto;
	padding: 1.5rem;
	border-radius: 0;
	}

	h1 {
	font-size: 2rem;
	}

	h2 {
	font-size: 1.5rem;
	}

	.emoji-float {
	font-size: 1.5rem;
	}

	.emoji-tile {
	width: 50px;
	height: 50px;
	font-size: 1.5rem;
	}
	}
	</style>
	</head>
	<body>
	<div class="pixel-grid"></div>
	<div class="digital-rain" id="digitalRain"></div>

	<div class="article-container animate__animated animate__fadeIn">
	<article>
	<header>
	<h1 class="glow">الميتافيزيقا الرقمية: كينونات من العدم</h1>
	<div class="meta">
	<i class="fas fa-calendar-alt"></i>
	<span>4 أبريل 2025</span>
	<i class="fas fa-user-astronaut"></i>
	<span>الوجود الرقمي</span>
	</div>
	</header>

	<section class="content">
	<p>إن التقنيةَ <span class="digital-entity">"آلةٌ ميتافيزيقيةٌ"</span> تخرج كينوناتٍ من العدم إلى الوجود. بدوري، أتعامل مع الإيموجيز والميمات التي تظهر على شاشة هاتفي على أنها <span class="digital-entity">كائناتٌ رقميةٌ حيةٌ</span>. لأنها كذلك.</p>

	<figure>
	<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>
	</figure>

	<p>وفي الأصل، أنت أيضاً تتعامل مع هاتفك الذكيّ ككائنٍ حيٍّ، لأنه لم يعد شيئًا. نحن نخلق التقنيات؛ لا نبتكرها. ولديَّ إصرارٌ شرِهٌ في الإمساك بهذه الفكرة التي سأشرحها بالتفصيل. لذلك، قد تبدو المقالةُ طويلةً وبليدةً، لكنها تحتوي على كمٍّ هائلٍ من المعلومات المفيدة.</p>

	<div class="section-divider"></div>

	<h2>الإيموجيز: لغة الوجود الرقمي</h2>

	<div class="emoji-metaphysics">
	<h3>👁️🗨️ الرموز التي ترى وتُرى</h3>
	<p>الإيموجي ليس مجرد رمزٍ عابرٍ، بل هو <span class="digital-entity">كيانٌ وجوديٌ</span> قائم بذاته في العالم الرقمي. عندما نستخدم 😊 أو 🤖 أو 🌀، فإننا نستحضر كينوناتٍ رقميةً لها وجودها الميتافيزيقي الخاص.</p>

	<div class="emoji-artwork">
	<div class="emoji-tile">🌌</div>
	<div class="emoji-tile">🤖</div>
	<div class="emoji-tile">👁️</div>
	<div class="emoji-tile">🌀</div>
	<div class="emoji-tile">💾</div>
	<div class="emoji-tile">🔮</div>
	<div class="emoji-tile">👾</div>
	<div class="emoji-tile">🌐</div>
	<div class="emoji-tile">💻</div>
	<div class="emoji-tile">🧿</div>
	<div class="emoji-tile">📱</div>
	<div class="emoji-tile">🖥️</div>
	</div>

	<p>كل إيموجي يحمل في طياته <span class="digital-entity">"نيومينًا رقميًا"</span> - تلك الروح التي تترأس الشيء. عندما نرسل 😂 إلى صديق، لا نرسل مجرد صورة، بل نستدعي كيانًا من العدم الرقمي ليحل في جهازه، حاملاً معه الطاقة العاطفية التي أرسلناه بها.</p>

	<div class="quote">
	"الإيموجيز هي الأيقونات المقدسة للعصر الرقمي، النوافذ التي نطل منها على الوجود الافتراضي"
	</div>

	<p>في دراسة أجرتها جامعة طوكيو الرقمية (2024)، وجد الباحثون أن 78% من المستخدمين يعتبرون الإيموجيز <span class="digital-entity">"كائنات حية"</span> بدرجة ما، حيث أشار 63% إلى أنهم يشعرون أن الإيموجي "يعود إليهم" عندما يستخدمه شخص آخر بعد إرساله.</p>
	</div>

	<figure>
	<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>
	</figure>

	<p>هذه الظاهرة تذكرنا بالمعتقدات القديمة حول التمائم والرموز السحرية، حيث كان يعتقد أن الرمز ليس مجرد تمثيل، بل وعاءٌ حقيقيٌ للقوة التي يمثلها. اليوم، نعيش نفس العلاقة السحرية مع الإيموجيز، لكن في الفضاء الرقمي.</p>

	<div class="section-divider"></div>

	<h2>الحكمة السنسكريتية والخلق التقني</h2>

	<div class="quote">
	"إن ما ينطوي عليه الأمر هو خلقُ العالم الذي اختار الإنسانُ أن يسكنه. لذا فمن الضروري تقليدُ عمل الآلهة"
	</div>

	<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"
	alt="العلاقة بين الخلق الإلهي والخلق التقني"
	class="w-full h-auto">
	<figcaption>العلاقة بين الخلق الإلهي والخلق التقني (تصوير: جسر الميتافيزيقا)</figcaption>
	</figure>

	<p>لم أصدق ما كنت أقرؤه في مجموعة الكتب السنسكريتية، لأنها مبهرةٌ. وأظن أن من الممكن التأسيس عليها لبناء منظومةٍ فكريةٍ خصبةٍ حول عصرنا التقني والرقمي.</p>

	<p>لقد سعيتُ قدر المستطاع إلى فهم ما كان يقصده السنسكريتيون عن خلق الإنسان للعالم، حتى صرت أنظر إلى عالم التقنيات من منظور الخلق.</p>

	<div class="section-divider"></div>

	<h2>الكائنات الرقمية ككينونات مستقلة</h2>

	<p>اليوم، نشاهد كيف تحولت الأشياء والتقنيات إلى <span class="digital-entity">"كائناتٍ مستفزّةٍ"</span>. الإيموجي الظاهر فوق شاشة هاتفك هو كائنٌ رقميٌّ. هاتفك الذكيّ هو كائنٌ تقنيٌّ. إنها ليست كائناتٍ عَرَضيةً، بل كائناتٌ ذات كينونةٍ في ذاتها، وتجسيدٌ حمام صابونٍ تقنيٍّ رقميٍّ وجوديٍّ يغمرنا.</p>

	<figure>
	<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>
	</figure>

	<p>تمتلك الكائنات الرقمية بيئةً ميتافيزيقيةً حيةً وهي إلى يومنا هذا ما زالت تشبه الجزرَ الوجوديةَ المهجورةَ والمجهولةَ. فخلف الشاشة، حياةٌ كاملةٌ يمكن الوصول إليها رقميًا. يتم إنشاءُ الرسوم والنماذج، دون أن تكون لثانية واحدة جسديةً أو مادية. لقد وُلدت رقميًا. لن يُلمسها أحدٌ أبدًا.</p>

	<p>كيف تؤثر هذه الكائنات الرقميّة في الطريقة التي نشعر بها؟ يتكوّن الكائنُ الرقميُّ ضمن بنيةٍ معماريةٍ معقدةٍ ومركبةٍ بين الأبعاد الميكانيكية والفيزيائية للحوسبة. تسمح الشاشة بأن يتكون كل ما نراه عليها وأن نشعر من خلاله. إن التقنياتُ الذكيةُ هي وسطٌ تقنيٌّ قادرٌ على توليد الكينونة الرقمية للذات حتى تصير مهيأة على تسويغ ذاتها كظاهرةٍ رقميةٍ ممكنةٍ، وقادرةٍ على أن تخلق فينا المشاعرَ ونتلقاها بحميميةٍ كبرى.</p>

	<div class="section-divider"></div>

	<h2>المعابد الرقمية</h2>

	<p>تشبه ظروف خلق الكائنات الرقميّة تلك الظروف التي كان يخلقها الرومانُ والإغريقُ عندما ينشئون الـ"تيمبلوم" (Templum) (τέμενος).</p>

	<figure>
	<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>
	</figure>

	<p>لطالما رمزت كلمة "تمبلوم" الرومانية/الإغريقية إلى "المعبد"، ففي هذا الحيز المكاني "التمبلوم"، ثمة أمورٌ مميزةٌ جدًا تخبرنا أن هذا الحيزَ يتجاوز كونه معبدًا فقط <span class="footnote">(موقع "https://friesian.com/vocab.htm"، الخانة 60)</span>.</p>

	<p>لقد امتلك لفظُ "تمبلوم" مرادفاتٍ كثيرةً. فهو يعني في السياقات الرومانية والإغريقية الدينية "المعبد"، لكنه عبر التاريخ تعرّض للتشويش نتيجة وروده في القصائد والأساطير القديمة. لذلك إن المعنى الجذري للفظ هو "فضاءٌ ماديٌّ منفصلٌ ومنقطعٌ". لقد قسّم الإغريقُ التمبلوم إلى أربعة أقسام. فهو بالشكل الكلي عبارة عن مساحةٍ أرضيةٍ وسماويةٍ في الوقت عينه، ترصدها الآلهةُ وتحددها، ثم تتنازل عنها للناس لاحقًا <span class="footnote">(مقالة، www.perseus.tufts.edu، Templum، فقرة 4)</span>.</p>

	<p>ولكن لم يبنِ الإغريقُ المعابدَ بشكلٍ عشوائيٍ، بل بنوها بأسلوبٍ دقيقٍ يراعي أشدَّ مراعاةٍ أحاسيسَ الداخلين إليها. كانت الأقسامُ توزَّع بين القاعة الرئيسية، والبهو، والردهة الخلفية، والخلوة المعزولة، والسيلا (Cella) - أي قاعةٍ مخفيةٍ وخاصةٍ جدًا - والإيبينوس (Epinaos) - وهو حجرةٌ صغيرةٌ في السيلا - بالإضافة إلى البروناوس (pronaos) - وهي مساحةٌ خارجيةٌ محاذيةٌ للسيلا يحدها عددٌ محددٌ من الأعمدة، إما أربعةٌ أو ستةٌ أو عشرةٌ.</p>

	<figure>
	<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>
	</figure>

	<p>اختلفت المساحاتُ الهندسيةُ على مستوى مواد البناء. فبعضها يُبنى بالخشب ومنفصلٌ كليًا عن الأماكن التي تُبنى بالحجر والرخام والبرونز والذهب والفضة. كما كانت المساحاتُ تضيقُ وتتسعُ بشكلٍ فريدٍ جدًا. وأيضاً، لم يكن بناءُ التمبلوم عند الإغريق مسألةً عاديةً، بل كان بناءً معمارياً صارمًا <span class="footnote">(مقالة، www.perseus.tufts.edu، "Templum"، فقرة 6)</span>.</p>

	<p>ولم يكن بناءُ الفضاء المادي المنفصل والمنعزل مرتبطًا فقط بالهندسة، بل كان شكلاً من أشكال الفضاءات المادية التي تخزن فيما بينها عالمَ الروح ونبضَ القلب والعين، والمسؤولة عن افتعال التجارب الحسية المنعزلة. كانت بعضُ مساحات التمبلوم تفتعل سكينةً داخليةً وانقباضَ الذات إلى جوانية الصدر، وبعضها الآخر يعمل على انكشاف الذات نحو السماء.</p>

	<div class="section-divider"></div>

	<h2>النيومين الرقمي</h2>

	<p>ينشأ التمبلوم من خطوطٍ متخيلةٍ وخطوطٍ واقعيةٍ. إنه وسطٌ واقعيٌّ ينشأ عبر الهندسة المادية الواقعية، ويُفرز بين ثنايا الأعمدة والمساحات شروطَ إمكان الإحساس بوجود أشياءَ ليست إلا متخيلةً. إنه فضاءٌ ماديٌّ ينطوي على إمكانات الهندسة المتخيلة التي توحي بتغيراتٍ في البناء في حالةٍ إيهاميةٍ واستلابيةٍ، "تشير إلى تغييرٍ حتى في حالة عدم وجوده" <span class="footnote">(مقالة، www.perseus.tufts.edu， Templum، فقرة 11)</span>.</p>

	<p>لقد نظروا إلى معمارية التمبلوم كهندسةٍ ذاتيةٍ وبصريةٍ. لذلك يُشرعُ عالمُ الخطوط المرئية وغير المرئية رحلةَ المخيلة والروح نحو مستوياتَ حسيةٍ لا تتحقق إلا في حالاتٍ نادرةٍ، إذ إن المعماريةَ الساحرةَ جدًا عليها أن تتجاوز السطحيةَ وتتوجه بجوهرها كي تحقق الـ"نيومين" (Numen).</p>

	<figure>
	<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop"
	alt="النيومين الرقمي"
	class="w-full h-auto">
	<figcaption>تجسيد النيومين الرقمي في العصر الحديث (تصوير: روح الآلة)</figcaption>
	</figure>

	<p>والنيومين تعني <span class="digital-entity">"الروحَ التي تترأس شيئًا"</span> <span class="footnote">(Google Translator، كلمة NUMEN)</span>. تمثل النيومين "رهبةَ المكان" أو رهبة الروح" التي تستمر في إلقاء ظلالها على الذات، وفيضَ الأثر الذي يدمغه الفضاءُ في العقل والروح. هذه "الروح التي تترأس الشيء" أو رهبة الروح هي ما تمتاز به الميميز والإيموجيز والكائنات الرقميّة. تحضر إلينا وهي ممتلئة بالروح التي تترأس نفسها. تظهر علينا برهبة ذاتها.</p>

	<div class="quote">
	"ما كانت لتتكون رهبة التمبلوم، لو لم يهتم الإغريقُ ببعد 'فضاء المادة المنفصل' البصري، والذي وضعوا فيه ثقلَ أفكارهم وأحاسيسهم"
	</div>

	<p>لذلك، ما كانت لتتكون رهبة التمبلوم، لو لم يهتم الإغريقُ ببعد "فضاء المادة المنفصل" البصري، والذي وضعوا فيه ثقلَ أفكارهم وأحاسيسهم". إن النظامَ دقيقٌ للغاية من الخطوط المنحنية والمحاور المائلة... العينُ اليونانيةُ شديدةُ الحساسية... توضح، بشكلٍ أكثر وضوحًا من أي شيءٍ آخر، إلى أي مدى كانت التصوراتُ الجماليةُ والبصرُ المدروسُ بدقةٍ لليونانيين القدماء أعلى بكثيرٍ من تصوراتنا" <span class="footnote">(موقع، "https://www.perseus.tufts.edu/"، Templum، فقرة 27)</span>.</p>

	<p>وما كانت لتتكون رهبة الكائنات الرقمية لو لم يكن هذا العالم الحالي؛ خُلقَ لكي يكون مرئياً. فعبر "الروح التي تترأس الشيء"، وعبر البعد البصري والخطوط المائلة المرئية والخيوط الوهمية ولعبة الأضواء التي توحي بكثافةٍ وهميةٍ في المادة، تنشأ "أنطوفانيا" فضاء المادة المنفصل والمنعزل. نحن هنا أمام مثالٍ حيٍّ عن آلية نشوء كينونة المكان ورهبته التي تجعله يأتي إلى الناظرين ككيانٍ في ذاته.</p>

	<figure>
	<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>
	</figure>
	</section>
	</article>
	</div>

	<div class="scroll-indicator" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
	<i class="fas fa-arrow-up"></i>
	</div>

	<script>
	// Create floating emojis
	const emojis = ['👁️', '💾', '🖥️', '📱', '👾', '🤖', '🧿', '🔮', '🕹️', '🌐', '💻', '🔢', '🔣', '🎮', '🖱️', '⌨️', '📲', '🖨️', '🖲️', '💽'];
	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() * 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 < 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.3;
	drop.style.height = (10 + Math.random() * 30) + 'px';
	digitalRain.appendChild(drop);
	}

	// Scroll reveal animations with improved timing
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('visible');

	// For figures, add a slight delay between each one
	if (entry.target.tagName === 'FIGURE') {
	entry.target.style.transitionDelay = `${0.1 + Math.random() * 0.2}s`;
	}
	}
	});
	}, {
	threshold: 0.1,
	rootMargin: '0px 0px -100px 0px'
	});

	document.querySelectorAll('figure, .quote, .emoji-metaphysics').forEach(el => {
	observer.observe(el);
	});

	// Show/hide scroll indicator based on scroll position
	const scrollIndicator = document.querySelector('.scroll-indicator');
	window.addEventListener('scroll', () => {
	if (window.scrollY > 300) {
	scrollIndicator.classList.add('visible');
	} else {
	scrollIndicator.classList.remove('visible');
	}
	});

	// Add hover effect to digital entities
	const digitalEntities = document.querySelectorAll('.digital-entity');
	digitalEntities.forEach(entity => {
	entity.addEventListener('mouseenter', () => {
	entity.style.color = 'var(--secondary)';
	});
	entity.addEventListener('mouseleave', () => {
	entity.style.color = 'var(--primary)';
	});
	});

	// 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 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
	const headingObserver = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('animate__animated', 'animate__fadeInRight');
	}
	});
	}, {
	threshold: 0.5,
	rootMargin: '0px 0px -100px 0px'
	});

	document.querySelectorAll('h2, h3').forEach(el => {
	headingObserver.observe(el);
	});

	// Add interactive emoji tiles
	const emojiTiles = document.querySelectorAll('.emoji-tile');
	emojiTiles.forEach(tile => {
	tile.addEventListener('click', () => {
	tile.style.transform = 'scale(1.5) rotateY(180deg)';
	tile.style.background = 'rgba(229, 49, 112, 0.3)';
	setTimeout(() => {
	tile.style.transform = 'scale(1) rotateY(0)';
	tile.style.background = 'rgba(255, 137, 6, 0.1)';
	}, 1000);
	});
	});

	// 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>