:root {
    /* متغيرات تتكيف تلقائياً مع دورة الطبيعة */
    --text-main: #091e3a;
    --text-sub: #1e3a5f;
    --text-glow: rgba(255, 255, 255, 0.85);
    --accent: #0284c7;
    --accent-gold: #d97706;
    
    /* كبسولات الزجاج المندمجة بالخلفية */
    --pod-bg: rgba(255, 255, 255, 0.38);
    --pod-border: rgba(255, 255, 255, 0.75);
    --pod-shadow: rgba(12, 38, 78, 0.12);
    
    /* ألوان الجبال والعمارة اليمنية */
    --mtn-1: #60a5fa;
    --mtn-2: #3b82f6;
    --mtn-3: #1d4ed8;
    --terrace: #15803d;
    --stone-main: #9a5833;
    --stone-dark: #6e3a1c;
    --window-light: rgba(255, 255, 255, 0.5);
    --qamariya-opacity: 0.45;
    --lantern-glow: 0;
}

/* طور الشروق */
body[data-phase="dawn"] {
    --text-main: #2a1205;
    --text-sub: #5c2810;
    --text-glow: rgba(255, 240, 220, 0.7);
    --accent: #ea580c;
    --accent-gold: #b45309;
    --pod-bg: rgba(255, 248, 240, 0.36);
    --pod-border: rgba(255, 235, 210, 0.7);
    --mtn-1: #8b5cf6;
    --mtn-2: #6d28d9;
    --mtn-3: #4c1d95;
    --terrace: #3f6212;
    --stone-main: #854625;
    --stone-dark: #572a12;
    --window-light: rgba(254, 215, 170, 0.8);
    --qamariya-opacity: 0.75;
    --lantern-glow: 0.5;
}

/* طور النهار الصيفي المشرق */
body[data-phase="day"] {
    --text-main: #06182c;
    --text-sub: #163656;
    --text-glow: rgba(255, 255, 255, 0.9);
    --accent: #0284c7;
    --accent-gold: #d97706;
    --pod-bg: rgba(255, 255, 255, 0.42);
    --pod-border: rgba(255, 255, 255, 0.82);
    --mtn-1: #60a5fa;
    --mtn-2: #2563eb;
    --mtn-3: #1e3a8a;
    --terrace: #16a34a;
    --stone-main: #a15c38;
    --stone-dark: #733e20;
    --window-light: rgba(255, 255, 255, 0.55);
    --qamariya-opacity: 0.4;
    --lantern-glow: 0;
}

/* طور الغروب الدافئ */
body[data-phase="sunset"] {
    --text-main: #fff7ed;
    --text-sub: #ffedd5;
    --text-glow: rgba(45, 10, 30, 0.65);
    --accent: #fb923c;
    --accent-gold: #fde047;
    --pod-bg: rgba(40, 15, 45, 0.38);
    --pod-border: rgba(255, 200, 160, 0.45);
    --mtn-1: #701a75;
    --mtn-2: #4a044e;
    --mtn-3: #2e1065;
    --terrace: #365314;
    --stone-main: #693318;
    --stone-dark: #421d0b;
    --window-light: #fde047;
    --qamariya-opacity: 0.95;
    --lantern-glow: 0.9;
}

/* طور الليل اليمني الساحر */
body[data-phase="night"] {
    --text-main: #f8fafc;
    --text-sub: #cbd5e1;
    --text-glow: rgba(2, 6, 23, 0.85);
    --accent: #38bdf8;
    --accent-gold: #fbbf24;
    --pod-bg: rgba(15, 23, 42, 0.46);
    --pod-border: rgba(148, 163, 184, 0.35);
    --mtn-1: #1e293b;
    --mtn-2: #0f172a;
    --mtn-3: #020617;
    --terrace: #064e3b;
    --stone-main: #432210;
    --stone-dark: #261105;
    --window-light: #facc15;
    --qamariya-opacity: 1;
    --lantern-glow: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
    position: relative;
    user-select: none;
    background: #020617;
}

/* =========================================
   1. محرك السماء ذو الطبقات المتداخلة
   ========================================= */
