/* تعديلات وإضافات */
.tile .up,.node .up{position:absolute;inset:0;transform:rotate(calc(var(--a)*-1))}
/* عنوان البداية: التدرج على الكلمات نفسها */
.g-title .l1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;animation:none;display:block;font-size:calc(var(--S)*.115);line-height:1.25}
.g-title .l1 .w{background:linear-gradient(90deg,#174d3e,#2f6c56,#cc8d45,#174d3e);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordSwirl 1.5s var(--ease) 1.5s both,shine 6s linear 3.2s infinite}
.g-title .l2{display:block;font-size:calc(var(--S)*.062);color:#6b4a1d}
.g-title .l2 .w{animation:wordSwirl 1.5s var(--ease) both;animation-delay:calc(var(--i)*.22s + 1.5s)}
/* موجة سطح الخابية */
.wv{animation:wvm 3s linear infinite}
@keyframes wvm{to{transform:translateX(-60px)}}
/* ارتباطات البطاقات بالدائرة */
.cards-col.r .bubble::after{right:auto;left:calc(-1*clamp(14px,3vw,46px) - 4px)}
.cards-col.l .bubble::after{left:auto;right:calc(-1*clamp(14px,3vw,46px) - 4px)}
/* حلقة البرعة */
.arena{container-type:inline-size;--rr:35cqw}
@keyframes spinrA{from{transform:rotate(calc(var(--a)*-1))}to{transform:rotate(calc(var(--a)*-1 - 360deg))}}
.pp .d{animation:spinrA 40s linear infinite,hop 1.2s ease-in-out infinite;animation-delay:0s,var(--hd,0s)}
/* الخلفية الحيّة: تخفت في صفحات الحكايات لوضوح القراءة */
.scene{transition:opacity .8s}
body:not([data-view=hub]) .scene{opacity:.16}
body[data-view=hub] .scene{opacity:1}
body[data-view=gate] .scene{opacity:0}
.pg-wrap{display:block}
.view{padding-top:4px}
.hub-head h2{color:var(--deep)}
.sec .block>h2{margin-top:0}
.btn[data-go]{cursor:pointer}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* حجم افتراضي للأيقونات (أقل أولوية من أي قاعدة صنف) */
:where(svg:not([viewBox])){width:1.25em;height:1.25em;flex:none}
/* مسرح البداية: شعارات أكبر ودائرة بعنوان أوضح */
.orbit-stage{--S:min(90vw,62vh);--tw:calc(var(--S)*.27);--th:calc(var(--S)*.18)}
@media(max-width:700px){.orbit-stage{--S:min(94vw,50vh);--tw:calc(var(--S)*.29);--th:calc(var(--S)*.2)}}
.medal{width:calc(var(--S)*.46);height:calc(var(--S)*.46)}
.g-sub{margin:0;text-align:center;font-size:clamp(13px,1.7vw,17px);font-weight:700;color:#f3e3c3;line-height:1.6;animation:fadeUp 1s var(--ease) 2.6s both}
@media(max-height:640px){.g-sub{display:none}}

/* الخريطة الدوّارة: تخطيط أنظف */
.hub{padding-top:14px}
.hub-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) minmax(0,.95fr);gap:clamp(8px,1.6vw,22px);align-items:center}
.hub-orbit{--S:min(33vw,60vh,500px)}
.hub-orbit .ring{inset:-1%}
.node{width:calc(var(--S)*.3);height:calc(var(--S)*.3);margin:calc(var(--S)*-.15) 0 0 calc(var(--S)*-.15);transform:rotate(var(--a)) translateY(calc(var(--S)*-.5 + var(--S)*.02))}
.node .lab{font-size:calc(var(--S)*.044);bottom:-8%}
.cards-col{gap:clamp(18px,5vh,46px)}
.bubble{padding:18px 20px 16px}
.bubble p{font-size:13.5px;margin-bottom:8px}
.bubble::after{display:none}
.hub-core{width:42%;height:42%}
.hub-core h3{font-size:calc(var(--S)*.105)}
.hub-core svg.icn{width:26%}
.hub-head{margin-bottom:18px}
@media(max-width:980px){
 .hub-orbit{--S:min(82vw,430px)}
 .node{width:calc(var(--S)*.32);height:calc(var(--S)*.32);margin:calc(var(--S)*-.16) 0 0 calc(var(--S)*-.16)}
}

.scans{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.scan img{aspect-ratio:4/5}
.vgrid{align-items:start}
.vcap{align-self:center}

/* الجوال: عمود واحد للخريطة (يأتي بعد قواعد الحاسوب ليسود عليها) */
@media(max-width:980px){
 .hub-grid{grid-template-columns:minmax(0,1fr);gap:40px}
 .hub-orbit{--S:min(80vw,420px);order:-1}
 .cards-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 12px;align-items:start}
 .cards-col .bubble{padding:16px 13px 14px}
 .cards-col .bubble .brush{font-size:17px;margin-top:-30px;padding:6px 18px 6px 14px}
 .cards-col .bubble p{font-size:12.5px;line-height:1.75}
 .node .lab{font-size:calc(var(--S)*.05)}
 .hub-head h2{font-size:21px}
}
@media(max-width:560px){
 .cards-col{grid-template-columns:minmax(0,1fr);gap:38px}
 .hub-orbit{--S:min(86vw,360px)}
}
html,body{max-width:100vw}

.vgrid.wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:860px){.vgrid,.vgrid.wide{grid-template-columns:minmax(0,1fr)}.vcap{order:2}.banner .motif{display:none}.banner{min-height:240px}}
.card.show-lab,.card.kb-lab{overflow:hidden}

/* ===== خلفية كتب الموسوعة العُمانية (شفافة وإبداعية) ===== */
.books{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.books i{position:absolute;display:block;background:url(../assets/img/books.webp) center/cover no-repeat;mix-blend-mode:multiply;filter:grayscale(.35) contrast(1.05);
 -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 20%,transparent 72%);opacity:.13}
.books .b1{width:min(62vw,820px);aspect-ratio:1000/814;right:-8vw;top:6vh;rotate:-7deg;animation:bkFloat 26s ease-in-out infinite}
.books .b2{width:min(46vw,620px);aspect-ratio:1000/814;left:-6vw;bottom:-4vh;rotate:9deg;opacity:.1;animation:bkFloat 32s ease-in-out -9s infinite reverse}
.books .b3{width:min(30vw,420px);aspect-ratio:1000/814;left:34vw;top:-8vh;rotate:3deg;opacity:.07;animation:bkFloat 38s ease-in-out -17s infinite}
@keyframes bkFloat{0%,100%{translate:0 0;scale:1}50%{translate:2.4vw -2.2vh;scale:1.05}}
body[data-view=gate] .books{opacity:0}

.books::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(90,58,13,.035) 0 2px,transparent 2px 46px)}
/* على صفحة البداية الداكنة: الكتب بتأثير الإضاءة */
.gbooks{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gbooks i{position:absolute;display:block;background:url(../assets/img/books.webp) center/cover no-repeat;mix-blend-mode:screen;filter:grayscale(1) brightness(1.3) contrast(1.1);opacity:.1;
 -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 15%,transparent 70%)}
.gbooks i:nth-child(1){width:min(64vw,880px);aspect-ratio:1000/814;left:-10vw;top:4vh;rotate:-9deg;animation:bkFloat 30s ease-in-out infinite}
.gbooks i:nth-child(2){width:min(56vw,760px);aspect-ratio:1000/814;right:-12vw;bottom:-6vh;rotate:11deg;animation:bkFloat 36s ease-in-out -12s infinite reverse}

