/* ============================================================
   📄 الملف: style.css
   📌 الوظيفة: التحكم في شكل ومظهر المشهد (التنسيقات)
   🔄 الإصدار: 1.0
   📅 تاريخ الإنشاء: 2026-08-03
   ⏰ وقت الإنشاء: 07:00 صباحاً
   📂 المسار: 01_Platform/styles/style.css
   📝 الوصف: هذا الملف يتحكم في تنسيق الطبقات، الخلفية، الأزرار،
      حركة الباب، والمشهد النهائي.
   👤 بإشراف: أحمد
   ============================================================ */

/* ============================================================
   🎨 القاعدة العامة (الريست)
   ============================================================ */
* {
    margin: 0;              /* إلغاء الهوامش الخارجية */
    padding: 0;             /* إلغاء الحشو الداخلي */
    box-sizing: border-box; /* حساب العرض والارتفاع بشكل دقيق */
}

/* ============================================================
   🌌 تنسيق جسم الصفحة (body, html)
   ============================================================ */
body, html {
    width: 100%;            /* عرض الشاشة بالكامل */
    height: 100%;           /* ارتفاع الشاشة بالكامل */
    overflow: hidden;       /* إخفاء شريط التمرير (Scrollbar) */
    font-family: 'Times New Roman', serif; /* نوع الخط */
    background-color: #1a120d; /* لون الخلفية الأساسي (بني غامق) */
}

/* ============================================================
   🏛️ المشهد الرئيسي (#scene)
   ============================================================ */
#scene {
    position: relative;     /* يجعل العناصر بداخله تتراكب فوق بعضها */
    width: 100%;
    height: 100vh;          /* يملأ الشاشة بالكامل */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a120d;
}

/* ============================================================
   📐 الطبقات (القاعدة العامة)
   ============================================================ */
.layer {
    position: absolute;     /* يثبت العنصر في نفس المكان فوق الشاشة */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   🖼️ الصور داخل الطبقات
   ============================================================ */
.layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* تغطي الشاشة دون تشويه */
    display: block;
}

/* ============================================================
   🖼️ الطبقة الأولى: الخلفية الأساسية
   ============================================================ */
#layer-bg {
    z-index: 1;             /* الطبقة في الخلف، تحت كل العناصر */
}
#layer-bg img {
    width: 50%;             /* عرض الصورة (نسبة من الشاشة) */
    height: 73%;            /* ارتفاع الصورة (نسبة من الشاشة) */
    object-fit: cover;
    transform: scale(0.90); /* تكبير/تصغير (0.90) لتعطي إحساساً بالبعد */
}

/* ============================================================
   🖼️ الطبقة الثانية: القاعة (من غير باب)
   ============================================================ */
#layer-hall-no-door {
    z-index: 3;             /* أعلى من الخلفية قليلاً */
}
#layer-hall-no-door img {
    width: 106%;
    height: 105%;
    object-fit: cover;
}

/* ============================================================
   🚪 الطبقة الثالثة: الباب الخشبي
   ============================================================ */
#layer-door {
    z-index: 2;             /* الباب يغطي الفتحة في الخلفية */
    transition: transform 7s cubic-bezier(0.4, 0, 0.2, 1); /* سرعة الحركة (7 ثواني) */
    transform: translateY(0); /* الباب في مكانه الطبيعي */
}
#layer-door.slide-up {
    transform: translateY(-120vh); /* الباب يصعد لأعلى ويختفي */
}
#layer-door img {
    width: 45.5%;           /* عرض الباب */
    height: 65%;            /* ارتفاع الباب */
    object-fit: cover;
}

/* ============================================================
   🪔 الطبقة الرابعة: وهج الفوانيس (Glow effect)
   ============================================================ */
#layer-lantern-glow {
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(148, 144, 124, 0.7) 0%, rgba(255, 215, 0, 0.2) 40%, transparent 70%);
    opacity: 1;
    pointer-events: none;
    transition: opacity 4.5s ease;
}
#layer-lantern-glow.show {
    opacity: 0.6;
}

/* ============================================================
   🔘 الطبقة الخامسة: الزر الذهبي
   ============================================================ */
#layer-button {
    z-index: 5;             /* الزر في أعلى طبقة، فوق الكل */
    cursor: pointer;        /* تغيير شكل الماوس عند المرور على الزر */
    padding-top: 80vh;      /* مسافة من الأعلى، تنزل الزر تحت الباب */
}

/* شكل صورة الزر نفسها */
#enter-btn {
    width: auto;
    height: 30vh;           /* ارتفاع الزر (نسبة من الشاشة) */
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease; /* تأثير حركة وتغيير الإضاءة */
}