.sky-engine {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sky-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sky-dawn {
    background: linear-gradient(180deg, #1e1b4b 0%, #7c2d12 38%, #ea580c 70%, #fde68a 100%);
}
.sky-day {
    background: linear-gradient(180deg, #0284c7 0%, #38bdf8 48%, #bae6fd 82%, #f0f9ff 100%);
}
.sky-sunset {
    background: linear-gradient(180deg, #17153b 0%, #831843 38%, #ea580c 74%, #fde047 100%);
}
.sky-night {
    background: linear-gradient(180deg, #020617 0%, #091326 45%, #1e293b 85%, #2e1065 100%);
}

body[data-phase="dawn"] .sky-dawn { opacity: 1; }
body[data-phase="day"] .sky-day { opacity: 1; }
body[data-phase="sunset"] .sky-sunset { opacity: 1; }
body[data-phase="night"] .sky-night { opacity: 1; }

/* =========================================
   2. المدار الفلكي للشمس والقمر
   ========================================= */
.celestial-orbit {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.sun-orb {
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 15%, #fef08a 55%, #f59e0b 100%);
    box-shadow: 0 0 50px rgba(251, 191, 36, 0.95), 0 0 110px rgba(245, 158, 11, 0.6);
    transition: all 3.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sun-orb::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2.5px dashed rgba(254, 240, 138, 0.7);
    animation: spinSlow 24s linear infinite;
}

body[data-phase="dawn"] .sun-orb { top: 48%; left: 78%; opacity: 0.95; transform: scale(0.95); }
body[data-phase="day"] .sun-orb { top: 7%; left: 14%; opacity: 1; transform: scale(1.05); }
body[data-phase="sunset"] .sun-orb { top: 52%; left: 10%; opacity: 0.95; transform: scale(1.15); }
body[data-phase="night"] .sun-orb { top: 85%; left: 5%; opacity: 0; transform: scale(0.5); }

.moon-orb {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: -15px 9px 0 0 #fef08a, -15px 9px 35px rgba(254, 240, 138, 0.75);
    transition: all 3.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-phase="dawn"] .moon-orb { top: 75%; right: 80%; opacity: 0; transform: rotate(-25deg) scale(0.6); }
body[data-phase="day"] .moon-orb { top: 85%; right: 50%; opacity: 0; transform: rotate(-15deg) scale(0.6); }
body[data-phase="sunset"] .moon-orb { top: 22%; right: 14%; opacity: 0.35; transform: rotate(-15deg) scale(0.85); }
body[data-phase="night"] .moon-orb { top: 9%; right: 14%; opacity: 1; transform: rotate(-15deg) scale(1); }

@keyframes spinSlow { 100% { transform: rotate(360deg); } }

/* =========================================
   3. لوحة الرسم الحية (Canvas)
   ========================================= */
#worldCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* =========================================
   4. الواجهة المندمجة في الفضاء (Spatial UI)
   ========================================= */
.spatial-stage {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 3.5vh 18px 235px;
    pointer-events: none;
}

.sky-identity {
    text-align: center;
    max-width: 540px;
    width: 100%;
    pointer-events: auto;
    animation: floatGentle 6s ease-in-out infinite;
}

@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.qamariya-crown {
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.qamariya-crown svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    animation: spinSlow 35s linear infinite;
}

.live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--pod-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--pod-border);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px;
    box-shadow: 0 4px 15px var(--pod-shadow);
    transition: all 1.5s ease;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero-brand {
    font-family: 'Readex Pro', 'Cairo', sans-serif;
    font-size: clamp(2.4rem, 7vw, 3.6rem);
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -1px;
    line-height: 1.05;
    text-shadow: 0 2px 24px var(--text-glow), 0 1px 3px var(--text-glow);
    transition: color 1.5s ease, text-shadow 1.5s ease;
}

.hero-brand span {
    color: var(--accent);
    transition: color 1.5s ease;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 2.8vw, 1.15rem);
    font-weight: 800;
    color: var(--accent-gold);
    text-shadow: 0 1px 12px var(--text-glow);
    margin: 2px 0 8px;
    transition: color 1.5s ease;
}

.hero-bio {
    font-size: clamp(0.84rem, 2.4vw, 0.98rem);
    line-height: 1.65;
    color: var(--text-sub);
    font-weight: 700;
    text-shadow: 0 1px 14px var(--text-glow), 0 0 5px var(--text-glow);
    max-width: 470px;
    margin: 0 auto;
    padding: 0 6px;
    transition: color 1.5s ease, text-shadow 1.5s ease;
}

/* كبسولات المشاريع الزجاجية العائمة */
.spatial-pods-wrapper {
    width: 100%;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.pods-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    text-shadow: 0 1px 10px var(--text-glow);
    letter-spacing: 0.3px;
    opacity: 0.92;
    transition: color 1.5s ease;
}

.spatial-pod {
    width: 100%;
    background: var(--pod-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1.5px solid var(--pod-border);
    border-radius: 22px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    box-shadow: 0 12px 32px var(--pod-shadow), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, border-color 0.4s ease;
}

.spatial-pod:hover, .spatial-pod:active {
    transform: translateY(-3px) scale(1.015);
    border-color: var(--accent);
}

.pod-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
}

.pod-icon-press {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.pod-icon-library {
    background: linear-gradient(135deg, #d97706, #fbbf24);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
}

.pod-body {
    flex: 1;
    min-width: 0;
}

.pod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.pod-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 1.5s ease;
}

.pod-badge {
    padding: 2px 9px;
    border-radius: 30px;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-live {
    background: rgba(16, 185, 129, 0.22);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.45);
}
body[data-phase="sunset"] .badge-live,
body[data-phase="night"] .badge-live {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.25);
}

.badge-soon {
    background: rgba(245, 158, 11, 0.22);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.45);
}
body[data-phase="sunset"] .badge-soon,
body[data-phase="night"] .badge-soon {
    color: #fde047;
    background: rgba(245, 158, 11, 0.25);
}

.pod-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-sub);
    transition: color 1.5s ease;
}

.pod-arrow {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--accent);
    transition: transform 0.3s ease;
}

