/* =========================================
   ملف ستايل علامات الساعة - V7 (Seamless Loop & Dense Stars)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;700&display=swap');

:root {
    --void-bg: #05000a;
    --accent-red: #8b0000;
    --gold-warning: #ffcc00;
    --text-white: #ffffff;
    --card-bg: rgba(20, 5, 10, 0.9);
    --glass-border: rgba(255, 69, 0, 0.3);
}

body {
    margin: 0; padding: 0; overflow-x: hidden;
    min-height: 100vh; font-family: 'Amiri', serif;
    background-color: var(--void-bg);
    padding-bottom: 100px;
}

/* =========================================
   1. خلفية الكون الكثيفة (Dense Starfield)
   ========================================= */
.space-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at bottom, #1b0000 0%, #05000a 40%, #000000 100%);
    z-index: -10;
}

/* النجوم المتحركة (3 طبقات للكثافة والعمق) */
.stars-1, .stars-2, .stars-3 {
    position: fixed; top: 0; left: 0; width: 2px; height: 2px;
    background: transparent; z-index: -9;
    animation: animateStars 100s linear infinite;
    opacity: 0.8;
}

/* الطبقة الأولى (نجوم كبيرة وقريبة) */
.stars-1 {
    width: 3px; height: 3px;
    box-shadow: 
        10vw 20vh #fff, 20vw 80vh #fff, 30vw 40vh #fff, 40vw 10vh #fff, 
        50vw 90vh #fff, 60vw 30vh #fff, 70vw 70vh #fff, 80vw 50vh #fff, 
        90vw 20vh #fff, 15vw 60vh #fff, 35vw 15vh #fff, 55vw 85vh #fff,
        75vw 45vh #fff, 95vw 95vh #fff, 5vw 5vh #fff;
    animation-duration: 100s;
}

/* الطبقة الثانية (نجوم متوسطة - كثافة عالية) */
.stars-2 {
    width: 2px; height: 2px;
    box-shadow: 
        12vw 22vh #ccc, 22vw 82vh #ccc, 32vw 42vh #ccc, 42vw 12vh #ccc, 
        52vw 92vh #ccc, 62vw 32vh #ccc, 72vw 72vh #ccc, 82vw 52vh #ccc, 
        92vw 22vh #ccc, 17vw 62vh #ccc, 37vw 17vh #ccc, 57vw 87vh #ccc,
        77vw 47vh #ccc, 97vw 97vh #ccc, 7vw 7vh #ccc, 25vw 25vh #ccc,
        45vw 45vh #ccc, 65vw 65vh #ccc, 85vw 85vh #ccc;
    animation-duration: 150s; opacity: 0.6;
}

/* الطبقة الثالثة (نجوم بعيدة جداً - غبار كوني) */
.stars-3 {
    width: 1px; height: 1px;
    box-shadow: 
        5vw 15vh #aaa, 15vw 35vh #aaa, 25vw 55vh #aaa, 35vw 75vh #aaa,
        45vw 95vh #aaa, 55vw 15vh #aaa, 65vw 35vh #aaa, 75vw 55vh #aaa,
        85vw 75vh #aaa, 95vw 95vh #aaa, 10vw 50vh #aaa, 20vw 10vh #aaa,
        30vw 60vh #aaa, 40vw 20vh #aaa, 50vw 70vh #aaa, 60vw 30vh #aaa,
        70vw 80vh #aaa, 80vw 40vh #aaa, 90vw 90vh #aaa, 100vw 10vh #aaa;
    animation-duration: 200s; opacity: 0.4;
}

@keyframes animateStars { from { transform: translateY(0); } to { transform: translateY(-100vh); } }