/* ===== بوابة الدخول: خمسة شعارات على حلقة واحدة ===== */
.orbit-stage{--tw:calc(var(--S)*.25);--th:calc(var(--S)*.17)}
.tile .face{background:#fff;padding:calc(var(--th)*.1) calc(var(--tw)*.08)}
.tile:nth-child(5) .face::after{animation-delay:3s}
.tile:nth-child(4) .face,.tile:nth-child(5) .face{padding:calc(var(--th)*.06) calc(var(--tw)*.1)}
@media(max-width:700px){.orbit-stage{--tw:calc(var(--S)*.255);--th:calc(var(--S)*.18)}}

/* ===== الخريطة بدون بطاقات: دائرة كبيرة ===== */
.hub-grid{display:block}
.hub-orbit{--S:min(78vw,72vh,620px);margin:34px auto 74px}
.node{width:calc(var(--S)*.25);height:calc(var(--S)*.25);margin:calc(var(--S)*-.125) 0 0 calc(var(--S)*-.125);transform:rotate(var(--a)) translateY(calc(var(--S)*-.5 + var(--S)*.02))}
.node .lab{font-size:calc(var(--S)*.036);bottom:-10%;padding:3px 12px}
.node .num{font-size:calc(var(--S)*.032)}
.node-emblem{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--c),var(--c2));color:#fff}
.node-emblem svg{width:46%;height:46%;stroke-width:1.6}
.hub-core{width:40%;height:40%}
.hub-core h3{font-size:calc(var(--S)*.092)}
.hub-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 12px;max-width:900px}
.hub-pills a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;font-weight:900;font-size:14px;color:#fff;background:linear-gradient(100deg,var(--c2),var(--c));box-shadow:0 12px 22px -14px var(--c2);transition:transform .4s var(--spring)}
.hub-pills a:hover{transform:translateY(-3px) scale(1.04)}
.hub-pills a svg{width:18px;height:18px}
.cta-quest{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 26px;border-radius:30px;background:linear-gradient(120deg,#5a3a0d,#a8681d 55%,#cc8d45);color:#fff;box-shadow:0 30px 50px -28px #5a3a0d;position:relative;overflow:hidden}
.cta-quest::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 30%,rgba(255,255,255,.25),transparent 40%)}
.cta-quest>*{position:relative}
.cta-quest .tr{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.cta-quest .tr svg{width:36px;height:36px;stroke-width:1.6}
.cta-quest h3{margin:0 0 4px;font-size:clamp(19px,2.6vw,26px)}
.cta-quest p{margin:0;font-size:14px;opacity:.95;line-height:1.8}
@media(max-width:700px){.cta-quest{grid-template-columns:1fr;text-align:center;justify-items:center}.hub-orbit{--S:min(88vw,420px);margin-bottom:64px}}
@media(max-width:980px){.hub-orbit{--S:min(86vw,520px)}.node{width:calc(var(--S)*.27);height:calc(var(--S)*.27);margin:calc(var(--S)*-.135) 0 0 calc(var(--S)*-.135)}.node .lab{font-size:calc(var(--S)*.042)}}

/* ===== التبويبات الثمانية ===== */
.tabs a{padding:9px 12px;font-size:13px;gap:6px}
@media(max-width:1280px){.tabs a{padding:9px 9px}.tabs a svg{display:none}}
@media(max-width:1120px){.tabs{display:none}.btabs{display:flex!important}}
@media(max-width:1120px) and (min-width:981px){.btabs{left:50%;right:auto;translate:-50% 0;width:min(720px,94vw)}}
.btabs a{font-size:10px}.btabs a span{white-space:nowrap}
.brand small{white-space:nowrap}

/* ===== الهبّان والمسابقة ===== */
.hb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.hb-fact{padding:18px 20px;border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,#fff),#fffdf7);border:1.5px solid color-mix(in srgb,var(--c) 40%,#fff)}
.hb-fact b{display:block;color:var(--c2);font-size:17px;margin-bottom:4px}
.hb-fact p{margin:0;font-size:14.5px;line-height:1.9;color:#33463c}
.hb-fact .pg{margin-top:8px}
.hb-board{border-radius:22px;overflow:hidden;border:3px solid #fff;box-shadow:0 24px 50px -26px var(--c2)}
.hb-board img{display:block;width:100%}
.hb-slot{padding:22px;border-radius:22px;border:2px dashed color-mix(in srgb,var(--c) 50%,#fff);background:color-mix(in srgb,var(--c) 6%,#fff);text-align:center;color:var(--c2);font-weight:700;line-height:1.9}
.game-frame{border-radius:22px;overflow:hidden;border:3px solid #fff;box-shadow:0 24px 50px -26px var(--c2);background:#0d2a6b}
.game-frame iframe{display:block;width:100%;height:min(82vh,760px);border:0}
.banner.nocover{background:linear-gradient(135deg,var(--c2),var(--c))}

/* المسابقة */
.qst{padding-bottom:20px}
.qgame{--c:#cc8d45;--c2:#5a3a0d;border-radius:26px;overflow:hidden;background:#fff6dc;border:3px solid #fff;box-shadow:0 30px 60px -30px #5a3a0d}
.q-hud{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(100deg,var(--c2),var(--c2) 40%,var(--c));color:#fff}
.q-hud .h-st{display:flex;flex-direction:column;line-height:1.3}.h-st b{font-size:14px}.h-st span{font-size:12px;opacity:.9}
.h-grp{display:flex;gap:8px;flex-wrap:wrap}
.hi{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.16);font-weight:900;font-size:14px}
.hi svg{width:18px;height:18px}
.hi .off,.h-hearts svg.off{opacity:.3}
.h-hearts svg{color:#ff6b86;fill:#ff6b86;stroke:#fff;width:20px;height:20px}
.h-btn{display:flex;gap:6px}
.h-btn button{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center}
.h-btn button svg{width:19px;height:19px}
.h-btn button svg.off{display:none}.muted .h-btn button svg.off{display:block}.muted .h-btn button svg.on{display:none}
.q-stage{position:relative;aspect-ratio:960/540;background:#fff6dc;touch-action:none}
.q-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.q-banner{position:absolute;top:12px;left:50%;translate:-50% 0;text-align:center;padding:8px 22px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--c2);opacity:0;pointer-events:none;box-shadow:0 12px 24px -12px rgba(0,0,0,.4)}
.q-banner b{display:block;font-size:clamp(14px,2.2vw,20px)}.q-banner span{font-size:12px;font-weight:700}
.q-banner.go{animation:qb 3.4s ease both}
@keyframes qb{0%{opacity:0;transform:translateY(-14px)}12%,78%{opacity:1;transform:none}100%{opacity:0}}
.q-ov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,35,28,.55);backdrop-filter:blur(3px);padding:10px;z-index:5;animation:qfade .3s ease both}
@keyframes qfade{from{opacity:0}}
.q-box{width:min(620px,96%);max-height:96%;overflow:auto;background:#fffaf0;border-radius:24px;padding:clamp(14px,2.6vw,26px);text-align:center;border:3px solid #e9b56c;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.q-box h2{margin:6px 0;color:#5a3a0d;font-size:clamp(20px,3vw,28px)}
.q-box h3.q-q{margin:12px 0;font-size:clamp(16px,2.2vw,20px);color:#2f4439;line-height:1.8}
.q-box p{margin:6px 0;line-height:1.9;color:#33463c;font-size:clamp(13.5px,1.8vw,16px)}
.q-hero{width:70px;height:70px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,#e9b56c,#cc8d45);display:grid;place-items:center;color:#fff;animation:pulse 2.2s ease-in-out infinite}
.q-hero.bad{background:linear-gradient(135deg,#ff8a9a,#c8102e)}
.q-hero svg{width:38px;height:38px;stroke-width:1.6}
.q-how{text-align:right;margin:10px 0;padding:0 18px;font-size:14px;line-height:1.9;color:#33463c}
.q-name{display:block;text-align:right;font-weight:800;font-size:13px;color:#5a3a0d;margin:8px 0}
.q-name input{display:block;width:100%;margin-top:4px;padding:10px 14px;border-radius:14px;border:2px solid #e9b56c;font:inherit;background:#fff}
.q-chars{display:flex;gap:12px;justify-content:center;margin:10px 0 14px}
.q-chars button{display:grid;gap:4px;justify-items:center;padding:8px 18px;border-radius:18px;border:3px solid transparent;background:#fff;font-weight:800;color:#5a3a0d;transition:transform .3s var(--spring)}
.q-chars button img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:#e2ad86}
.q-chars button.on{border-color:#cc8d45;transform:translateY(-3px);box-shadow:0 12px 20px -12px #5a3a0d}
.q-tag{display:inline-flex;align-items:center;gap:6px;color:#fff;padding:5px 16px;border-radius:99px;font-weight:900;font-size:13px}
.q-tag svg{width:16px;height:16px}
.q-les{font-size:clamp(15px,2vw,18px)!important;font-weight:700;color:#2f4439!important}
.q-src{font-size:13px;color:#5a3a0d;font-weight:800}.q-src svg{width:15px;height:15px;vertical-align:-2px}
.q-cite{margin:8px 0 12px;font-size:12.5px}.q-cite code{display:block;direction:rtl;margin-top:4px;padding:6px 10px;border-radius:10px;background:#f4e8cf;color:#5a3a0d;font-weight:800}
.q-opts{display:grid;gap:8px;text-align:right}
.q-o{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:16px;background:#fff;border:2px solid #ecd9b2;font-weight:700;color:#2f4439;font-size:clamp(13px,1.7vw,15.5px);line-height:1.7;transition:transform .25s,border-color .25s}
.q-o:not(:disabled):hover{transform:translateX(-4px);border-color:#cc8d45}
.q-o .l{flex:none;width:28px;height:28px;border-radius:50%;background:#cc8d45;color:#fff;display:grid;place-items:center;font-weight:900}
.q-o.ok{background:#e2f6e8;border-color:#1b7a4a}.q-o.no{background:#fde4e4;border-color:#c8102e}
.fb{margin-top:10px;padding:12px;border-radius:16px;text-align:right;line-height:1.9;font-size:14px}
.fb.ok{background:#e9f8ee;color:#14502f}.fb.bad{background:#fdecec;color:#7d1b1b}
.fb .btn{margin-top:8px;display:inline-flex}
.q-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.q-stats span{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:99px;background:#f4e8cf;font-weight:900;color:#5a3a0d;font-size:14px}
.q-stats svg{width:17px;height:17px}
.q-starsr{display:flex;gap:6px;justify-content:center}.q-starsr svg{width:44px;height:44px;color:#ddd;fill:#ddd}.q-starsr svg.on{color:#e9b56c;fill:#ffd24a;animation:pop .6s var(--spring) both}
.q-nm{font-size:clamp(18px,2.8vw,26px)!important;font-weight:900;color:#174d3e!important}
.q-skills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px}.q-skills span{padding:4px 14px;border-radius:99px;background:#174d3e;color:#fff;font-weight:800;font-size:13px}
.q-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.q-list{display:grid;gap:8px;text-align:right;margin:10px 0;max-height:46vh;overflow:auto}
.q-it{padding:10px 14px;border-radius:14px;background:#fff;border:1.5px solid #ecd9b2}.q-it b{color:#8a5b1a}.q-it p{margin:2px 0;font-size:14px}.q-it small{color:#6b6b5b;font-size:12px}.q-it code{font-weight:800;color:#5a3a0d}
.q-pad{display:none;justify-content:space-between;align-items:center;padding:10px 14px;background:#5a3a0d;touch-action:none;user-select:none;-webkit-user-select:none}
.q-pad button{height:58px;min-width:70px;border-radius:18px;background:rgba(255,255,255,.2);color:#fff;font-weight:900;font-size:22px;padding:0 18px;touch-action:none}
.q-pad .lr{display:flex;gap:10px}.q-pad button.on{background:#e9b56c;color:#5a3a0d}
.q-pad .jp{background:#cc8d45;font-size:18px;min-width:120px}
@media(hover:none),(max-width:900px){.q-pad{display:flex}}
.q-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:760px){.q-info{grid-template-columns:1fr}}
.q-head{margin-bottom:18px}
.hb-bag svg{width:100%;height:auto;display:block;overflow:visible}
.hb-bag .bagb{transition:transform .8s var(--spring)}
.hb-bag.bl .bagb{animation:bagBl 1.6s ease-in-out both}
.hb-bag.sq .bagb{animation:bagSq 1.4s ease-in-out both}
.hb-bag .notes{opacity:0}.hb-bag.sq .notes{animation:notesUp 1.4s ease-out both}
@keyframes bagBl{0%{transform:scale(1)}60%{transform:scale(1.22,1.28)}100%{transform:scale(1.18,1.22)}}
@keyframes bagSq{0%{transform:scale(1.18,1.22)}35%{transform:scale(.9,.84)}100%{transform:scale(1)}}
@keyframes notesUp{0%{opacity:0;transform:translateY(10px)}30%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@media(max-width:760px){.hb-lab{grid-template-columns:minmax(0,1fr)!important}}
.hub-orbit{--S:min(60vw,54vh,500px);margin:calc(var(--S)*.15) auto calc(var(--S)*.17)}
@media(max-width:980px){.hub-orbit{--S:min(70vw,440px);margin:calc(var(--S)*.16) auto calc(var(--S)*.18)}}
@media(max-width:700px){.hub-orbit{--S:min(66vw,300px);margin-bottom:calc(var(--S)*.2)}}
.qgame{max-width:min(100%,calc((100vh - 170px)*1.7 + 0px));margin-inline:auto}
@media(max-width:760px){
 .qgame{max-width:100%}
 .q-stage{aspect-ratio:4/3}
 .q-hud{padding:8px 10px;gap:6px 8px}.hi{padding:3px 8px;font-size:12.5px}.hi svg{width:15px;height:15px}.h-btn button{width:32px;height:32px}
 .q-hud .h-st{flex-basis:100%;flex-direction:row;gap:8px;align-items:baseline}
}
.hub-pills{padding-bottom:6px}

/* ===== الهبّان: صورة ومختبر ===== */
.hb-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:20px;align-items:center}
.hb-pic{margin:0;padding:22px;border-radius:28px;background:radial-gradient(circle at 40% 30%,#fffaf0,#f1dcb8);border:2px solid color-mix(in srgb,var(--c) 40%,#fff);text-align:center;box-shadow:0 26px 50px -32px var(--c2)}
.hb-pic img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 14px rgba(60,30,10,.35));animation:bob 7s ease-in-out infinite}
.hb-pic small{display:block;margin-top:8px;color:var(--c2);font-weight:800}
.hb-hero .hb-facts{grid-template-columns:1fr 1fr}
@media(max-width:860px){.hb-hero{grid-template-columns:minmax(0,1fr)}.hb-hero .hb-facts{grid-template-columns:1fr}}
.hb-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;overflow:hidden}
@media(max-width:860px){.hb-lab{grid-template-columns:minmax(0,1fr)}}
.hb-bag svg{width:100%;height:auto;display:block;overflow:visible}
.hb-bag .body{fill:url(#raw);stroke:#7a3a12;stroke-width:3;transition:fill .8s}
.hb-bag .raw{fill:#d9ab75;stroke:#7a3a12;stroke-width:2.5;transition:fill .8s}
.hb-bag .mouth{fill:#3a1f0c;stroke:#e0b583;stroke-width:3;opacity:.9;transition:all .6s}
.hb-bag .legs,.hb-bag .hd,.hb-bag .st,.hb-bag .dc,.hb-bag .needle{opacity:0;transition:opacity .7s}
.hb-bag .nl{opacity:0;mix-blend-mode:multiply;transition:opacity 1s;pointer-events:none}
.hb-bag.indigo .nl{opacity:.5}
.hb-bag:not([data-step="0"]) .legs{opacity:1}
.hb-bag:is([data-step="2"],[data-step="3"],[data-step="4"]) .hd{opacity:1}
.hb-bag:is([data-step="3"],[data-step="4"]) .st{opacity:1}
.hb-bag[data-step="3"] .st{animation:dashw 1.4s linear infinite}
.hb-bag[data-step="3"] .needle{opacity:1;animation:needleMove 2.4s ease-in-out infinite}
.hb-bag[data-step="4"] .dc{opacity:1}
.hb-bag:is([data-step="3"],[data-step="4"]) .body{fill:url(#lth)}
.hb-bag:is([data-step="3"],[data-step="4"]) .raw{fill:#a8581f}
.hb-bag[data-step="3"] .mouth{rx:34}
@keyframes needleMove{0%,100%{transform:translate(0,0)}50%{transform:translate(-210px,150px)}}
.hb-bag .st{stroke-dashoffset:0}
@keyframes dashw2{to{stroke-dashoffset:-32}}

/* ===== البداية كصفحة داخل التبويبات ===== */
.gate.as-page{top:var(--nav-h,72px);z-index:35}
.gate.again *,.gate.again{animation:none!important;transition:none!important}
body[data-view=start] .scene,body[data-view=start] .books{opacity:0}
body[data-view=start]{overflow:hidden}
body[data-view=start] .btabs{z-index:120}
@media(max-width:1120px){.gate.as-page{padding-bottom:92px}}
.gate.as-page #gSound{display:none}

/* ===== التبويبات: تسعة تبويبات ===== */
.tabs a{padding:9px 10px;font-size:12.8px;gap:5px}
@media(max-width:1400px){.tabs a svg{display:none}.brand small{display:none}}
@media(max-width:1180px){.tabs{display:none}.btabs{display:flex!important}}
.btabs{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.btabs::-webkit-scrollbar{display:none}
.btabs a{flex:0 0 auto;min-width:62px;padding:7px 8px}

/* ===== شعارات داخل المستطيلات ===== */
.tile .face img{width:100%;height:100%;object-fit:contain}
.tile:nth-child(3) .face{padding:calc(var(--th)*.08) calc(var(--tw)*.1)}
.tile:nth-child(4) .face{padding:calc(var(--th)*.07) calc(var(--tw)*.14)}
.lt{width:158px;height:108px;padding:10px}
.lt img{max-width:132px;max-height:84px;width:auto;height:auto}

/* ===== كتب الموسوعة العُمانية في كل مكان ===== */
:root{--books:url(../assets/img/books.webp)}
.topbar{background:linear-gradient(rgba(250,248,242,.86),rgba(250,248,242,.9)),var(--books) 50% 36%/cover no-repeat}
footer.foot{background:linear-gradient(rgba(250,248,242,.88),rgba(250,248,242,.93)),var(--books) 50% 62%/cover no-repeat;border-top:1px solid rgba(23,77,62,.12);margin-top:50px}
footer.foot::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(90,58,13,.05) 0 2px,transparent 2px 38px);pointer-events:none}
.btabs{background:linear-gradient(rgba(250,248,242,.9),rgba(250,248,242,.93)),var(--books) 50% 50%/cover no-repeat}
.dh::after,.cta-quest::after{content:'';position:absolute;inset:0;background:var(--books) center/cover no-repeat;mix-blend-mode:overlay;opacity:.1;pointer-events:none}
.nextbar{background:linear-gradient(rgba(255,251,240,.9),rgba(255,251,240,.9)),var(--books) center/cover no-repeat}
.q-hud{background:linear-gradient(100deg,rgba(90,58,13,.93),rgba(90,58,13,.82) 45%,rgba(204,141,69,.86)),var(--books) 50% 40%/cover no-repeat}
.q-pad{background:linear-gradient(rgba(90,58,13,.92),rgba(90,58,13,.88)),var(--books) center/cover no-repeat}
.q-box{background:linear-gradient(rgba(255,250,240,.93),rgba(255,250,240,.93)),var(--books) center/cover no-repeat}
.iris .pat::after{content:'';position:absolute;inset:0;background:var(--books) center/cover;mix-blend-mode:overlay;opacity:.3}
.gate.as-page{overflow-y:auto;overflow-x:hidden}

/* =====================================================
   خلفية الكتب العائمة في كل الموقع + وضوح النص
   ===================================================== */
.books{translate:0 calc(var(--sy,0)*-.06px)}
.books i{filter:none;opacity:.27;mix-blend-mode:multiply}
.books .b1{width:min(70vw,900px);right:-10vw;top:4vh;rotate:-7deg;opacity:.27;animation:bkDrift 48s ease-in-out infinite alternate}
.books .b2{width:min(58vw,760px);left:-8vw;bottom:-6vh;rotate:9deg;opacity:.24;animation:bkDrift 56s ease-in-out -14s infinite alternate-reverse}
.books .b3{width:min(46vw,600px);left:30vw;top:-10vh;rotate:3deg;opacity:.2;animation:bkDrift 64s ease-in-out -30s infinite alternate}
.books .b4{width:min(52vw,680px);right:12vw;bottom:-14vh;rotate:-4deg;opacity:.2;animation:bkDrift 70s ease-in-out -8s infinite alternate-reverse}
@keyframes bkDrift{0%{translate:-5vw 0;scale:1}100%{translate:7vw -3vh;scale:1.08}}
body[data-view=start] .books,body[data-view=gate] .books{opacity:0}
/* لوحات ورقية خلف النصوص لتبقى واضحة */
.sec .block,.about .block,.hub .block{background:linear-gradient(rgba(252,249,241,.84),rgba(252,249,241,.8));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.75);border-radius:30px;padding:clamp(16px,2.6vw,28px);box-shadow:0 24px 46px -36px rgba(23,77,62,.55)}
.sec .block .block,.block .card.tint,.block .quiz{backdrop-filter:none}
.sec .nextbar,.sec .cite{background-color:rgba(252,249,241,.88)}
.hub-head{display:table;margin-inline:auto;padding:12px 28px 16px;border-radius:28px;background:rgba(252,249,241,.78);backdrop-filter:blur(4px)}
.hub-head .kick{background:#fff}
.hub-pills{padding:12px;border-radius:99px;background:rgba(252,249,241,.55);backdrop-filter:blur(3px)}

/* =====================================================
   موشن جرافيك
   ===================================================== */
.glow-cursor{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(233,181,108,.28),rgba(233,181,108,0) 62%);mix-blend-mode:soft-light;opacity:0;transition:opacity .5s;will-change:transform}
.glow-cursor.on{opacity:1}
@media(hover:none){.glow-cursor{display:none}}
#motes{opacity:1}
/* العناوين والشريط */
.banner h1{animation:titleReveal 1.4s var(--ease) .15s both;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));text-shadow:none}
@keyframes titleReveal{0%{clip-path:inset(0 0 0 100%);opacity:0;letter-spacing:.2em;transform:translateX(40px)}60%{opacity:1}100%{clip-path:inset(0 0 0 0);letter-spacing:0;transform:none}}
.banner .kick{animation:fadeUp .9s var(--ease) .05s both}
.banner p{animation:fadeUp 1s var(--ease) .55s both}
.banner .chips{animation:fadeUp 1s var(--ease) .8s both}
.banner::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 7s ease-in-out 1.4s infinite;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}}
.banner .bg{translate:0 calc(var(--sy,0)*.05px)}
.banner .motif svg{filter:drop-shadow(0 0 14px rgba(233,181,108,.55));animation:motifPulse 5s ease-in-out infinite}
@keyframes motifPulse{50%{transform:scale(1.06)}}
/* عناوين الأقسام */
.block>h2{position:relative}
.block>h2::after{content:'';position:absolute;right:52px;bottom:-8px;height:4px;width:0;border-radius:4px;background:linear-gradient(90deg,var(--c),var(--gold,#e9b56c));transition:width 1.1s var(--ease) .3s}
.block.in>h2::after,.block>h2:hover::after{width:90px}
.block.reveal>h2 .no{transform:scale(0) rotate(-120deg);transition:transform .9s var(--spring) .2s}
.block.reveal.in>h2 .no{transform:none}
/* تنويع الظهور */
.reveal[data-fx=right]{translate:70px 20px}
.reveal[data-fx=left]{translate:-70px 20px}
.reveal[data-fx=zoom]{translate:0 24px;scale:.88}
.reveal[data-fx=flip]{translate:0 30px;rotate:-2deg;scale:.94}
.reveal.in{scale:1;rotate:0deg}
.reveal{transition:opacity .9s var(--ease) var(--d,0ms),translate .9s var(--ease) var(--d,0ms),scale .9s var(--spring) var(--d,0ms),rotate .9s var(--spring) var(--d,0ms)}
/* بطاقات حيّة */
.card,.hb-fact,.ref,.scan,.chip,.step,.lt,.ps{transition:transform .45s var(--spring),box-shadow .45s,background .4s,border-color .4s}
.card:hover,.hb-fact:hover,.ref:hover{transform:translateY(-5px);box-shadow:0 26px 40px -26px var(--c,#174d3e)}
.chip:hover{transform:translateY(-3px) scale(1.06)}
.card,.hb-fact{position:relative;overflow:hidden}
.card::before,.hb-fact::before{content:'';position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .9s var(--ease);pointer-events:none}
.card:hover::before,.hb-fact:hover::before{left:130%}
.ps.got{animation:stampPop .9s var(--spring) both}
@keyframes stampPop{0%{transform:scale(.4) rotate(-20deg)}100%{transform:none}}
.btn.gold,.cta{animation:ctaGlow 3.2s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 14px 26px -14px rgba(233,181,108,.9)}50%{box-shadow:0 14px 34px -6px rgba(233,181,108,1),0 0 0 6px rgba(233,181,108,.18)}}
/* الفيديوهات */
.vframe{position:relative}
.vframe::after{content:'';position:absolute;inset:0;border-radius:inherit;border:3px solid var(--c,#cc8d45);opacity:0;animation:vfp 3.6s ease-in-out infinite;pointer-events:none}
@keyframes vfp{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.55;transform:scale(1.025)}}
/* شريط متحرك أسفل الصفحة */
.ticker{overflow:hidden;white-space:nowrap;direction:ltr;margin-bottom:20px;padding:9px 0;border-block:1px solid rgba(23,77,62,.14);background:rgba(23,77,62,.06)}
.ticker>div{display:inline-block;direction:rtl;animation:tick 48s linear infinite;will-change:transform}
.ticker span{display:inline-block;margin:0 16px;font-weight:900;color:var(--green);font-size:13.5px}
.ticker i{font-style:normal;color:#cc8d45}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
footer.foot .l svg{animation:spin 18s linear infinite}
/* أزرار التبويبات */
.tabs a.on svg{animation:tabIco 2.4s ease-in-out infinite}
@keyframes tabIco{50%{transform:rotate(14deg) scale(1.2)}}
/* عناصر الخريطة */
.hub-core{animation:morph 14s ease-in-out infinite,corePulse 4s ease-in-out infinite}
@keyframes corePulse{50%{box-shadow:0 0 0 12px rgba(255,255,255,.35),0 30px 60px -22px rgba(23,77,62,.8),inset 0 0 30px rgba(204,141,69,.3)}}
.node-pic{animation:nodeBob 5s ease-in-out infinite;animation-delay:var(--pd,0s)}
@keyframes nodeBob{50%{translate:0 -6px}}
.hub-pills a{animation:pillIn .8s var(--spring) both;animation-delay:calc(var(--i,0)*.1s + .4s)}
@keyframes pillIn{from{opacity:0;transform:translateY(20px) scale(.8)}}
@media(prefers-reduced-motion:reduce){.banner h1,.banner::after,.ticker>div,.books i{animation:none!important}.glow-cursor{display:none}}
.hb-ref{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.hb-ref img{width:100%;border-radius:14px;box-shadow:0 14px 26px -16px #000}
.hb-ref code{display:block;margin-top:4px;padding:8px 12px;border-radius:12px;background:#f4e8cf;color:#5a3a0d;font-weight:800;line-height:1.8}
@media(max-width:560px){.hb-ref{grid-template-columns:1fr}.hb-ref img{max-width:180px}}
.tilt{transition:transform .15s}
.banner .bg{inset:auto;left:-8%;top:-8%;right:auto;width:116%;height:116%}

/* ===== مبدّل الألعاب + لعبة التسلّل ===== */
.g-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.g-switch button{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:22px;border:2px solid #e8d3a8;background:rgba(255,251,240,.92);color:#5a3a0d;text-align:right;transition:transform .4s var(--spring),box-shadow .4s,background .3s}
.g-switch button svg{width:30px;height:30px;flex:none;stroke-width:1.7}
.g-switch button b{display:block;font-size:clamp(15px,2vw,19px)}.g-switch button small{display:block;color:#8a6a3b;font-weight:700;font-size:12.5px}
.g-switch button.on{background:linear-gradient(120deg,#5a3a0d,#a8681d 60%,#cc8d45);color:#fff;border-color:transparent;box-shadow:0 20px 34px -22px #5a3a0d;transform:translateY(-3px)}
.g-switch button.on small{color:#ffe9b8}
@media(max-width:560px){.g-switch{grid-template-columns:1fr}}
.sn-det{gap:8px}.sn-det .bar{display:block;width:90px;height:9px;border-radius:9px;background:rgba(255,255,255,.22);overflow:hidden}
.sn-det .bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#ffd24a,#ff4d6d);transition:width .08s}
.sn-det.hot{background:rgba(255,70,100,.35);animation:pulse .6s ease-in-out infinite}
.sngame .q-stage{background:#0b1422}
.sn-pad .dp{display:flex;align-items:center;gap:8px}
.sn-pad .ud{display:grid;gap:8px}
.sn-pad .dp button,.sn-pad .ud button{height:50px;min-width:62px;font-size:20px;padding:0 14px}
.q-pad .lr,.sn-pad .dp{direction:ltr}
.sngame .q-stage{aspect-ratio:960/540}
@media(max-width:760px){.sngame .q-stage{aspect-ratio:960/540}}

.tile:nth-child(3) .face{padding:calc(var(--th)*.1) calc(var(--tw)*.12) calc(var(--th)*.12)}
.tile:nth-child(3) .face img{object-position:center}
.tile .face img{width:auto;height:auto;max-width:calc(var(--tw)*.78);max-height:calc(var(--th)*.7);object-fit:contain}
.tile:nth-child(3) .face img{max-height:calc(var(--th)*.74)}
.tile .face,.tile:nth-child(n) .face{padding:calc(var(--th)*.07) calc(var(--tw)*.07)}
.tile .face img{max-width:calc(var(--tw)*.84);max-height:calc(var(--th)*.8)}
.tile:nth-child(3) .face img{max-height:calc(var(--th)*.84);max-width:calc(var(--tw)*.8)}
.g-switch{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g-switch{grid-template-columns:1fr}}
.game-frame.adv iframe{height:min(88vh,820px)}

/* =====================================================
   نقلات الدخول الإبداعية لكل قسم
   ===================================================== */
.iris .fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.iris .in{z-index:3}
.iris.hide .in{opacity:0;transition:opacity .35s}
.iris[data-tr=curtain],.iris[data-tr=straps],.iris[data-tr=press]{background:transparent;clip-path:none!important;visibility:hidden;transition:none!important}
.iris[data-tr=curtain] .pat,.iris[data-tr=straps] .pat,.iris[data-tr=press] .pat{display:none}
.iris[data-tr=curtain].show,.iris[data-tr=curtain].hide,.iris[data-tr=straps].show,.iris[data-tr=straps].hide,.iris[data-tr=press].show,.iris[data-tr=press].hide{visibility:visible}
/* ١) حبر النيلة: يسقط من الأعلى ويغمر الشاشة */
.iris[data-tr=ink]{clip-path:circle(0% at 50% -12%)}
.iris[data-tr=ink].show{clip-path:circle(170% at 50% -12%);transition:clip-path 1.05s cubic-bezier(.6,0,.25,1)}
.iris[data-tr=ink].hide{clip-path:circle(0% at 50% 114%);transition:clip-path .95s cubic-bezier(.6,0,.25,1)}
.iris[data-tr=ink] .fx i{position:absolute;top:-30px;left:var(--x);width:calc(14px*var(--s));height:calc(22px*var(--s));border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:rgba(255,255,255,.75);animation:inkDrop .9s cubic-bezier(.5,0,.9,.6) var(--d) both}
@keyframes inkDrop{0%{transform:translateY(-20px);opacity:0}15%{opacity:1}100%{transform:translateY(105vh);opacity:.2}}
.iris[data-tr=ink] .fx .rp{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border-radius:50%;border:3px solid rgba(255,255,255,.6);opacity:0}
.iris[data-tr=ink].show .fx .rp{animation:rpOut 1.4s ease-out calc(.5s + var(--d,0s)) both}
@keyframes rpOut{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(14)}}
/* ٢) ستارة البرقع: شرائح قماش مطرّزة */
.iris[data-tr=curtain] .fx i{position:absolute;top:0;bottom:0;right:calc(var(--k)*12.5%);width:12.7%;background:linear-gradient(180deg,var(--c),var(--c2));box-shadow:inset -3px 0 0 rgba(233,181,108,.8),inset 3px 0 0 rgba(233,181,108,.8);transform:translateY(-102%)}
.iris[data-tr=curtain] .fx i::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:repeating-linear-gradient(180deg,#e9b56c 0 10px,transparent 10px 20px);opacity:.8}
.iris[data-tr=curtain].show .fx i{animation:cuIn .75s cubic-bezier(.7,0,.2,1) calc(var(--k)*75ms) both}
.iris[data-tr=curtain].hide .fx i{animation:cuOut .75s cubic-bezier(.7,0,.2,1) calc(var(--k)*60ms) both}
@keyframes cuIn{from{transform:translateY(-102%)}to{transform:translateY(0)}}
@keyframes cuOut{from{transform:translateY(0)}to{transform:translateY(102%)}}
/* ٣) نبض الطبل: مسح قطري بثلاث ضربات */
.iris[data-tr=beat]{clip-path:polygon(0 0,0 0,-25% 100%,0 100%)}
.iris[data-tr=beat].show{animation:beatIn 1.15s linear both;transition:none}
.iris[data-tr=beat].hide{animation:beatOut .9s cubic-bezier(.6,0,.3,1) both;transition:none}
@keyframes beatIn{0%{clip-path:polygon(0 0,0% 0,-25% 100%,0 100%);animation-timing-function:cubic-bezier(.1,.9,.3,1)}22%{clip-path:polygon(0 0,42% 0,17% 100%,0 100%)}34%{clip-path:polygon(0 0,42% 0,17% 100%,0 100%);animation-timing-function:cubic-bezier(.1,.9,.3,1)}56%{clip-path:polygon(0 0,78% 0,53% 100%,0 100%)}68%{clip-path:polygon(0 0,78% 0,53% 100%,0 100%);animation-timing-function:cubic-bezier(.1,.9,.3,1)}100%{clip-path:polygon(0 0,135% 0,110% 100%,0 100%)}}
@keyframes beatOut{from{clip-path:polygon(-30% 0,135% 0,135% 100%,-55% 100%)}to{clip-path:polygon(135% 0,135% 0,135% 100%,110% 100%)}}
.iris[data-tr=beat] .fx .rg{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;border:5px solid rgba(255,255,255,.8);opacity:0}
.iris[data-tr=beat].show .fx .rg{animation:rgBeat .8s ease-out var(--d) both}
@keyframes rgBeat{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(9)}}
/* ٤) ضغط القالب: لوحان يطبقان ثم ينفتحان */
.iris[data-tr=press] .fx .pa{position:absolute;left:0;right:0;height:50.4%;background:linear-gradient(135deg,var(--c2),var(--c));display:block}
.iris[data-tr=press] .fx .pa::after{content:'';position:absolute;inset:0;opacity:.28;background:repeating-radial-gradient(circle at 50% 100%,transparent 0 22px,#fff 22px 24px)}
.iris[data-tr=press] .fx .pt{top:0;transform:translateY(-101%);border-bottom:6px solid rgba(233,181,108,.9)}
.iris[data-tr=press] .fx .pb{bottom:0;transform:translateY(101%);border-top:6px solid rgba(233,181,108,.9)}
.iris[data-tr=press] .fx .pb::after{background:repeating-radial-gradient(circle at 50% 0,transparent 0 22px,#fff 22px 24px)}
.iris[data-tr=press].show .fx .pt{animation:prTop .6s cubic-bezier(.85,0,.25,1.15) both}
.iris[data-tr=press].show .fx .pb{animation:prBot .6s cubic-bezier(.85,0,.25,1.15) both}
.iris[data-tr=press].hide .fx .pt{animation:prTopOut .75s cubic-bezier(.7,0,.2,1) both}
.iris[data-tr=press].hide .fx .pb{animation:prBotOut .75s cubic-bezier(.7,0,.2,1) both}
@keyframes prTop{to{transform:translateY(0)}}@keyframes prBot{to{transform:translateY(0)}}
@keyframes prTopOut{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes prBotOut{from{transform:translateY(0)}to{transform:translateY(101%)}}
.iris[data-tr=press] .fx .sh{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border-radius:50%;border:6px solid rgba(255,255,255,.85);opacity:0}
.iris[data-tr=press].show .fx .sh{animation:shock .75s ease-out calc(.5s + var(--d,0s)) both}
@keyframes shock{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(8)}}
/* ٥) أحزمة الهبّان الجلدية */
.iris[data-tr=straps] .fx i{position:absolute;left:0;right:0;top:calc(var(--k)*14.3%);height:14.5%;background:linear-gradient(90deg,var(--c2),var(--c) 55%,var(--c2));box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
.iris[data-tr=straps] .fx i::before,.iris[data-tr=straps] .fx i::after{content:'';position:absolute;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,rgba(255,235,200,.8) 0 9px,transparent 9px 18px)}
.iris[data-tr=straps] .fx i::before{top:7px}.iris[data-tr=straps] .fx i::after{bottom:7px}
.iris[data-tr=straps] .fx i:nth-child(odd){transform:translateX(-102%)}
.iris[data-tr=straps] .fx i:nth-child(even){transform:translateX(102%)}
.iris[data-tr=straps].show .fx i{animation:stIn .7s cubic-bezier(.7,0,.2,1) calc(var(--k)*70ms) both}
.iris[data-tr=straps].hide .fx i{animation:stOut .7s cubic-bezier(.7,0,.2,1) calc(var(--k)*55ms) both}
@keyframes stIn{to{transform:translateX(0)}}
@keyframes stOut{from{transform:translateX(0)}}
.iris[data-tr=straps].hide .fx i:nth-child(odd){animation-name:stOutR}
.iris[data-tr=straps].hide .fx i:nth-child(even){animation-name:stOutL}
@keyframes stOutR{from{transform:translateX(0)}to{transform:translateX(102%)}}
@keyframes stOutL{from{transform:translateX(0)}to{transform:translateX(-102%)}}
/* بداية قوية للصفحة بعد النقلة */
.view.enter .banner{animation:bnBlast 1.5s var(--ease) both}
@keyframes bnBlast{0%{transform:scale(.9) translateY(40px);filter:brightness(2.4) blur(8px);opacity:0}45%{filter:brightness(1.35) blur(0);opacity:1}100%{transform:none;filter:none;opacity:1}}
.view.enter .banner .kick{animation:kickIn 1s var(--spring) .35s both}
@keyframes kickIn{from{transform:translateX(60px) scale(.7);opacity:0}}
.view.enter .banner::after{animation:sweep 2.2s ease-in-out .5s 1 both}
.view.enter .hub-orbit{animation:hubSpin 1.6s var(--ease) both}
@keyframes hubSpin{from{transform:scale(.55) rotate(-70deg);opacity:0}to{transform:none;opacity:1}}
.newspaper{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
.newspaper .np{cursor:zoom-in;border-radius:18px;overflow:hidden;border:2px solid #e8d3a8;box-shadow:0 24px 40px -28px #46204f}
.newspaper .np img{width:100%;height:auto;aspect-ratio:auto;display:block}
@media(max-width:860px){.newspaper{grid-template-columns:minmax(0,1fr)}}

/* ===== إصلاح: العناصر المتتابعة تستقر في مكانها ===== */
.reveal.in,.reveal.in[data-fx]{opacity:1;translate:0 0;scale:1;rotate:0deg}
.reveal[data-fx=right]{translate:60px 18px}.reveal[data-fx=left]{translate:-60px 18px}
.tl .it,.hb-facts>*,.split>*,.chips>*,.list>*{min-width:0}

/* ===== رموز تعبيرية ===== */
.block>h2 .emo{display:inline-block;font-size:.95em;animation:emoBob 3.2s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
@keyframes emoBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(8deg)}}
.emo-float{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.emo-float i{position:absolute;font-style:normal;font-size:clamp(26px,4vw,46px);opacity:0;animation:emoRise 9s ease-in-out infinite;animation-delay:calc(var(--i)*2.2s);inset-inline-start:calc(12% + var(--i)*21%);bottom:-10%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
@keyframes emoRise{0%{opacity:0;transform:translateY(0) rotate(-12deg) scale(.7)}15%{opacity:.9}70%{opacity:.85}100%{opacity:0;transform:translateY(-330px) rotate(14deg) scale(1.15)}}
.btn .emo{margin-inline-end:4px}

/* ===== زر نهاية الصفحة: «تعرّف على حكاية …» ===== */
.next-cta{position:relative;isolation:isolate;overflow:hidden;margin-top:40px;padding:clamp(22px,4vw,42px);border-radius:34px;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,30px);align-items:center;color:#fff;background:linear-gradient(125deg,var(--c2),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#fff));box-shadow:0 40px 70px -36px var(--c2)}
.next-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);animation:sweep 5.5s ease-in-out 1s infinite}
.next-cta::after{content:'';position:absolute;inset:0;z-index:-2;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 6l9 19 19-9-9 19 19 9-19 9 9 19-19-9-9 19-9-19-19 9 9-19-19-9 19-9-9-19 19 9z' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");animation:latt 40s linear infinite}
.nc-orbs i{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:orbF 8s ease-in-out infinite}
.nc-orbs i:nth-child(1){width:120px;height:120px;top:-30px;inset-inline-end:8%}.nc-orbs i:nth-child(2){width:60px;height:60px;bottom:14%;inset-inline-end:30%;animation-delay:-2s}
.nc-orbs i:nth-child(3){width:90px;height:90px;bottom:-30px;inset-inline-start:14%;animation-delay:-4s}.nc-orbs i:nth-child(4){width:26px;height:26px;top:20%;inset-inline-start:40%;animation-delay:-1s}.nc-orbs i:nth-child(5){width:44px;height:44px;top:10%;inset-inline-start:6%;animation-delay:-5s}
@keyframes orbF{50%{transform:translate(18px,-22px) scale(1.12)}}
.nc-rings b{position:absolute;inset-inline-start:calc(clamp(22px,4vw,42px) + 50px);top:50%;width:100px;height:100px;margin:-50px;border-radius:50%;border:3px solid rgba(255,255,255,.55);opacity:0;animation:ncRing 3.2s ease-out infinite}
.nc-rings b:nth-child(2){animation-delay:1s}.nc-rings b:nth-child(3){animation-delay:2s}
@keyframes ncRing{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}
.nc-ic{position:relative;width:clamp(86px,12vw,120px);height:clamp(86px,12vw,120px);border-radius:32%;display:grid;place-items:center;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.7);backdrop-filter:blur(4px);transform:scale(0) rotate(-180deg)}
.nc-ic svg{width:52%;height:52%;stroke-width:1.7}
.nc-ic em{position:absolute;top:-14px;inset-inline-start:-14px;font-style:normal;font-size:34px;animation:emoBob 2.6s ease-in-out infinite}
.next-cta.in .nc-ic{animation:ncIcon 1.1s var(--spring) .15s forwards,icoWob 4s ease-in-out 1.4s infinite}
@keyframes ncIcon{to{transform:scale(1) rotate(0)}}
@keyframes icoWob{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-7deg) scale(1.07)}}
.nc-t small{display:inline-block;padding:4px 14px;border-radius:99px;background:rgba(255,255,255,.2);font-weight:800;font-size:13.5px;opacity:0}
.nc-t h3{margin:8px 0 6px;font-size:clamp(24px,4.4vw,46px);line-height:1.3;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.nc-t h3 .w{display:inline-block;opacity:0;transform:translateY(40px) rotateX(70deg)}
.nc-t p{margin:0;opacity:0;font-size:clamp(13.5px,1.7vw,17px);line-height:1.8;max-width:620px}
.next-cta.in .nc-t small{animation:fadeUp .8s var(--ease) .3s forwards}
.next-cta.in .nc-t h3 .w{animation:wordUp .9s var(--spring) calc(.45s + var(--i)*.14s) forwards}
.next-cta.in .nc-t p{animation:fadeUp .9s var(--ease) 1.1s forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
.nc-btns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;opacity:0}
.next-cta.in .nc-btns{animation:fadeUp .9s var(--ease) 1.3s forwards}
.btn.big{padding:16px 30px;font-size:clamp(15px,2vw,19px);border-radius:99px;animation:ctaGlow 2.6s ease-in-out 2s infinite,ctaNudge 2.4s ease-in-out 2s infinite}
@keyframes ctaNudge{50%{transform:translateX(-8px)}}
.next-cta .btn.alt{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6)}
@media(max-width:620px){.next-cta{grid-template-columns:1fr;text-align:center;justify-items:center}.nc-btns{justify-content:center}.nc-t p{margin-inline:auto}}

/* ===== شريط التنقّل العائم في صفحة الألعاب ===== */
.gdock{position:fixed;left:14px;bottom:18px;z-index:70;display:none;flex-direction:column;gap:8px;padding:8px;border-radius:24px;background:rgba(255,251,240,.94);backdrop-filter:blur(10px);border:2px solid #e9b56c;box-shadow:0 22px 40px -18px rgba(90,58,13,.7);animation:fadeUp .6s var(--ease) both}
.gdock.on{display:flex}
.gdock button{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:16px;background:#fff;border:1.5px solid #ecd9b2;font-weight:900;font-size:14px;color:#5a3a0d;transition:transform .3s var(--spring),background .3s}
.gdock button:hover{transform:translateX(4px);background:#fff3d6}
@media(max-width:1180px){.gdock{bottom:96px}.gdock button span{display:none}.gdock button{padding:10px;font-size:20px}}
.q-hint{margin:10px 0 0!important;font-size:12.5px!important;color:#8a6a3b!important}

/* ===== معرض آلات البرعة ===== */
.inst-block{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
.inst-block>h2,.inst-block>.lead{padding-inline:6px}
.inst-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:34px;padding:clamp(22px,4vw,44px);background:radial-gradient(ellipse at 50% 40%,#b5521a 0%,#7a2f0a 55%,#3d1405 100%);box-shadow:0 40px 70px -38px #3d1405,inset 0 0 0 3px rgba(233,181,108,.55)}
.is-rays{position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;translate:-50% -50%;z-index:-2;background:repeating-conic-gradient(from 0deg,rgba(255,214,140,.2) 0 7deg,transparent 7deg 16deg);animation:spin 70s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 8%,transparent 55%);mask-image:radial-gradient(circle,#000 8%,transparent 55%)}
.inst-stage::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--books) center/cover no-repeat;mix-blend-mode:soft-light;opacity:.35}
.inst-stage::after{content:'';position:absolute;inset:14px;border-radius:24px;border:2px dashed rgba(233,181,108,.5);pointer-events:none}
.is-notes i{position:absolute;bottom:-30px;font-style:normal;font-size:clamp(24px,3.4vw,40px);color:rgba(255,226,170,.7);animation:emoRise 8s ease-in-out infinite}
.is-notes i:nth-child(1){inset-inline-start:8%}.is-notes i:nth-child(2){inset-inline-start:24%;animation-delay:-2s}.is-notes i:nth-child(3){inset-inline-start:42%;animation-delay:-4s}.is-notes i:nth-child(4){inset-inline-start:60%;animation-delay:-1s}.is-notes i:nth-child(5){inset-inline-start:76%;animation-delay:-5s}.is-notes i:nth-child(6){inset-inline-start:90%;animation-delay:-3s}
.is-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.is-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;aspect-ratio:3/4;padding:12px 10px 14px;border-radius:26px;color:#fff;text-align:center;background:linear-gradient(170deg,rgba(255,235,200,.22),rgba(255,235,200,.06));border:2px solid rgba(255,220,160,.6);backdrop-filter:blur(3px);transition:transform .5s var(--spring),box-shadow .4s,background .4s;animation:isFloat 5s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
@keyframes isFloat{50%{transform:translateY(-8px)}}
.is-card:hover{transform:translateY(-12px) scale(1.04);box-shadow:0 30px 40px -24px #000;background:linear-gradient(170deg,rgba(255,235,200,.34),rgba(255,235,200,.12))}
.is-pic{position:relative;flex:1;width:100%;display:grid;place-items:center;min-height:0}
.is-pic::before{content:'';position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,170,.55),transparent 70%)}
.is-pic img{position:relative;max-width:88%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(0,0,0,.55));transition:transform .4s var(--spring)}
.is-card b{font-size:clamp(14px,1.8vw,19px);text-shadow:0 2px 8px rgba(0,0,0,.5)}
.is-card small{font-size:12px;color:#ffe3b0;font-weight:700}
.is-card[data-k=flute] .is-pic img{max-width:98%}
.is-card.hit .is-pic img{animation:instHit .8s var(--spring)}
@keyframes instHit{0%{transform:scale(1)}18%{transform:scale(.88) rotate(-4deg)}40%{transform:scale(1.12) rotate(3deg)}70%{transform:scale(.97) rotate(-1deg)}100%{transform:none}}
.is-rip{position:absolute;left:50%;top:45%;width:40px;height:40px;margin:-20px;border-radius:50%;border:4px solid rgba(255,235,190,.9);opacity:0;pointer-events:none}
.is-card.hit .is-rip{animation:rpOut .9s ease-out both}
@media(max-width:760px){.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== زر الانتقال في أقصى اليسار ===== */
.nc-btns{flex-direction:row-reverse;justify-content:flex-start}
.next-cta .nc-btns{width:100%}
@media(max-width:620px){.nc-btns{justify-content:center}}
.is-card{justify-content:space-between;gap:6px}
.is-pic{flex:none;height:66%;min-height:0;width:100%}
.is-pic img{max-height:100%;max-width:92%;width:auto;height:auto}
.is-card[data-k=flute] .is-pic img{max-width:100%}
.is-card b,.is-card small{flex:none}
.is-pic{height:clamp(130px,16.5vw,225px);overflow:visible}
.is-pic img{max-height:clamp(130px,16.5vw,225px)}
.is-card{aspect-ratio:auto;min-height:clamp(220px,25vw,340px)}
@media(max-width:760px){.is-pic{height:150px}.is-pic img{max-height:150px}.is-card{min-height:230px}}

/* =====================================================
   صفحة البداية: خلفية الرئيسية الحيّة + برج النهضة + ظهور الدائرة
   ===================================================== */
.gate{background:radial-gradient(ellipse at 50% 44%,rgba(11,47,38,.10) 0%,rgba(11,47,38,.34) 55%,rgba(11,47,38,.74) 100%),linear-gradient(180deg,rgba(11,47,38,.25),rgba(11,47,38,0) 30%,rgba(11,47,38,.35))}
body[data-view=gate] .scene,body[data-view=start] .scene{opacity:1!important;filter:none!important}
body[data-view=gate] .books,body[data-view=start] .books{opacity:1!important}
.g-lattice{opacity:.035}
.g-tower{position:absolute;z-index:1;inset-inline-start:max(2vw,calc(50% - 760px));bottom:-2vh;height:min(66vh,560px);aspect-ratio:422/565;pointer-events:none;opacity:0;animation:towerIn 3.2s var(--ease) 2.4s forwards}
.g-tower img{width:100%;height:100%;object-fit:contain;display:block;filter:sepia(.25) saturate(.9) drop-shadow(0 0 30px rgba(233,181,108,.45));-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%);animation:towerFloat 9s ease-in-out infinite alternate}
@keyframes towerIn{from{opacity:0;transform:translateY(60px) scale(.94);filter:blur(10px)}to{opacity:.3;transform:none;filter:blur(0)}}
@keyframes towerFloat{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.gate.again .g-tower{animation:none;opacity:.3}
@media(max-width:900px){.g-tower{height:44vh;inset-inline-start:-6vw;opacity:.22}}
#gfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
/* ٢) رسم الإطار الذهبي ثم ظهور الدائرة */
.rim-draw{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible;pointer-events:none}
.rim-draw circle{fill:none;stroke:#e9b56c;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1232;stroke-dashoffset:0;filter:drop-shadow(0 0 8px rgba(233,181,108,.95));transform-origin:50% 50%;transform:rotate(-90deg);animation:rimDraw 1.6s cubic-bezier(.6,0,.3,1) .15s backwards}
@keyframes rimDraw{from{stroke-dashoffset:1232}}
.medal{animation-delay:1.75s!important}
.g-title .w{animation-delay:calc(var(--i)*.2s + 2.5s)!important}
.g-title .l1 .w{animation-delay:2.5s,4.2s!important}
.g-title .l2 .w{animation-delay:calc(var(--i)*.2s + 2.5s)!important}
.medal .ico{animation-delay:3.1s!important}
.orbit-wrap{animation-delay:2.9s!important}
.siraj{animation-delay:.2s!important}
.g-sub{animation-delay:4.3s!important}
.plaque.right{animation-delay:4.2s!important}.plaque.left{animation-delay:4.4s!important}
.cta{animation-delay:4.8s!important}
.listen{animation-delay:4s!important}
.medal-pulse{animation:none}
.gate.again .medal,.gate.again .orbit-wrap{animation:none!important}
.gate .cta{animation:ctaIn 1s var(--spring) 4.8s both,ctaGlow 3.2s ease-in-out 6s infinite!important}
.gate.again .cta{animation:ctaGlow 3.2s ease-in-out infinite!important}

/* =====================================================
   معرض آلات البرعة (صورة واحدة + أسماء)
   ===================================================== */
.gal{position:relative;isolation:isolate;overflow:hidden;border-radius:34px;padding:clamp(18px,3vw,36px) clamp(16px,3vw,36px) clamp(16px,2.4vw,26px);background:radial-gradient(ellipse at 50% 38%,#b5521a 0%,#7a2f0a 55%,#3d1405 100%);box-shadow:0 40px 70px -38px #3d1405,inset 0 0 0 3px rgba(233,181,108,.55);text-align:center;color:#fff}
.gal::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--books) center/cover no-repeat;mix-blend-mode:soft-light;opacity:.35}
.gal::after{content:'';position:absolute;inset:12px;border-radius:24px;border:2px dashed rgba(233,181,108,.5);pointer-events:none;z-index:0}
.gal-main{position:relative;height:clamp(230px,38vw,400px);display:grid;place-items:center;cursor:pointer;outline:0;z-index:1;-webkit-tap-highlight-color:transparent}
.gal-main::before{content:'';position:absolute;left:50%;top:50%;width:min(60%,380px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,170,.6),transparent 70%);animation:glow 5s ease-in-out infinite}
.gal-slide{position:relative;display:grid;place-items:center;width:100%;height:100%}
.gal-slide img{max-width:min(86%,520px);max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(0,0,0,.6));animation:galFloat 5s ease-in-out infinite;pointer-events:none}
@keyframes galFloat{50%{translate:0 -8px}}
.gal-slide.in-0{animation:galIn0 1s var(--spring) both}
.gal-slide.in-1{animation:galIn1 1s var(--spring) both}
.gal-slide.in-2{animation:galIn2 1s var(--spring) both}
.gal-slide.out-0{animation:galOut0 .7s cubic-bezier(.6,0,.9,.4) both}
.gal-slide.out-1{animation:galOut1 .7s cubic-bezier(.6,0,.9,.4) both}
.gal-slide.out-2{animation:galOut2 .7s cubic-bezier(.6,0,.9,.4) both}
@keyframes galIn0{from{opacity:0;transform:scale(.2) rotate(-200deg);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes galIn1{from{opacity:0;transform:translateY(-120px) scale(1.5) rotate(14deg);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes galIn2{from{opacity:0;transform:translateX(-160px) scale(.5) rotateY(80deg);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes galOut0{to{opacity:0;transform:scale(.1) rotate(220deg);filter:blur(10px)}}
@keyframes galOut1{to{opacity:0;transform:translateY(130px) scale(.4) rotate(-18deg);filter:blur(12px)}}
@keyframes galOut2{to{opacity:0;transform:translateX(170px) scale(1.4) rotateY(-80deg);filter:blur(8px)}}
.gal-fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.gal-fx i{position:absolute;left:50%;top:50%;font-style:normal;font-size:24px;color:#ffe3a0;text-shadow:0 0 12px #ffd070;opacity:0;animation:galSp .9s ease-out both}
@keyframes galSp{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.5) rotate(120deg)}}
.gal-cap{position:relative;z-index:1;margin-top:6px;min-height:78px}
.gc-n{display:block;font-size:clamp(22px,3.6vw,38px);font-weight:900;text-shadow:0 4px 18px rgba(0,0,0,.55)}
.gc-n span{display:inline-block;opacity:0}
.gal-cap.in .gc-n span{animation:gcIn .6s var(--spring) calc(var(--k)*40ms + 250ms) both}
@keyframes gcIn{from{opacity:0;transform:translateY(22px) scale(.5)}to{opacity:1;transform:none}}
.gal-cap small{display:block;margin-top:2px;color:#ffe3b0;font-weight:700;font-size:14px;opacity:0}
.gal-cap.in small{animation:fadeUp .7s var(--ease) .7s both}
.gal-hint{position:relative;z-index:1;display:inline-flex;gap:6px;align-items:center;padding:4px 14px;border-radius:99px;background:rgba(255,255,255,.14);font-weight:800;font-size:12.5px;color:#ffe9c0;animation:hintNudge 2.2s ease-in-out infinite}
.gal-hint svg{width:16px;height:16px}
@keyframes hintNudge{50%{transform:translateX(-6px)}}
.gal-nav{position:absolute;top:34%;z-index:3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,225,170,.7);backdrop-filter:blur(4px);transition:transform .35s var(--spring),background .3s}
.gal-nav:hover{transform:scale(1.14);background:rgba(255,225,170,.35)}
.gal-nav svg{width:22px;height:22px}
.gal-prev{inset-inline-start:clamp(10px,3vw,30px)}.gal-prev svg{transform:scaleX(-1)}
.gal-next{inset-inline-end:clamp(10px,3vw,30px)}
.gal-thumbs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1.4vw,14px);margin-top:16px}
.gal-th{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;border-radius:18px;background:rgba(255,235,200,.1);border:2px solid rgba(255,220,160,.3);color:#fff;transition:transform .4s var(--spring),background .3s,border-color .3s}
.gal-th:hover{transform:translateY(-4px);background:rgba(255,235,200,.2)}
.gal-th.on{background:rgba(255,235,200,.28);border-color:#ffd98a;transform:translateY(-6px);box-shadow:0 18px 26px -18px #000}
.gt-pic{display:grid;place-items:center;width:100%;height:clamp(46px,8vw,86px)}
.gt-pic img{max-width:92%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.gal-th b{font-size:clamp(11px,1.5vw,15px);line-height:1.4}
@media(max-width:620px){.gal-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}.gal-th b{font-size:10px}.gal-nav{display:none}}

/* =====================================================
   إصلاح: لا تظهر محتويات الموقع (الشريط المتحرك) خلف البداية
   ===================================================== */
body[data-view=start] #main{visibility:hidden}
body[data-view=start] .scrollbar{opacity:0}

/* =====================================================
   الانتقال من البداية إلى الرئيسية: تكوين الدائرة تدريجيًّا
   ===================================================== */
.gate.leaving{transition:opacity 2s ease,transform 2.4s var(--ease),filter 2s!important;transform:scale(1.12);filter:blur(6px)}
.hub.building .hub-head .kick{animation:hbIn 1s var(--ease) 4.6s both}
.hub.building .hub-head h2 .w{display:inline-block;opacity:0;animation:wordUp .9s var(--spring) calc(5s + var(--i)*.16s) both}
.hub.building .hub-orbit{animation:none}
.hub.building .hub-orbit .ring{animation:ringGrow 2.2s var(--ease) 1.2s both,spin 90s linear infinite 3.4s}
.hub.building .hub-orbit .ring2{animation:ringGrow 2.4s var(--ease) 1.5s both,spinr 60s linear infinite 3.9s}
@keyframes ringGrow{from{opacity:0;transform:scale(.2) rotate(-120deg)}to{opacity:1;transform:none}}
.hub.building .hub-core{clip-path:circle(0% at 50% 50%);animation:coreBuild 1.8s var(--ease) 1s both,morph 14s ease-in-out 3s infinite}
@keyframes coreBuild{0%{clip-path:circle(0% at 50% 50%);transform:rotate(-200deg) scale(.4)}60%{clip-path:circle(80% at 50% 50%)}100%{clip-path:circle(80% at 50% 50%);transform:none}}
.hub.building .node{opacity:0;animation:nodeBuild 1.7s var(--ease) calc(2.6s + var(--k)*.85s) both}
@keyframes nodeBuild{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.1)}12%{opacity:1}100%{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--S)*-.5 + var(--S)*.02)) scale(1)}}
.hub.building .node .node-pic{animation:nodeSpinIn 1.7s var(--ease) calc(2.6s + var(--k)*.85s) both,nodeBob 5s ease-in-out calc(4.5s + var(--k)*.85s) infinite}
@keyframes nodeSpinIn{from{rotate:-540deg}to{rotate:0deg}}
.hub.building .node .lab,.hub.building .node .num{opacity:0;animation:fadeUp .8s var(--ease) calc(4s + var(--k)*.85s) both}
.hub.building .node::before{animation-delay:calc(4.2s + var(--k)*.85s)}
.hub.building .hub-pills a{animation:pillIn .8s var(--spring) both;animation-delay:calc(7.2s + var(--i)*.14s)!important}
.hub.building .hub-pills{opacity:1}
@keyframes hbIn{from{opacity:0;transform:translateY(-14px)}}
.hub.building .hub-head{animation:hbIn 1s var(--ease) 4.4s both}
.gal-slide img{width:auto;height:100%;max-height:100%;padding:6px 0}
.gal-slide{height:100%}
.gt-pic{display:block;position:relative;width:100%;height:clamp(46px,8vw,86px);overflow:hidden}
.gt-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.gal-th{overflow:hidden}
.gal-th b{display:block;margin-top:2px}
.gal-slide{position:absolute;inset:0;height:auto;grid-template-rows:100%;grid-template-columns:100%}
.gal-slide img{width:auto;height:auto;max-width:min(86%,520px);max-height:100%;padding:0;min-height:0;min-width:0}

/* =====================================================
   بداية كل صفحة: لافتة بملء الشاشة بموشن جرافيك خاص ثم تثبّت في الأعلى
   ===================================================== */
.banner.hero{min-height:calc(100svh - var(--nav-h) - 30px);max-height:860px;align-items:center;padding:clamp(26px,5vw,70px);margin-top:12px}
.hero-t{position:relative;z-index:3;max-width:min(760px,100%)}
.banner.hero h1{font-size:clamp(54px,11vw,150px);line-height:1.1;margin:10px 0 8px;animation:none;filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}
.banner.hero h1 .hw{display:inline-block;opacity:0;animation:heroWord 1.2s var(--spring) calc(.5s + var(--i)*.22s) both}
@keyframes heroWord{from{opacity:0;transform:translateY(90px) rotate(8deg) scale(.6);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.banner.hero p{font-size:clamp(15px,2vw,22px);max-width:620px;animation:fadeUp 1.1s var(--ease) 1.1s both}
.banner.hero .kick{animation:kickIn 1s var(--spring) .2s both}
.banner.hero .chips{animation:fadeUp 1s var(--ease) 1.4s both}
.banner.hero .motif{z-index:2;width:clamp(120px,24vw,320px);animation:motifIn 1.6s var(--ease) .3s both}
@keyframes motifIn{from{opacity:0;transform:scale(.3) rotate(-160deg)}to{opacity:.95;transform:none}}
.banner.hero::before{z-index:1}
.hf{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hf-cue{position:absolute;bottom:18px;left:50%;translate:-50% 0;z-index:4;display:grid;justify-items:center;gap:6px;color:#fff;opacity:0;animation:fadeUp 1s var(--ease) 2.2s both}
.hf-cue span{width:26px;height:42px;border-radius:16px;border:2.5px solid rgba(255,255,255,.85);position:relative}
.hf-cue span::after{content:'';position:absolute;left:50%;top:7px;width:5px;height:9px;margin-left:-2.5px;border-radius:3px;background:#fff;animation:cueD 1.6s ease-in-out infinite}
@keyframes cueD{0%{transform:translateY(0);opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.hf-cue small{font-weight:800;font-size:12.5px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
/* النيلة: قطرات وأمواج زرقاء */
.hf-drop{position:absolute;top:-30px;left:var(--x);width:calc(14px*var(--s));height:calc(22px*var(--s));border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(#bcd2ff,#4d7be0);box-shadow:0 0 14px rgba(120,170,255,.8);animation:hfDrop 2.6s cubic-bezier(.5,0,.9,.6) var(--d) infinite}
@keyframes hfDrop{0%{transform:translateY(0);opacity:0}10%{opacity:.95}85%{opacity:.9}100%{transform:translateY(105vh);opacity:0}}
.hf-waves{position:absolute;left:0;right:0;bottom:0;width:200%;height:36%}
.hf-waves path{animation:wvSlide 9s linear infinite}
.hf-waves .w1{fill:rgba(77,123,224,.55)}.hf-waves .w2{fill:rgba(36,87,184,.65);animation-duration:7s;animation-direction:reverse}.hf-waves .w3{fill:rgba(13,42,107,.8);animation-duration:12s}
@keyframes wvSlide{to{transform:translateX(-25%)}}
.hf-rip{position:absolute;left:50%;bottom:8%;width:120px;height:34px;margin-left:-60px;border-radius:50%;border:3px solid rgba(255,255,255,.6);opacity:0;animation:hfRip 3s ease-out var(--d) infinite}
@keyframes hfRip{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(7)}}
/* البرقع: تطريز وخيوط */
.hf-rose{position:absolute;right:-60px;top:-60px;width:min(46vw,460px);opacity:.35;animation:spin 60s linear infinite}
.hf-thread{position:absolute;inset:0;width:100%;height:100%}
.hf-thread path{fill:none;stroke:#e9b56c;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 12;animation:thDraw 9s linear infinite;filter:drop-shadow(0 0 6px rgba(233,181,108,.8))}
.hf-thread .t2{stroke:#fff;stroke-width:2;opacity:.6;animation-duration:12s;animation-direction:reverse}
@keyframes thDraw{to{stroke-dashoffset:-260}}
.hf-star{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;background:#ffe9b0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:hfTw 2.6s ease-in-out var(--d) infinite}
@keyframes hfTw{0%,100%{opacity:.15;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.3) rotate(90deg)}}
/* البرعة: نبض الطبل وموجات الصوت */
.hf-ring{position:absolute;left:24%;top:50%;width:140px;height:140px;margin:-70px;border-radius:50%;border:5px solid rgba(255,230,180,.75);opacity:0;animation:hfBeat 2.6s ease-out var(--d) infinite}
@keyframes hfBeat{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(5.5)}}
.hf-eq{position:absolute;left:0;right:0;bottom:0;height:42%;display:flex;align-items:flex-end;gap:1.2%;padding:0 2%}
.hf-eq i{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(0deg,rgba(255,200,120,.75),rgba(255,255,255,.1));transform-origin:bottom;animation:hfEq 1.1s ease-in-out calc(var(--i)*-.13s) infinite alternate}
@keyframes hfEq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.hf-note{position:absolute;bottom:-30px;left:var(--x);font-size:clamp(26px,4vw,48px);color:rgba(255,236,190,.8);animation:emoRise 7s ease-in-out var(--d) infinite}
/* خبز القالب: بخار وسنابل وختم */
.hf-steam{position:absolute;bottom:-60px;left:var(--x);width:var(--w);height:var(--w);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);filter:blur(6px);animation:hfSteam 5.5s ease-out var(--d) infinite}
@keyframes hfSteam{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.8}100%{opacity:0;transform:translate(30px,-110vh) scale(2.4)}}
.hf-wheat{position:absolute;bottom:-10px;height:62%;width:auto;transform-origin:50% 100%;animation:hfSway 5s ease-in-out infinite alternate;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));opacity:.9}
.hf-wheat.l{left:2%}.hf-wheat.r{right:46%;height:48%;animation-delay:-2s}
@keyframes hfSway{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
.hf-stamp{position:absolute;right:-70px;bottom:-70px;width:min(44vw,420px);opacity:.3;animation:spin 50s linear infinite}
/* الهبّان: أحزمة جلد وخرز */
.hf-strap{position:absolute;left:-10%;right:-10%;top:calc(var(--k)*15% - 4%);height:7%;background:linear-gradient(90deg,transparent,rgba(120,40,20,.55) 30%,rgba(190,90,50,.55) 60%,transparent);transform:rotate(-8deg) translateX(-110%);animation:hfStrap 6.5s var(--ease) var(--d) infinite alternate}
.hf-strap::after{content:'';position:absolute;left:0;right:0;top:50%;border-top:3px dashed rgba(255,236,200,.75)}
@keyframes hfStrap{to{transform:rotate(-8deg) translateX(0)}}
.hf-stitch{position:absolute;right:-50px;top:50%;width:min(44vw,430px);translate:0 -50%;opacity:.5;animation:spin 40s linear infinite}
.hf-bead{position:absolute;top:0;left:var(--x);width:3px;height:var(--l);background:rgba(255,236,200,.7);animation:hfBead 4.2s ease-in-out var(--d) infinite alternate;transform-origin:top}
.hf-bead::after{content:'';position:absolute;bottom:-9px;left:-7px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe3a0,#cc8d45);box-shadow:0 4px 8px rgba(0,0,0,.4)}
@keyframes hfBead{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.hf.gen .hf-ring{left:80%}

/* اللافتة المثبّتة أعلى الصفحة */
.hero-pin{position:fixed;top:var(--nav-h);left:0;right:0;z-index:38;pointer-events:none;transform:translateY(-130%);opacity:0;transition:transform .6s var(--spring),opacity .4s}
.hero-pin.on{transform:none;opacity:1;pointer-events:auto}
.hp-in{display:flex;align-items:center;gap:12px;max-width:min(1180px,96vw);margin:8px auto 0;padding:7px 18px 7px 8px;border-radius:99px;background:linear-gradient(100deg,var(--c2),var(--c));color:#fff;box-shadow:0 18px 34px -16px var(--c2)}
.hp-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.hp-ic svg{width:21px;height:21px}
.hp-t{font-size:clamp(16px,2.4vw,21px)}
.hp-k{opacity:.85;font-weight:700}
.hp-up{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:13px}
.hp-bar{position:absolute;left:max(2vw,calc(50% - 590px));right:max(2vw,calc(50% - 590px));bottom:-4px;height:3px;border-radius:3px;background:var(--gold);transform-origin:100% 50%;transform:scaleX(0)}
body[data-view=hub] .hero-pin,body[data-view=start] .hero-pin{display:none}
@media(max-width:700px){.hp-k{display:none}.banner.hero h1{font-size:clamp(48px,16vw,90px)}.banner.hero{min-height:calc(100svh - var(--nav-h) - 100px)}}

/* =====================================================
   قارئ صفحات الموسوعة: عدسة متنقّلة بين أجزاء الصفحة
   ===================================================== */
.rd{border-radius:28px;padding:clamp(12px,2vw,22px);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,#fff),#fffdf7);border:2px solid color-mix(in srgb,var(--c) 30%,#fff)}
.rd-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rd-tabs button{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:99px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 40%,#fff);color:var(--c2);font-weight:800;transition:all .3s}
.rd-tabs button svg{width:16px;height:16px}
.rd-tabs button.on{background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;border-color:transparent;box-shadow:0 12px 20px -12px var(--c)}
.rd-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(12px,2vw,22px);align-items:start}
.rd-view{position:relative;overflow:hidden;direction:ltr;width:100%;max-height:78vh;border-radius:20px;background:#fff;border:3px solid #fff;box-shadow:0 26px 44px -26px var(--c2);cursor:zoom-in;outline:0;transition:aspect-ratio .6s}
.rd-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.rd-cam img{display:block;max-width:none;height:auto}
.rd-badge{position:absolute;top:10px;left:10px;z-index:3;padding:4px 14px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-weight:800;font-size:12.5px;direction:rtl}
.rd-lens{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 70%,#fff),inset 0 0 40px rgba(0,0,0,.18)}
.rd-view.flash::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);animation:rdFlash .9s ease-out both;pointer-events:none}
@keyframes rdFlash{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.rd-nav{position:absolute;top:50%;z-index:3;width:42px;height:42px;margin-top:-21px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;border:2px solid rgba(255,255,255,.7);opacity:.9}
.rd-nav svg{width:20px;height:20px}

.rd-side{display:grid;gap:12px}
.rd-map{position:relative;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 18px 30px -22px var(--c2);max-height:48vh;background:#fff}
.rd-map img{display:block;width:100%;height:auto;max-height:48vh;object-fit:contain;margin:auto}
.rd-hl{position:absolute;border:3px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);border-radius:6px;box-shadow:0 0 0 999px rgba(0,0,0,.28);transition:all 1.1s cubic-bezier(.6,0,.2,1)}
.rd-chips{display:flex;gap:8px;flex-wrap:wrap}
.rd-chips button{width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid color-mix(in srgb,var(--c) 40%,#fff);color:var(--c2);font-weight:900;transition:all .3s var(--spring)}
.rd-chips button.on{background:var(--c);color:#fff;transform:scale(1.15)}
.rd-tools{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:860px){.rd-grid{grid-template-columns:minmax(0,1fr)}.rd-map{max-height:34vh}}
/* لا نصف ممتلئ ونصف فارغ: عنصر وحيد يملأ العرض */
.split>:only-child,.scans>:only-child{grid-column:1/-1}
.hb-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.hb-pair{grid-template-columns:1fr}}
html,body{overflow-x:clip}
html.lock,html.lock body{overflow:hidden}
body[data-view=start]{overflow:hidden}
/* الفيديو الطولي: مسرح بخلفية من الصورة نفسها فلا يبقى نصف فارغ */
.vgrid:has(.vstage){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vstage{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;padding:clamp(14px,3vw,30px);border-radius:26px;min-height:100%}
.vs-bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);max-width:none;object-fit:cover;z-index:-2;filter:blur(22px) saturate(1.3);transform:scale(1.15)}
.vstage::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 50%,transparent),rgba(0,0,0,.45));}
.vstage .vframe.tall{max-width:min(100%,340px);box-shadow:0 30px 60px -20px #000}
.vgrid:has(.vstage) .vcap{align-self:stretch;display:grid;align-content:center;gap:6px}
.vgrid:has(.vstage) .vcap p{font-size:clamp(15px,1.7vw,18px)}
@media(max-width:860px){.vgrid:has(.vstage){grid-template-columns:minmax(0,1fr)}.vgrid:has(.vstage) .vcap{order:2}}
.rd-n{right:auto;left:10px}.rd-p{left:auto;right:10px}
.rd-p svg{transform:scaleX(-1)}.rd-n svg{transform:none}

/* الشريط المثبّت أُلغي؛ واللافتة تعود بعد المشهد الافتتاحي إلى حجمها الطبيعي */
.hero-pin{display:none!important}
.banner.hero{transition:min-height 1.4s cubic-bezier(.65,0,.25,1),max-height 1.4s cubic-bezier(.65,0,.25,1),padding 1.2s var(--ease)}
.banner.hero.compact{min-height:clamp(260px,38vh,380px);max-height:380px;padding:clamp(22px,4vw,48px)}
.banner.hero h1{transition:font-size 1.2s var(--ease)}
.banner.hero.compact h1{font-size:clamp(40px,7.5vw,86px)}
.banner.hero.compact .hf-cue{opacity:0!important;transition:opacity .4s}
.banner.hero.compact .motif{width:clamp(120px,22vw,260px);transition:width 1.2s var(--ease)}

.banner.hero.instant,.banner.hero.instant h1,.banner.hero.instant .motif{transition:none!important}
html{scroll-behavior:auto}