.spatial-pod:hover .pod-arrow {
    transform: translateX(-4px);
}

/* =========================================
   5. بانوراما اليمن المعمارية والجبلية
   ========================================= */
.yemen-panorama {
    position: fixed;
    bottom: 0;
    left: -3%;
    width: 106%;
    height: 235px;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.2s ease-out;
}

.panorama-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.svg-mtn-1 { fill: var(--mtn-1); transition: fill 3s ease; }
.svg-mtn-2 { fill: var(--mtn-2); transition: fill 3s ease; }
.svg-mtn-3 { fill: var(--mtn-3); transition: fill 3s ease; }
.svg-terrace { fill: var(--terrace); transition: fill 3s ease; }
.svg-stone { fill: var(--stone-main); transition: fill 3s ease; }
.svg-stone-dark { fill: var(--stone-dark); transition: fill 3s ease; }
.svg-gypsum { fill: #ffffff; }
.svg-win { fill: var(--window-light); transition: fill 3s ease; }
.svg-qamariya { opacity: var(--qamariya-opacity); transition: opacity 3s ease; }
.svg-lantern { opacity: var(--lantern-glow); transition: opacity 3s ease; }

.mountain-mist {
    position: fixed;
    bottom: 135px;
    left: -50%;
    width: 200%;
    height: 65px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.22) 0%, transparent 70%);
    z-index: 4;
    pointer-events: none;
    animation: driftMist 18s ease-in-out infinite alternate;
}

@keyframes driftMist {
    0% { transform: translateX(-8%); }
    100% { transform: translateX(8%); }
}

/* =========================================
   6. النوافذ الزجاجية المنبثقة للتفاصيل
   ========================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(4, 10, 24, 0.58);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.modal-sheet {
    background: var(--pod-bg);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1.5px solid var(--pod-border);
    border-radius: 28px;
    max-width: 450px;
    width: 100%;
    padding: 28px 22px 24px;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    transform: scale(0.9) translateY(25px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text-main);
}

.modal-backdrop.open .modal-sheet {
    transform: scale(1) translateY(0);
}

.close-circle {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--pod-border);
    background: rgba(255, 255, 255, 0.25);
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.close-circle:hover {
    background: #ef4444;
    color: #fff;
    transform: rotate(90deg);
}

.modal-emblem {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
}

.modal-heading {
    font-size: 1.55rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.modal-description {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid var(--pod-border);
    border-radius: 18px;
    padding: 16px;
    font-size: 0.92rem;
    line-height: 1.75;
    font-weight: 700;
    color: var(--text-main);
    margin: 14px 0 16px;
}

.modal-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.tag-item {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid var(--pod-border);
    padding: 4px 11px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
}

.cta-visit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 22px;
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.02rem;
    font-weight: 900;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
    transition: transform 0.3s ease;
}

.cta-visit-btn:hover {
    transform: translateY(-2px);
}

.cta-soon-box {
    width: 100%;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.22);
    border: 1.5px dashed #f59e0b;
    border-radius: 16px;
    font-weight: 900;
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* تحسينات الشاشات الكبيرة */
@media (min-width: 768px) {
    .spatial-stage {
        padding: 5vh 24px 290px;
    }
    .yemen-panorama {
        height: 290px;
    }
    .spatial-pods-wrapper {
        flex-direction: row;
        max-width: 760px;
        gap: 16px;
    }
    .pods-label {
        display: none;
    }
}