/* landing.css */
/* -------------------------------------------------------------
 * هندسة وتصميم واجهة مستخدم منصة جمالي
 * فلسفة التصميم الإطاري الدقيق (High-End Wired/Grid Editorial Design)
 * ------------------------------------------------------------- */

/* لوحة الألوان الترابية والعاجية والخطوط */
:root {
  --color-canvas: #fcfbfa;       /* ورق عاجي دافئ وناعم */
  --color-text-primary: #0f172a; /* Slate 900 */
  --color-text-secondary: #475569; /* Slate 600 */
  --color-earth-deep: #705e4c;   /* بني ترابي دافئ عميق (Taupe) */
  --color-earth-light: #b0a190;  /* ترابي مطفأ فاتح */
  --color-border-thin: rgba(226, 232, 240, 0.8); /* حدود رمادية بالغة النحافة */
  --color-border-active: #94a3b8; /* حدود رمادية نشطة */
  --transition-tactile: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* توقيت استجابة مجهري هادئ */
}

/* تهيئة الخلفية العامة وتأثير ورق المجلات النخبوية */
body {
  background-color: var(--color-canvas) !important;
  color: var(--color-text-primary);
  font-family: 'Tajawal', sans-serif;
  letter-spacing: -0.01em;
}

/* ترقيم مجهري بنمط أحادي المسافة للجدية والاحترافية (Monospace Specs) */
.mono-spec {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-earth-deep);
}

/* الهيكل الإطاري الشبكي (The Wired Grid Layout) */
.wired-grid {
  border: 1px solid var(--color-border-thin);
}

.wired-border-b {
  border-bottom: 1px solid var(--color-border-thin);
}

.wired-border-r {
  border-right: 1px solid var(--color-border-thin);
}

.wired-border-l {
  border-left: 1px solid var(--color-border-thin);
}

.wired-border-t {
  border-top: 1px solid var(--color-border-thin);
}

/* خلايا الشبكة التفاعلية (Tactile Compartments) */
.grid-compartment {
  position: relative;
  background-color: transparent;
  transition: var(--transition-tactile);
  border: 1px solid var(--color-border-thin);
}

.grid-compartment::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-earth-deep);
  opacity: 0;
  transition: var(--transition-tactile);
  z-index: 0;
}

.grid-compartment:hover {
  border-color: var(--color-earth-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(112, 94, 76, 0.08);
}

.grid-compartment:hover * {
  z-index: 1;
}

/* تفاعل الأزرار الإطارية النخبوية */
.btn-minimal-dark {
  background-color: var(--color-text-primary);
  color: #ffffff;
  border: 1px solid var(--color-text-primary);
  transition: var(--transition-tactile);
}

.btn-minimal-dark:hover {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  transform: translateY(-1px);
}

.btn-minimal-light {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-thin);
  transition: var(--transition-tactile);
}

.btn-minimal-light:hover {
  background-color: rgba(112, 94, 76, 0.05);
  border-color: var(--color-earth-deep);
  color: var(--color-earth-deep);
  transform: translateY(-1px);
}

/* تفاعل روابط الهيدر (Slide-in Minimal Underline) */
.nav-link-minimal {
  position: relative;
  color: var(--color-text-secondary);
  transition: var(--transition-tactile);
}

.nav-link-minimal::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  right: 50%;
  background-color: var(--color-earth-deep);
  transition: var(--transition-tactile);
}

.nav-link-minimal:hover {
  color: var(--color-text-primary);
}

.nav-link-minimal:hover::after {
  width: 100%;
  right: 0;
}

/* تأثير الماك اب الدقيق لمحاكاة لوحة التحكم بدون أشكال معتادة */
.editorial-mockup {
  border: 1px solid var(--color-border-thin);
  background: #ffffff;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.05);
  position: relative;
}

.editorial-mockup-header {
  height: 36px;
  border-bottom: 1px solid var(--color-border-thin);
  background-color: #faf9f6;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cbd5e1;
}

/* أنيميشن خفيف متزن يعبر عن المجلات الفاخرة */
.reveal-editorial {
  animation: revealEditorial 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(15px);
}

@keyframes revealEditorial {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* تأثير الزجاج العاجي الفاخر للهيدر */
.glass-nav {
  background: rgba(252, 251, 250, 0.97); /* عاجي دافئ بلوري متناغم بالكامل مع نسيج الصفحة ومريح للعين */
  border-bottom: 1px solid rgba(112, 94, 76, 0.08);
}

/* تنسيقات قالب هاتف الآيفون المصمم برمجياً بالكامل 100% CSS */
.iphone-chassis {
  width: 250px;
  height: 500px;
  background-color: #0f172a; /* معدن داكن فاخر */
  border: 7px solid #1e293b; /* الإطار الخارجي المعدني للآيفون */
  border-radius: 2.5rem;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 
              inset 0 0 10px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
              
  /* 🛡️ الترقية المعمارية لحل مشكلة كروم الموبايل (GPU & Masking) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* تهيئة وتطويع أبعاد الهاتف وحوافه لتناسب شاشات الجوال بذكاء ودقة */
@media (max-width: 768px) {
  .iphone-chassis {
    width: 210px; /* تصغير طفيف للعرض لراحة معالجة العرض */
    height: 420px; /* تصغير طفيف للارتفاع ليحافظ على النسبة الذهبية للأبعاد */
    border-radius: 2.1rem;
    border-width: 5px; /* تنحيف طفيف للإطار الخارجي ليتناسق مع الحجم الجديد */
    
    /* 🛡️ التحديث المعماري: إجبار المتصفح على إعادة حساب الاقتطاع بناءً على الحواف الجديدة */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  
  .iphone-screen {
    border-radius: 1.8rem;
    
    /* 🛡️ التحديث المعماري: تأكيد العزل وتسريع الرسوميات (GPU) في وضع الجوال حصراً */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  .iphone-dynamic-island {
    width: 60px;
    height: 14px;
    top: 10px;
  }
}

/* الجزيرة التفاعلية للكاميرا في الأعلى (Dynamic Island) */
.iphone-dynamic-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background-color: #000000;
  border-radius: 9999px;
  z-index: 20;
}

/* شاشة الآيفون وحاوية صورة التطبيق الحية */
.iphone-screen {
  position: absolute;
  inset: 4px;
  border-radius: 2.1rem;
  overflow: hidden;
  background-color: var(--color-canvas);
  z-index: 10;
}

/* استجابة الهاتف اللمسية والميلان عند الوقوف بالماوس */
.iphone-chassis:hover {
  transform: scale(1.02) rotate(1deg) !important;
  box-shadow: 0 35px 80px -20px rgba(112, 94, 76, 0.35) !important;
}

/* كلاسات الظهور التدريجي الفاخر عند التمرير (Scroll Reveal Engine) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* حركات عوم الهاتف المجهرية (Subtle Parallax) */
.parallax-phone {
  will-change: transform;
  transform: rotate(-1deg);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* شارات وأزرار التحميل الأحادية النخبوية لـ App Store و Google Play */
.badge-minimal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border-thin);
  background-color: #ffffff;
  color: var(--color-text-primary);
  transition: var(--transition-tactile);
  cursor: pointer;
}

.badge-minimal:hover {
  border-color: var(--color-earth-deep);
  color: var(--color-earth-deep);
  background-color: rgba(112, 94, 76, 0.03);
  transform: translateY(-0.5px);
}