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

body {
    margin: 0; padding: 0;
    font-family: 'Cairo', sans-serif;
    background: #010308; 
    color: #ffffff;
    overflow-x: hidden;
}

#glcanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#content { position: relative; z-index: 10; }
.scene { height: 100vh; width: 100vw; display: flex; align-items: center; box-sizing: border-box; padding: 0 5%; }

/* --- نظام آبل الجانبي --- */
#side-nav { position: fixed; right: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 50; }
html[dir="ltr"] #side-nav { right: auto; left: 40px; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: all 0.4s ease; cursor: pointer; }
.nav-dot.active { height: 35px; border-radius: 4px; background: #0ea5e9; box-shadow: 0 0 15px rgba(14, 165, 233, 0.6); }

/* --- مؤشر التمرير السفلي --- */
/* --- مؤشر التمرير السفلي والنص --- */
#scroll-indicator { 
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 50; 
    animation: bounce 2s infinite ease-in-out; 
    pointer-events: none;
    opacity: 0.8;
}
#scroll-indicator span {
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.6);
}
#scroll-indicator svg { 
    width: 35px; 
    height: 35px; 
    color: #0ea5e9; 
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.8)); 
}
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 12px); } }
/* --- الحاويات الأساسية --- */
.text-panel { opacity: 0; transform: translateY(30px); width: 45%; }
.visual-panel { opacity: 0; transform: scale(0.9); width: 45%; display: flex; justify-content: center; align-items: center; height: 400px; }

/* في النسخة العربية: كل النصوص يجب أن تكون محاذاتها لليمين بغض النظر عن مكانها */
html[dir="rtl"] .right-panel { margin-right: 5%; margin-left: auto; text-align: right; }
html[dir="rtl"] .left-panel { margin-left: 5%; margin-right: auto; text-align: right; }

/* في النسخة الإنجليزية: كل النصوص يجب أن تكون محاذاتها لليسار بغض النظر عن مكانها */
html[dir="ltr"] .right-panel { margin-left: 5%; margin-right: auto; text-align: left; }
html[dir="ltr"] .left-panel { margin-right: 5%; margin-left: auto; text-align: left; }
.center-panel { margin: 0 auto; width: 100%; text-align: center; }

/* ========================================= */
/* حركات الأشكال التفاعلية */
/* ========================================= */

