@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&family=Cairo:wght@400;700;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #000;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
    color: white;
}

/* تأثير خطوط الشاشة السينمائية */
body::after {
    content: " ";
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 100; /* فوق كل شيء */
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}

#loader {
    position: fixed; width: 100%; height: 100%; background: #000;
    z-index: 999; display: flex; justify-content: center; align-items: center;
}

#bac-canvas { 
    position: fixed; top: 0; left: 0; 
    z-index: -1; /* خلف المحتوى تماماً */
}

.content {
    position: relative; 
    z-index: 10; /* فوق السديم */
    height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.6) 100%);
    text-align: center;
}

.main-logo {

width: 400px; /* زودنا الحجم من 250 لـ 400 عشان يملى العين */
    height: auto;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.7)); /* زودنا قوة الوهج */
    transition: transform 0.5s ease, filter 0.5s ease;
    animation: pulseLogo 3s infinite alternate;
    image-rendering: -webkit-optimize-contrast;
}

/* وتأكد إن حجمه في الموبايل لسه مناسب */
@media (max-width: 768px) {
    .main-logo { 
        width: 250px; /* في الموبايل هنخليه 250 بدل 180 */
    }
}

@keyframes pulseLogo {
    from { transform: scale(1); filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.6)); }
    to { transform: scale(1.03); filter: drop-shadow(0 0 25px rgba(0, 212, 255, 0.9)); }
}

.bac-tagline { font-size: 2rem; font-weight: 700; margin: 25px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

.countdown-container { display: flex; gap: 20px; margin-bottom: 40px; }

.time-box {
    background: rgba(255, 255, 255, 0.05); padding: 15px 25px;
    border-radius: 12px; border: 1px solid rgba(0, 212, 255, 0.3);
    backdrop-filter: blur(10px);
}

.time-box span { font-size: 2.2rem; font-weight: 900; color: #ff8c00; display: block; }

.btn-neon {
    position: relative; padding: 15px 40px; color: #00d4ff;
    text-decoration: none; text-transform: uppercase; font-weight: 900;
    border: 1px solid rgba(0, 212, 255, 0.5); transition: 0.3s;
}

.btn-neon:hover { background: #00d4ff; color: #000; box-shadow: 0 0 30px #00d4ff; }