/* ═══════════════════════════════════════════════════════════════
   طبقة المشهد — سماء الرياض ليلة العرض
   نجوم + ألعاب نارية CSS + أفق معالم الرياض
   ═══════════════════════════════════════════════════════════════ */

/* منع اختفاء العناوين خلف الهيدر الثابت عند فتح رابط قسم مباشرة */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ── مسرح البطل ── */
.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* ── نجوم تتلألأ ── */
.hero-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 22% 24%, rgba(255, 243, 214, 0.9), transparent 50%),
        radial-gradient(1px 1px at 38% 12%, rgba(255, 243, 214, 0.7), transparent 50%),
        radial-gradient(1.4px 1.4px at 55% 30%, rgba(255, 243, 214, 0.8), transparent 50%),
        radial-gradient(1px 1px at 71% 8%, rgba(255, 243, 214, 0.65), transparent 50%),
        radial-gradient(1.8px 1.8px at 84% 22%, rgba(255, 243, 214, 0.75), transparent 50%),
        radial-gradient(1px 1px at 10% 44%, rgba(255, 243, 214, 0.55), transparent 50%),
        radial-gradient(1.3px 1.3px at 48% 52%, rgba(255, 243, 214, 0.5), transparent 50%),
        radial-gradient(1px 1px at 92% 46%, rgba(255, 243, 214, 0.6), transparent 50%),
        radial-gradient(1.2px 1.2px at 30% 64%, rgba(255, 243, 214, 0.4), transparent 50%),
        radial-gradient(1px 1px at 65% 70%, rgba(255, 243, 214, 0.35), transparent 50%);
    background-size: 560px 420px;
    animation: starsBreathe 8s ease-in-out infinite alternate;
}
@keyframes starsBreathe {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}

/* ── وهج الأفق: توهّج المدينة والاحتفال ── */
.hero-horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 46%;
    background:
        radial-gradient(ellipse 55% 65% at 50% 100%, rgba(255, 122, 69, 0.22), transparent 65%),
        radial-gradient(ellipse 90% 45% at 50% 100%, rgba(246, 196, 83, 0.12), transparent 70%),
        radial-gradient(ellipse 30% 30% at 22% 100%, rgba(30, 158, 98, 0.07), transparent 70%);
}

/* ── أفق معالم الرياض ── */
.hero-skyline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: clamp(170px, 30vh, 300px);
    display: block;
}
.sk-palm { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.hero-skyline .sk-back { fill: #131529; }
.hero-skyline .sk-front { fill: #08090f; }
.hero-skyline .sk-palm { stroke: #08090f; }
.hero-skyline .sk-flag { fill: #1e9e62; }
.hero-skyline .win { fill: #ffd882; opacity: 0.85; }
.hero-skyline .win:nth-of-type(odd) { animation: winFlicker 5.2s ease-in-out infinite; }
.hero-skyline .win:nth-of-type(3n) { animation: winFlicker 7.4s ease-in-out 1.6s infinite; }
@keyframes winFlicker {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.3; }
}

/* ── الألعاب النارية — CSS خالص ──
   كل انفجار: نواة + حلقتا شظايا box-shadow تتمددان وتخبوان */
.fw {
    position: absolute;
    width: 4px;
    height: 4px;
}
.fw i, .fw b {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c1, #ffe9a8);
    transform: scale(0.05);
    opacity: 0;
    will-change: transform, opacity;
    animation: fwBurst 6.4s cubic-bezier(0.12, 0.65, 0.3, 1) infinite;
    animation-delay: var(--d, 0s);
}
.fw i {
    box-shadow:
        70px 0 0 var(--c1), 65px 27px 0 var(--c2), 50px 50px 0 var(--c1), 27px 65px 0 var(--c2),
        0 70px 0 var(--c1), -27px 65px 0 var(--c2), -50px 50px 0 var(--c1), -65px 27px 0 var(--c2),
        -70px 0 0 var(--c1), -65px -27px 0 var(--c2), -50px -50px 0 var(--c1), -27px -65px 0 var(--c2),
        0 -70px 0 var(--c1), 27px -65px 0 var(--c2), 50px -50px 0 var(--c1), 65px -27px 0 var(--c2);
}
.fw b {
    animation-name: fwBurstInner;
    box-shadow:
        38px 0 0 var(--c2), 27px 27px 0 var(--c1), 0 38px 0 var(--c2), -27px 27px 0 var(--c1),
        -38px 0 0 var(--c2), -27px -27px 0 var(--c1), 0 -38px 0 var(--c2), 27px -27px 0 var(--c1);
}
@keyframes fwBurst {
    0%   { transform: scale(0.05); opacity: 0; }
    2%   { opacity: 1; }
    16%  { transform: scale(1); opacity: 0.95; }
    30%  { transform: scale(1.22) translateY(12px); opacity: 0; }
    100% { transform: scale(1.22) translateY(12px); opacity: 0; }
}
@keyframes fwBurstInner {
    0%   { transform: scale(0.05); opacity: 0; }
    4%   { opacity: 0; }
    6%   { opacity: 1; }
    20%  { transform: scale(1); opacity: 0.9; }
    34%  { transform: scale(1.1) translateY(22px); opacity: 0; }
    100% { transform: scale(1.1) translateY(22px); opacity: 0; }
}
/* مواقع وألوان وتوقيت كل قذيفة */
.fw-1 { top: 24%; right: 16%; --c1: #ffe9a8; --c2: #f6c453; }
.fw-1 i, .fw-1 b { --d: 0.4s; }
.fw-2 { top: 32%; left: 20%;  --c1: #ffd27d; --c2: #ff7a45; }
.fw-2 i, .fw-2 b { --d: 2.5s; }
.fw-3 { top: 15%; left: 52%;  --c1: #fff3c4; --c2: #7fe0b2; }
.fw-3 i, .fw-3 b { --d: 4.6s; }

/* ── تذييل: الأفق فوق الفوتر ── */
.footer-scene svg .sk-back { fill: #10121f; }
.footer-scene svg .sk-front { fill: #0a0b16; }
.footer-scene svg .sk-palm { stroke: #0a0b16; }
.footer-scene svg .sk-flag { fill: #17754a; }
.footer-scene svg .win { fill: #f6c453; opacity: 0.55; }
.footer-scene {
    background:
        radial-gradient(ellipse 60% 80% at 50% 115%, rgba(255, 122, 69, 0.1), transparent 70%),
        var(--bg);
}

/* ── جوال ── */
@media (max-width: 768px) {
    .hero-skyline { height: clamp(120px, 26vh, 200px); }
    .fw-2 { display: none; }
    .fw i { box-shadow:
        50px 0 0 var(--c1), 35px 35px 0 var(--c2), 0 50px 0 var(--c1), -35px 35px 0 var(--c2),
        -50px 0 0 var(--c1), -35px -35px 0 var(--c2), 0 -50px 0 var(--c1), 35px -35px 0 var(--c2); }
}

/* ── تقليل الحركة: مشهد ساكن ── */
@media (prefers-reduced-motion: reduce) {
    .fw i, .fw b { animation: none; opacity: 0; }
    .hero-stars { animation: none; opacity: 0.8; }
    .hero-skyline .win { animation: none !important; }
}