/* تأثير المرور على الزر (Hover) */
#enter-btn:hover {
    transform: scale(1.05); /* تكبير الزر قليلاً (1.05) */
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.7)); /* إضاءة ذهبية */
}

/* تأثير الضغط على الزر (Active) */
#enter-btn:active {
    transform: scale(0.95); /* تصغير الزر قليلاً عند الضغط (0.95) */
}

/* ============================================================
   💡 طبقة الجلوهات (فوق الكشافين)
   ============================================================ */
#layer-glows {
    z-index: 4;             /* تظهر فوق الباب وتحت الزر */
    pointer-events: none;   /* منع التفاعل عشان ما يمنع الضغط على الزر */
}

.glow {
    position: fixed;        /* مكان ثابت حتى لا يتغير عند التحديث */
    width: 50px !important; /* عرض الجلوه */
    height: 90px !important;/* ارتفاع الجلوه */
    background-color: #f0edc8; /* لون الإضاءة */
    border-radius: 50%;     /* لتصبح دائرية */
    opacity: 0.6;           /* درجة وضوح الإضاءة */
    filter: blur(15px);     /* ضبابية لتعطي إحساس بالنور المنتشر */
    transform: translate(-60%, -60%) scale(1) !important; /* تثبيت الحجم */
}

/* مكان الكشاف الأول */
#glow-1 {
    top: 45vh;              /* المسافة من الأعلى */
    left: 12.5vw;           /* المسافة من اليسار */
}

/* مكان الكشاف الثاني */
#glow-2 {
    top: 45vh;              /* المسافة من الأعلى */
    right: 9vw;             /* المسافة من اليمين */
}

/* ============================================================
   ✨ تأثير النور والوميض للجلوهات
   ============================================================ */

@keyframes pulse-glow {
    0% {                    /* البداية */
        opacity: 0.4;       /* شفافية خفيفة */
        transform: translate(-50%, -50%) scale(0.8); /* تبدأ صغيرة */
    }
    50% {                   /* المنتصف */
        opacity: 1;         /* أقصى وضوح */
        transform: translate(-50%, -50%) scale(1.2); /* تكبر قليلاً */
    }
    100% {                  /* النهاية */
        opacity: 0.4;       /* ترجع خفيفة */
        transform: translate(-50%, -50%) scale(0.8); /* ترجع صغيرة */
    }
}

.glow {
    animation: pulse-glow 2s ease-in-out infinite; /* حركة ناعمة مستمرة */
}

#glow-1 {
    animation: pulse-glow 1.5s ease-in-out infinite; /* حركة أسرع */
}

#glow-2 {
    animation: pulse-glow 2.5s ease-in-out infinite; /* حركة أبطأ */
}

/* ============================================================
   🏛️ المشهد النهائي (القاعة بالمكتب)
   ============================================================ */
#final-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;            /* أعلى من كل الطبقات */
    opacity: 0;             /* يبدأ مخفياً */
    pointer-events: none;   /* لا يمكن التفاعل معه وهو مخفي */
    transition: opacity 1.2s ease-in-out; /* سرعة الظهور */
    background-color: #1a120d;
}
#final-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#final-scene.show {
    opacity: 1;             /* يصبح مرئياً بالكامل */
    pointer-events: auto;   /* يمكن التفاعل معه */
}

/* ============================================================
   📱 تعديلات التصميم المتجاوب (Responsive)
   ============================================================ */

/* شاشات الموبايل (عرض أقل من 768 بكسل) */
@media (max-width: 768px) {
    #layer-bg img {
        width: 100%;
        height: 100%;
        transform: scale(1);
    }

    #layer-hall-no-door img {
        width: 100%;
        height: 100%;
    }

    #layer-door img {
        width: 80%;
        height: 60%;
    }

    #layer-button {
        padding-top: 75vh;
    }

    #enter-btn {
        height: 10vh;
    }

    #glow-1 {
        top: 45vh;
        left: 15vw;
    }

    #glow-2 {
        top: 45vh;
        right: 12vw;
    }
}

/* شاشات التابلت (عرض بين 769 و 1024 بكسل) */
@media (min-width: 769px) and (max-width: 1024px) {
    #layer-bg img {
        width: 70%;
        height: 85%;
    }

    #layer-door img {
        width: 60%;
        height: 70%;
    }

    #layer-button {
        padding-top: 72vh;
    }
}

/* ============================================================
   🗓️ آخر تحديث: 7 سبتمبر ٢٠٢٦ - 🕒 ٠٧:٠٠ صباحاً
   👤 بإشراف: أحمد
   ✅ نهاية الملف
   ============================================================ */