.pro-radar { width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(45, 212, 191, 0.3); position: relative; box-shadow: inset 0 0 40px rgba(45,212,191,0.1); }
.radar-beam { position: absolute; width: 50%; height: 50%; top: 0; left: 50%; background: linear-gradient(45deg, rgba(45, 212, 191, 0.8) 0%, transparent 70%); transform-origin: 0 100%; animation: radarSpin 2s linear infinite; }
.radar-wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid #2dd4bf; animation: waveExpand 3s infinite linear; }
.w1 { animation-delay: 0s; } .w2 { animation-delay: 1.5s; }
.radar-ping { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff, 0 0 20px #2dd4bf; opacity: 0; }
.p1 { top: 30%; left: 60%; animation: ping 2s 0.5s infinite; }
.p2 { top: 70%; left: 30%; animation: ping 2s 1.5s infinite; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes waveExpand { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 100%; height: 100%; opacity: 0; } }
@keyframes ping { 0%, 10% { opacity: 1; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(2); } }

.pro-cross { position: relative; width: 120px; height: 120px; animation: crossFloat 4s infinite ease-in-out; }
.cross-v { position: absolute; top: 0; left: 40px; width: 40px; height: 120px; background: #f87171; border-radius: 6px; box-shadow: 0 0 30px rgba(248, 113, 113, 0.4); }
.cross-h { position: absolute; top: 40px; left: 0; width: 120px; height: 40px; background: #f87171; border-radius: 6px; box-shadow: 0 0 30px rgba(248, 113, 113, 0.4); }
.cross-pulse { position: absolute; top: 30px; left: 30px; width: 60px; height: 60px; background: #fff; border-radius: 50%; filter: blur(15px); animation: crossBeat 1.5s infinite alternate; }
@keyframes crossFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes crossBeat { to { transform: scale(1.5); opacity: 0.2; } }

.pro-buildings { display: flex; align-items: flex-end; gap: 15px; height: 180px; border-bottom: 2px solid rgba(96, 165, 250, 0.3); padding-bottom: 5px; }
.bldg { width: 45px; background: rgba(30, 58, 138, 0.5); border: 2px solid #3b82f6; border-bottom: none; border-radius: 4px 4px 0 0; position: relative; overflow: hidden; }
.b1 { height: 100px; } .b2 { height: 160px; } .b3 { height: 120px; }
.scanner { position: absolute; top: -10px; left: 0; width: 100%; height: 5px; background: #fff; box-shadow: 0 0 15px 5px #60a5fa; animation: bldgScan 2s infinite linear alternate; }
.delay-1 { animation-delay: 0.5s; } .delay-2 { animation-delay: 1s; }
@keyframes bldgScan { to { top: 100%; } }

.new-career-stairs { display: flex; align-items: flex-end; gap: 10px; height: 160px; position: relative; }
.step { width: 30px; background: rgba(168, 85, 247, 0.1); border-top: 3px solid #a855f7; border-right: 3px solid #a855f7; border-radius: 0 4px 0 0; animation: stepGlow 2s infinite alternate; }
html[dir="ltr"] .step { border-right: none; border-left: 3px solid #a855f7; border-radius: 4px 0 0 0; }
.st-1 { height: 40px; animation-delay: 0s; }
.st-2 { height: 80px; animation-delay: 0.3s; }
.st-3 { height: 120px; animation-delay: 0.6s; }
.st-4 { height: 160px; animation-delay: 0.9s; }
.career-arrow { position: absolute; left: 10px; bottom: 50px; width: 60px; height: 60px; filter: drop-shadow(0 0 15px #a855f7); animation: arrowShoot 2s infinite cubic-bezier(0.25, 1, 0.5, 1); }
html[dir="ltr"] .career-arrow { left: auto; right: 10px; transform: scaleX(-1); }
@keyframes stepGlow { to { background: rgba(168, 85, 247, 0.4); box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); } }
@keyframes arrowShoot { 0% { transform: translateY(20px) scale(0.8); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-40px) scale(1.1); opacity: 0; } }

.pro-network { position: relative; width: 180px; height: 180px; transform-style: preserve-3d; animation: netSpin 8s infinite linear; }
.orbit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed rgba(251, 191, 36, 0.4); border-radius: 50%; }
.x { transform: rotateX(60deg); } .y { transform: rotateY(60deg); } .z { transform: rotateZ(60deg) rotateX(45deg); }
.dot { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fbbf24; border-radius: 50%; box-shadow: 0 0 20px #fbbf24; }
.core-globe { position: absolute; top: 35%; left: 35%; width: 30%; height: 30%; background: radial-gradient(circle, #fcd34d, #d97706); border-radius: 50%; box-shadow: 0 0 40px #fbbf24; animation: pulseOrb 2s infinite alternate; }
@keyframes netSpin { to { transform: rotateY(360deg) rotateX(360deg); } }
@keyframes pulseOrb { to { transform: scale(1.2); } }

.pro-research { position: relative; width: 140px; height: 190px; border: 3px solid #22d3ee; border-radius: 12px; padding: 25px 15px; box-sizing: border-box; background: rgba(34, 211, 238, 0.05); box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.2), 0 0 20px rgba(34, 211, 238, 0.2); overflow: hidden; animation: floatBriefcase 3s infinite ease-in-out; }
.doc-line { height: 8px; background: #22d3ee; margin-bottom: 15px; border-radius: 4px; opacity: 0.6; }
.doc-scanner { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #fff; box-shadow: 0 0 15px 5px #22d3ee; animation: scanDoc 2.5s infinite alternate ease-in-out; }
@keyframes floatBriefcase { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes scanDoc { 0% { top: 5%; } 100% { top: 95%; } }

.new-time-guardian { position: relative; width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; animation: floatBriefcase 4s infinite ease-in-out; }
.timer-shield { width: 100%; height: 100%; filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4)); }
.time-track { fill: none; stroke: rgba(74, 222, 128, 0.1); stroke-width: 4; }
.time-progress { fill: none; stroke: #4ade80; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 125; stroke-dashoffset: 125; transform: rotate(-90deg); transform-origin: 50% 45%; animation: timeCountdown 4s infinite linear; }
.clock-hand { stroke: #4ade80; stroke-width: 3; stroke-linecap: round; transform-origin: 50% 45%; animation: clockSpin 4s infinite linear; }
@keyframes timeCountdown { 0% { stroke-dashoffset: 125; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes clockSpin { 0% { transform: rotate(0deg); } 50%, 100% { transform: rotate(360deg); } }

.pro-watch { width: 220px; height: 220px; border-radius: 50px; border: 10px solid #334155; background: radial-gradient(circle, #1e293b, #0f172a); display: flex; align-items: center; position: relative; box-shadow: 0 0 40px rgba(14, 165, 233, 0.2); animation: watchPulse 2s infinite alternate; }
.watch-screen { width: 100%; height: 100%; overflow: hidden; position: relative; }
.ekg-line { width: 100%; height: 100%; }
.ekg-dot { filter: drop-shadow(0 0 12px #fff); box-shadow: 0 0 20px #fff; }
@keyframes watchPulse { to { box-shadow: 0 0 60px rgba(14, 165, 233, 0.6); border-color: #475569; } }

.pro-shield-heart { position: relative; width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; }
.heart { width: 90px; height: 90px; animation: heartBeat 1.2s infinite; filter: drop-shadow(0 0 20px #f97316); z-index: 2; }
.shield-ring { position: absolute; width: 140px; height: 140px; border: 4px dashed #fdba74; border-radius: 50%; animation: spin 5s linear infinite; box-shadow: 0 0 30px rgba(253, 186, 116, 0.3); }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.2); } }
@keyframes spin { 100% { transform: rotate(360deg); } }

.pro-qr { width: 160px; height: 160px; background: rgba(56, 189, 248, 0.05); position: relative; box-shadow: inset 0 0 40px rgba(56, 189, 248, 0.2); }
.qr-corners { position: absolute; width: 30px; height: 30px; border: 4px solid #38bdf8; }
.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }
.qr-blocks { position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(56,189,248,0.5) 10px, rgba(56,189,248,0.5) 20px); animation: qrGlitch 2s infinite step-end; }
.qr-laser { position: absolute; top: 0; left: -10%; width: 120%; height: 3px; background: #fff; box-shadow: 0 0 20px 5px #38bdf8; animation: laserScan 2.5s infinite ease-in-out alternate; }
@keyframes qrGlitch { 50% { opacity: 0.5; transform: scale(0.95); } }
@keyframes laserScan { 0% { top: 10%; } 100% { top: 90%; } }

/* ========================================= */
/* 11. NAWA AI (شعار N الاحترافي ثلاثي الأبعاد) */
/* ========================================= */
.nawa-3d-logo-container {
    position: relative;
    width: 260px;
    height: 260px;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nawa-premium-svg {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: floatN 6s infinite ease-in-out alternate;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
}
.ai-orbit {
    transform-origin: 110px 100px;
    animation: spinOrbit 25s linear infinite;
}
.ai-orbit-reverse {
    transform-origin: 110px 100px;
    animation: spinOrbitRev 20s linear infinite;
}
.n-piece-1 { animation: pulsePiece 3s infinite alternate ease-in-out; }
.n-piece-3 { animation: pulsePiece 3s infinite alternate-reverse ease-in-out; }

@keyframes floatN {
    0% { 
        transform: rotateY(-15deg) rotateX(10deg) translateY(0); 
        filter: drop-shadow(0 15px 15px rgba(20, 184, 166, 0.2)); 
    }
    100% { 
        transform: rotateY(15deg) rotateX(-5deg) translateY(-20px); 
        filter: drop-shadow(0 25px 25px rgba(79, 70, 229, 0.5)); 
    }
}
@keyframes spinOrbit { 100% { transform: rotate(360deg); } }
@keyframes spinOrbitRev { 100% { transform: rotate(-360deg); } }
@keyframes pulsePiece {
    0% { filter: brightness(1) drop-shadow(3px 5px 4px rgba(0,0,0,0.4)); }
    100% { filter: brightness(1.2) drop-shadow(5px 10px 15px rgba(59,130,246,0.6)); }
}

/* ========================================= */
/* 12. صانع الوجبات (التفاحة الرقمية)        */
/* ========================================= */
.new-smart-food { position: relative; width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; }
.digital-apple { width: 100%; height: 100%; filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.5)); }
.apple-outline { fill: rgba(16, 185, 129, 0.1); stroke: #10b981; stroke-width: 3; stroke-linejoin: round; }
.apple-leaf { fill: none; stroke: #10b981; stroke-width: 3; stroke-linecap: round; }
.apple-grid { stroke: rgba(16, 185, 129, 0.4); stroke-width: 2; stroke-dasharray: 4 4; }
.food-scanner { position: absolute; top: 10%; left: 10%; width: 80%; height: 4px; background: #fff; box-shadow: 0 0 20px 5px #10b981; animation: foodScan 2.5s infinite alternate ease-in-out; }
@keyframes foodScan { 0% { top: 15%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: 85%; opacity: 0; } }

/* ========================================= */
/* الخاتمة (ألوان متدرجة مطابقة للشعار)      */
/* ========================================= */
.final-logo-wrapper { position: relative; }
.final-grehala {
    font-size: 14vw; font-weight: 900; margin: 0;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,0.1);
    background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 40%, #3b82f6 70%, #4f46e5 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    animation: nawaGradientFlow 5s ease infinite alternate;
    position: relative;
}
.final-grehala::before {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    color: transparent;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
    -webkit-background-clip: text; background-clip: text;
    filter: blur(25px); z-index: -1;
    animation: sweepGlow 4s ease-in-out infinite alternate;
}
@keyframes nawaGradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
@keyframes sweepGlow { 0% { background-position: -100% center; } 100% { background-position: 200% center; } }

.apple-btn {
    background: #ffffff; color: #010308; font-weight: 900; border-radius: 50px; border: none; cursor: pointer; box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1); transition: 0.4s;
}
.apple-btn:hover { color: white; transform: translateY(-5px); box-shadow: 0 20px 50px rgba(14, 165, 233, 0.6); }

::-webkit-scrollbar { display: none; }

/* ========================================= */
/* استجابة الموبايل                          */
/* ========================================= */
@media (max-width: 768px) {
    .scene { 
        flex-direction: column !important; 
        justify-content: center; 
        gap: 20px; 
        padding: 0 20px;
    }
    
    .visual-panel { 
        width: 100%; 
        height: 200px; 
        order: 1 !important; 
        transform: scale(0.8);
        margin: 0 !important;
    }
    
    .text-panel { 
        width: 100%; 
        order: 2 !important; 
        text-align: center !important;
        margin: 0 !important;
        transform: translateY(10px);
    }

    .text-panel p { margin-left: auto; margin-right: auto; }
    #side-nav { display: none; }
    .final-grehala { font-size: 22vw; }
}