/* الكواكب والنيازك (كما هي) */
.planet { position: fixed; border-radius: 50%; z-index: -8; box-shadow: inset -10px -10px 30px rgba(0,0,0,0.8); }
.planet-red { top: 15%; left: 10%; width: 100px; height: 100px; background: radial-gradient(circle at 30% 30%, #ff4500, #3a0000); animation: floatPlanet 20s infinite alternate ease-in-out; box-shadow: 0 0 20px rgba(255, 69, 0, 0.3); }
.planet-blue { bottom: 20%; right: 5%; width: 60px; height: 60px; background: radial-gradient(circle at 30% 30%, #4facfe, #000); animation: floatPlanet 30s infinite alternate-reverse ease-in-out; opacity: 0.7; }
@keyframes floatPlanet { from { transform: translateY(0); } to { transform: translateY(-20px); } }
.meteor { position: fixed; top: 50%; right: -200px; width: 300px; height: 3px; background: linear-gradient(to left, rgba(255,69,0,0), #ff4500, #fff); z-index: -7; transform: rotate(-15deg); opacity: 0; filter: drop-shadow(0 0 10px #ff4500); animation: meteorShower 7s linear infinite; }
.meteor::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px #ff4500, 0 0 30px #ff4500; }
.meteor-1 { top: 20%; animation-delay: 0s; animation-duration: 8s; }
.meteor-2 { top: 70%; animation-delay: 4s; animation-duration: 6s; width: 200px; }
.meteor-3 { top: 40%; animation-delay: 2s; animation-duration: 10s; width: 400px; }
@keyframes meteorShower { 0% { transform: translateX(0) rotate(-15deg); opacity: 1; } 100% { transform: translateX(-150vw) rotate(-15deg); opacity: 0; } }

/* --- القوائم والهيدر (كما هي) --- */
.nav-glass { background: rgba(15, 23, 42, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); font-family: 'Reem Kufi', sans-serif !important; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.nav-link { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.1rem; transition: color 0.3s; }
.nav-link:hover { color: var(--gold-warning); }
.apocalypse-header { text-align: center; padding: 100px 20px 50px; position: relative; z-index: 10; }
.main-title { font-family: 'Reem Kufi', sans-serif; font-size: 4.5rem; background: linear-gradient(to bottom, #ffcc00, #ff4500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(255, 69, 0, 0.6)); margin-bottom: 40px; animation: titlePulse 3s infinite alternate; }
@keyframes titlePulse { from { transform: scale(1); } to { transform: scale(1.02); } }
.verse-box { background: rgba(0, 0, 0, 0.5); border: 2px solid var(--gold-warning); border-radius: 25px; padding: 40px; max-width: 800px; margin: 0 auto; position: relative; box-shadow: 0 0 40px rgba(255, 204, 0, 0.15); }
.verse-box::before, .verse-box::after { content: '۞'; font-size: 2.5rem; color: var(--gold-warning); position: absolute; top: 50%; transform: translateY(-50%); }
.verse-box::before { left: 20px; } .verse-box::after { right: 20px; }
.verse-text { color: #fff; font-size: 2.2rem; line-height: 1.8; font-weight: 700; text-shadow: 0 2px 10px #000; font-family: 'Amiri', serif; }
.section-title { text-align: center; font-family: 'Reem Kufi', sans-serif; font-size: 2.8rem; color: #e0e0e0; margin: 60px 0 40px; border-bottom: 3px solid var(--accent-red); display: inline-block; padding-bottom: 10px; text-shadow: 0 0 10px rgba(255,0,0,0.5); }
.minor-signs-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
.minor-sign-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; }
.minor-sign-card:hover { background: rgba(255, 69, 0, 0.15); border-color: var(--gold-warning); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.icon-wrapper { width: 55px; height: 55px; background: linear-gradient(135deg, #8b0000, #3a0000); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; box-shadow: 0 0 15px rgba(139, 0, 0, 0.5); border: 2px solid rgba(255,255,255,0.1); animation: iconFloat 3s infinite ease-in-out; }
.minor-sign-card:hover .icon-wrapper { animation: iconSpin 0.8s ease; background: var(--gold-warning); color: #000; }
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes iconSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.minor-text { color: #d1d5db; font-size: 1.1rem; font-weight: 600; }
.signs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 50px; max-width: 1300px; margin: 0 auto; padding: 20px; }
.doomsday-card { position: relative; background: var(--card-bg); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 10px 50px rgba(0,0,0,0.7); }
.doomsday-card:hover { transform: translateY(-15px); border-color: var(--gold-warning); box-shadow: 0 20px 70px rgba(255, 69, 0, 0.3); }
.card-watermark { position: absolute; top: -15px; left: -10px; font-family: 'Reem Kufi', sans-serif; font-size: 9rem; font-weight: 900; color: rgba(255, 255, 255, 0.04); line-height: 1; pointer-events: none; transition: 0.4s; z-index: 0; }
.doomsday-card:hover .card-watermark { color: rgba(255, 204, 0, 0.1); transform: scale(1.1) rotate(-10deg); }

/* --- إطار الفيديو (تم تحديثه للتلاشي المتداخل) --- */
.card-media {
    height: 240px; width: 100%;
    background: #000; /* الخلفية السوداء مهمة للتلاشي */
    position: relative; z-index: 1;
    border-bottom: 3px solid var(--accent-red);
    overflow: hidden;
}
.card-media video {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 1; /* الشفافية الافتراضية */
    transition: opacity 1s ease-in-out; /* سرعة التلاشي 1 ثانية */
}
.card-media video.fade-out {
    opacity: 0; /* حالة الاختفاء */
}
.doomsday-card:hover .card-media video { transform: scale(1.1); }

.card-body { padding: 30px 25px; position: relative; z-index: 1; text-align: center; }
.card-title { font-family: 'Reem Kufi', sans-serif; font-size: 1.8rem; color: #fff; margin-bottom: 15px; text-shadow: 0 4px 10px rgba(0,0,0,0.8); position: relative; display: inline-block; }
.title-gold { color: var(--gold-warning); }
.title-red { color: #ff4444; }
.card-text { color: #ffffff; font-size: 1.3rem; line-height: 1.8; font-weight: 500; text-shadow: 0 2px 4px #000, 0 0 10px rgba(255,255,255,0.2); }
.order-tag { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.3); padding: 6px 14px; border-radius: 20px; font-size: 0.9rem; color: #fff; backdrop-filter: blur(5px); z-index: 2; font-family: 'Reem Kufi', sans-serif; }

@media (max-width: 768px) {
    .main-title { font-size: 3.5rem; }
    .verse-text { font-size: 1.6rem; }
    .signs-grid { grid-template-columns: 1fr; }
}