/* ===== بوابة القلعة (باب سحري) + الصورة الملكية + حوار البداية ===== */
body.gate-on{overflow:hidden}
.gate{--k:1;position:fixed;inset:0;z-index:130;overflow:hidden;font-family:Cairo,sans-serif;color:#fff3d0;background:radial-gradient(130% 95% at 50% 100%,#40306a 0,#181b47 46%,#070a22 100%);-webkit-tap-highlight-color:transparent;transition:opacity calc(.9s*var(--k)) ease,visibility 0s calc(.9s*var(--k))}
.gate.p7{opacity:0;visibility:hidden;pointer-events:none}
.gate *{box-sizing:border-box}
.g-stars{position:absolute;inset:0;pointer-events:none}
.g-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.2;animation:gTw var(--d) ease-in-out infinite var(--dl)}
@keyframes gTw{50%{opacity:.95}}
.g-title{position:absolute;top:calc(2.5vh + env(safe-area-inset-top));left:0;right:0;z-index:3;margin:0;text-align:center;font:900 clamp(24px,6vw,48px)/1.3 Cairo,sans-serif;color:#ffd978;text-shadow:0 3px 0 #5b3a08,0 8px 18px #000a;transition:opacity calc(.6s*var(--k));pointer-events:none}
/* خلفية القاعة المضيئة (تحت القلعة): تظهر حين تقترب الكاميرا، وفيها الأشعة والغبار الذهبي */
.g-glow{position:absolute;inset:0;z-index:1;opacity:0;background:radial-gradient(circle at 50% 48%,#fffdf0 0,#ffeaa6 14%,#f6bd4c 36%,#a2601a 64%,#43200a 86%,#1d0d04 100%);pointer-events:none;transition:opacity calc(2.6s*var(--k)) ease}
.gate.p4 .g-glow{opacity:1}
.g-rays{position:absolute;left:50%;top:48%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;background:repeating-conic-gradient(from 0deg,rgba(255,251,220,.34) 0 5deg,rgba(255,251,220,0) 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,#000 7%,transparent 52%);mask:radial-gradient(circle,#000 0,#000 7%,transparent 52%);animation:gSpin 90s linear infinite;pointer-events:none;opacity:0;transition:opacity calc(1.6s*var(--k)) ease}
@keyframes gSpin{to{transform:rotate(360deg)}}
.g-dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity calc(1.6s*var(--k)) ease}
.g-dust i{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff8d2,#ffd25c 58%,transparent 72%);opacity:0;animation:gDust var(--d) linear infinite var(--dl)}
@keyframes gDust{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:.95}100%{transform:translate(var(--dx),-108vh) scale(1.1);opacity:0}}
.gate.p5 .g-rays,.gate.p5 .g-dust{opacity:1}
/* العالم: القلعة والقاعة والصورة. الصورة ثابتة في عمق القاعة، والكاميرا (هذا العنصر كله) هي التي تتقدّم نحوها */
.g-fort{position:absolute;left:50%;bottom:0;z-index:2;height:min(88vh,160vw);aspect-ratio:600/520;transform:translateX(-50%) translate(0px,0px) scale(1);transform-origin:50% 69.85%;perspective:1400px;perspective-origin:50% 62%;pointer-events:none}
.g-wall{position:absolute;inset:0;width:100%;height:100%;transition:filter calc(1.8s*var(--k)) ease}
.g-open{position:absolute;left:35.83%;top:46.15%;width:28.33%;height:53.85%;background:#020204;overflow:hidden;transition:background calc(1.2s*var(--k)) ease}
.g-light{position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 60%,#fffdea 0,#ffe9a4 26%,#f3b340 58%,#7a3b0c 100%);opacity:0;transition:opacity calc(3.2s*var(--k)) ease-in}
/* إطار ذهبي بنسب مئوية فيتّسع مع الكاميرا بلا تشويه ولا فقد للنسبة */
.g-wframe,.g-frame{position:relative;margin:0;border-radius:3%;background:linear-gradient(135deg,#fbe9a6,#b9791d 28%,#fff2bc 50%,#a8661a 72%,#f4d070)}
.g-wframe img,.g-frame img{display:block;margin:2.4%;width:95.2%;height:auto;aspect-ratio:1340/1344;border-radius:1.6%;background:#2a1204;user-select:none;-webkit-user-drag:none}
.g-wframe{position:absolute;left:50%;top:44%;width:76%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #5b350a,0 0 0 2px #f6d77a,0 0 22px 4px rgba(255,214,102,.72);animation:gGlow 3.6s ease-in-out infinite}
@keyframes gGlow{50%{box-shadow:0 0 0 1px #5b350a,0 0 0 2px #f6d77a,0 0 34px 8px rgba(255,226,130,.88)}}
.g-shine{position:absolute;inset:2.4%;border-radius:1.6%;overflow:hidden;pointer-events:none}
.g-shine::after{content:"";position:absolute;top:-20%;bottom:-20%;width:26%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-14deg);animation:gShine 5.5s ease-in-out infinite 1.5s}
@keyframes gShine{0%,55%{left:-40%}100%{left:130%}}
.g-spot{position:absolute;width:11%;aspect-ratio:1;margin:-5.5%;border-radius:50%;background:radial-gradient(circle,#fffbe2 0,rgba(255,236,150,.85) 24%,transparent 70%);animation:gSpot 2.6s ease-in-out infinite;pointer-events:none}
.g-spot.s1{left:0;top:0}.g-spot.s2{left:100%;top:0;animation-delay:.6s}.g-spot.s3{left:0;top:100%;animation-delay:1.2s}.g-spot.s4{left:100%;top:100%;animation-delay:1.8s}
@keyframes gSpot{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
.g-leaf{position:absolute;top:46.15%;height:53.85%;width:14.165%;backface-visibility:hidden;transition:transform calc(3.3s*var(--k)) cubic-bezier(.5,.05,.25,1),filter calc(1.8s*var(--k)) ease}
.g-leaf.l{left:35.83%;transform-origin:0 50%;animation:gLeafL 3.8s ease-in-out infinite}.g-leaf.r{left:50%;transform-origin:100% 50%;animation:gLeafR 3.8s ease-in-out infinite}
.g-leaf svg{display:block}
@keyframes gLeafL{0%,23%,100%{transform:rotateY(0)}25%{transform:rotateY(1.3deg)}29%{transform:rotateY(0)}34%{transform:rotateY(0)}36%{transform:rotateY(1.3deg)}40%{transform:rotateY(0)}45%{transform:rotateY(0)}47%{transform:rotateY(1.8deg)}53%{transform:rotateY(0)}}
@keyframes gLeafR{0%,23%,100%{transform:rotateY(0)}25%{transform:rotateY(-1.3deg)}29%{transform:rotateY(0)}34%{transform:rotateY(0)}36%{transform:rotateY(-1.3deg)}40%{transform:rotateY(0)}45%{transform:rotateY(0)}47%{transform:rotateY(-1.8deg)}53%{transform:rotateY(0)}}
.g-seam{position:absolute;left:50%;top:46.15%;height:53.85%;width:3px;margin-left:-1.5px;background:linear-gradient(#fff3c0,#ffcb52);box-shadow:0 0 14px 5px rgba(255,208,90,.85);opacity:0;transition:opacity calc(.8s*var(--k)),width calc(.5s*var(--k)),margin calc(.5s*var(--k))}
.g-torch{position:absolute;top:56%;width:3.6%;height:7%;transition:opacity calc(1.2s*var(--k)),filter calc(1.2s*var(--k))}
.g-torch.t1{left:27.5%}.g-torch.t2{left:68.9%}
.g-torch::before{content:"";position:absolute;left:38%;top:55%;width:24%;height:90%;background:#2a2118;border-radius:2px}
.g-torch i{position:absolute;left:50%;bottom:36%;width:150%;height:210%;margin-left:-75%;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;background:radial-gradient(ellipse at 50% 78%,#fff7b8 0,#ffb62e 36%,rgba(255,92,0,.55) 62%,transparent 72%);filter:blur(.6px);animation:gFlame .55s ease-in-out infinite alternate;box-shadow:0 0 34px 16px rgba(255,150,40,.42)}
@keyframes gFlame{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.92,1.08) skewX(3deg)}70%{transform:scale(1.06,.95) skewX(-3deg)}100%{transform:scale(.97,1.1) skewX(1deg)}}
/* يدٌ تطرق الباب بحركة رشيقة: تصل من أسفل اليمين، وتطرق ثلاث طرقات تهتزّ لها المصراعان وتنتشر حلقات ذهبية، ثم تعود وتكرّر */
.g-hand{position:absolute;left:50%;top:63%;width:15%;z-index:3;transform:translate(-50%,-14%);transition:opacity calc(.5s*var(--k))}
.g-hand::before{content:"";position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,102,.38),transparent 68%);animation:gHalo 3.8s ease-in-out infinite}
@keyframes gHalo{0%,100%{opacity:.15;transform:scale(.85)}30%,50%{opacity:.9;transform:scale(1.1)}}
.g-handsvg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 88%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));animation:gHandMove 3.8s ease-in-out infinite}
@keyframes gHandMove{
  0%{opacity:0;transform:translate(95%,115%) rotate(20deg)}
  13%{opacity:1;transform:translate(0,26%) rotate(-4deg)}
  19%{transform:translate(0,34%) rotate(-9deg)}
  24%{transform:translate(0,-1%) rotate(3deg) scale(.95)}
  29%{transform:translate(0,26%) rotate(-5deg) scale(1)}
  35%{transform:translate(0,-1%) rotate(3deg) scale(.95)}
  40%{transform:translate(0,26%) rotate(-5deg) scale(1)}
  46%{transform:translate(0,-3%) rotate(4deg) scale(.93)}
  53%{transform:translate(0,28%) rotate(-6deg) scale(1)}
  76%{opacity:1;transform:translate(0,24%) rotate(-3deg)}
  90%{opacity:0;transform:translate(80%,105%) rotate(16deg)}
  100%{opacity:0;transform:translate(95%,115%) rotate(20deg)}}
.g-knock{position:absolute;left:50%;top:60%;width:12%;aspect-ratio:1;margin:-6% 0 0 -6%;border-radius:50%;border:3px solid rgba(255,224,130,.95);box-shadow:0 0 18px 4px rgba(255,200,80,.6),inset 0 0 12px rgba(255,220,120,.5);opacity:0;animation:gRip 3.8s ease-out infinite;pointer-events:none}
.g-knock.k2{border-width:2px;animation-delay:.14s}
@keyframes gRip{0%,23%{opacity:0;transform:scale(.25)}24%{opacity:.95;transform:scale(.3)}32%{opacity:0;transform:scale(1.7)}34%{opacity:0;transform:scale(.25)}35%{opacity:.95;transform:scale(.3)}43%{opacity:0;transform:scale(1.7)}45%{opacity:0;transform:scale(.25)}46%{opacity:1;transform:scale(.3)}56%{opacity:0;transform:scale(2.2)}100%{opacity:0}}
.g-door{position:absolute;inset:0;z-index:4;border:0;background:transparent;cursor:pointer;outline:none}
.g-door:focus-visible{box-shadow:inset 0 0 0 5px #ffd978}
.g-door:disabled{cursor:default}
/* المرحلة ١: ظلام وترقّب — تنطفئ المشاعل ويخبو الحجر ويلمع شقّ ذهبي بين المصراعين كنبض القلب */
.gate.opening .g-hand,.gate.opening .g-knock{opacity:0;animation:none}
.gate.opening .g-leaf{animation:none}
.gate.p1 .g-wall,.gate.p1 .g-leaf{filter:brightness(.16)}
.gate.p1 .g-torch{opacity:.12;filter:brightness(.4)}
.gate.p1 .g-title{opacity:0}
.gate.p1 .g-seam{animation:gSeam 1.15s ease-in-out infinite}
@keyframes gSeam{0%,100%{opacity:.15}30%{opacity:.95}60%{opacity:.35}}
/* المرحلة ٢: الأقفال — يهتزّ الباب هزّتين ثقيلتين ويتّسع الشقّ */
.gate.p2 .g-leaf{animation:gKnock .5s ease-in-out 2}
@keyframes gKnock{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}60%{transform:translateX(2px)}}
.gate.p2 .g-seam{width:7px;margin-left:-3.5px;animation:none;opacity:1}
/* المرحلة ٣: يُفتح المصراعان إلى الداخل ويتسلّل النور؛ والكاميرا تتقدّم ببطء نحو الصورة الثابتة في عمق القاعة */
.gate.p3 .g-leaf{animation:none}
.gate.p3 .g-leaf.l{transform:rotateY(82deg)}.gate.p3 .g-leaf.r{transform:rotateY(-82deg)}
.gate.p3 .g-wall,.gate.p3 .g-leaf{filter:brightness(.4)}
.gate.p3 .g-light{opacity:1}
.gate.p3 .g-seam{opacity:0}
.gate.p3 .g-fort{transform:translateX(-50%) translate(0px,0px) scale(1.35);transition:transform calc(3.5s*var(--k)) cubic-bezier(.45,0,.4,1)}
/* المرحلة ٤: الكاميرا تندفع (زوم) داخل القاعة نحو الصورة حتى تملأ الشاشة؛ الصورة لا تتحرك، الكاميرا وحدها تتحرك */
.gate.p4 .g-fort{transform:translateX(-50%) translate(var(--cx,0px),var(--cy,0px)) scale(var(--cz,4));transition:transform calc(2.9s*var(--k)) cubic-bezier(.45,0,.25,1)}
/* المرحلة ٥: تصل الكاميرا فتخبو جدران القلعة وتبقى القاعة المضيئة والصورة، وتظهر الأشعة والتعليق */
.gate.p5 .g-wall,.gate.p5 .g-leaf,.gate.p5 .g-torch{opacity:0;transition:opacity calc(1.3s*var(--k)) ease,filter calc(1.8s*var(--k)) ease,transform calc(3.3s*var(--k)) cubic-bezier(.5,.05,.25,1)}
.gate.p5 .g-open{background:transparent}
.gate.p5 .g-light{opacity:0;transition:opacity calc(1.3s*var(--k)) ease}
/* التعليق وزر الدخول فوق الصورة (والإطار الشفاف يحجز مكان الصورة النهائي ليحسب منه موضع الكاميرا) */
.g-royal{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.2vh,14px);padding:calc(8px + env(safe-area-inset-top)) 8px calc(80px + env(safe-area-inset-bottom));pointer-events:none}
.g-frame{visibility:hidden;width:min(97vw,820px,calc(100vh - 262px));min-width:230px}
.g-side{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,14px);opacity:0;transition:opacity calc(1.4s*var(--k)) ease}
.gate.p5 .g-side{opacity:1}
.g-cap{position:relative;margin:0;max-width:min(92vw,560px);padding:9px 16px 10px;text-align:center;border:2px solid #f0c75a;border-radius:18px;background:rgba(40,16,4,.78);color:#fff3d0;box-shadow:0 8px 22px #0006}
.g-cap b{display:block;font:900 clamp(16px,3.9vw,22px)/1.55 Cairo,sans-serif;color:#ffe08a}
.g-cap span{display:block;font:800 clamp(15px,3.6vw,20px)/1.55 Cairo,sans-serif;margin-top:2px}
.g-anthem{position:relative;margin:0;padding:3px 18px 5px;border-radius:999px;background:rgba(40,16,4,.72);border:2px solid #f0c75a;font:900 clamp(17px,4.2vw,24px)/1.3 Cairo,sans-serif;color:#ffe9a6}
.g-anthem i{display:inline-block;font-style:normal;color:#ffd25c;animation:gNote 1.6s ease-in-out infinite}.g-anthem i:last-child{animation-delay:.8s}
@keyframes gNote{50%{transform:translateY(-6px) rotate(10deg)}}
/* شاشة عريضة: الصورة تملأ ارتفاع التطبيق، والتعليق جنبها */
@media (min-aspect-ratio:12/10) and (min-width:760px){.g-royal{flex-direction:row;gap:clamp(18px,3.4vw,56px);padding:10px 28px 84px}.g-frame{width:min(60vw,860px,calc(100vh - 118px))}.g-side{max-width:min(34vw,430px)}}
/* المرحلة ٦: زر الدخول */
.g-enter{position:absolute;left:50%;bottom:calc(3vh + env(safe-area-inset-bottom));z-index:7;transform:translate(-50%,16px);opacity:0;pointer-events:none;border:3px solid #fff3c0;background:linear-gradient(180deg,#e9382a,#a8140e);color:#fff;font:900 clamp(24px,5.6vw,32px)/1.2 Cairo,sans-serif;border-radius:999px;padding:8px 40px 10px;cursor:pointer;box-shadow:0 8px 24px #0009,0 0 24px #ffd36699;transition:opacity calc(.8s*var(--k)),transform calc(.8s*var(--k))}
.gate.p6 .g-enter{opacity:1;pointer-events:auto;transform:translate(-50%,0);animation:gEnter 1.6s ease-in-out infinite}
@keyframes gEnter{50%{box-shadow:0 8px 24px #0009,0 0 40px 8px #ffd366cc;transform:translate(-50%,-3px) scale(1.04)}}
.g-enter:focus-visible,.g-skip:focus-visible{outline:4px solid #fff;outline-offset:3px}
.g-skip{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;z-index:8;border:2px solid #fff8;background:#0006;color:#fff3d0;border-radius:999px;padding:2px 14px;font:800 14px Cairo,sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.gate.opening .g-skip{opacity:.85;pointer-events:auto}
.gate.p5 .g-skip,.gate.p6 .g-skip{opacity:0;pointer-events:none}
/* تخطّي: تُختصر الانتقالات */
.gate.fast,.gate.fast *{transition-duration:.45s!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){.g-rays,.g-dust i,.g-torch i,.g-shine::after,.g-spot,.g-wframe,.g-anthem i,.g-stars i,.g-leaf,.g-knock,.g-hand::before{animation:none!important}.g-handsvg{animation:none;transform:translate(0,24%)}.g-knock{opacity:0}.gate.p6 .g-enter{animation:none}.gate.p1 .g-seam{animation:none;opacity:.7}}

/* انتقال الدخول إلى صفحة البداية: يتدرّج النور عليها بعد انفتاح البوابة */
.intro.lit{animation:introLit 1.5s ease-out both}
@keyframes introLit{0%{filter:brightness(.25) saturate(.7)}100%{filter:none}}

/* ===== حوار البداية بعد اختيار الوضع: صوتان يتناوبان ثم يعدّان معًا ===== */
.talk{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 12px;background:radial-gradient(900px 620px at 50% 8%,#fffbe6,#fdeba6 52%,#ecbd52);font-family:Cairo,sans-serif;animation:talkIn .5s ease both;overflow:hidden}
.talk[hidden]{display:none}
@keyframes talkIn{from{opacity:0;transform:scale(1.03)}}
.t-flag{display:flex;height:11px;width:min(380px,70%);border-radius:8px;overflow:hidden;box-shadow:0 3px 8px #0003}
.t-flag i{flex:1}.t-flag i:nth-child(1){background:var(--red)}.t-flag i:nth-child(2){background:#fff}.t-flag i:nth-child(3){background:var(--green)}
.t-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);grid-template-areas:"m mid f";align-items:center;gap:clamp(8px,2vw,24px);width:min(1040px,100%)}
.t-mid{grid-area:mid;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.t-m{grid-area:m}.t-f{grid-area:f}
.t-av{margin:0;text-align:center;opacity:.62;filter:saturate(.55);transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .3s,filter .3s;position:relative}
.t-av img{display:block;width:min(230px,100%);aspect-ratio:1;margin:0 auto;border-radius:50%;border:6px solid #fff;background:#fff;box-shadow:0 8px 24px #0004}
.t-av figcaption{margin-top:4px;font:900 clamp(18px,3.4vw,26px)/1.3 Cairo,sans-serif;color:var(--dg)}
.t-av.say{opacity:1;filter:none;transform:scale(1.1)}
.t-av.say img{border-color:var(--green);animation:talkBob .45s ease-in-out infinite alternate}
.t-av.say::after{content:"";position:absolute;left:50%;top:0;width:min(230px,100%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:4px solid var(--green);opacity:0;animation:talkRing 1.1s ease-out infinite;pointer-events:none}
@keyframes talkBob{to{transform:translateY(-8px)}}
@keyframes talkRing{0%{opacity:.7;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.35)}}
.t-line{width:100%;min-height:3.4em;margin:0;padding:14px 18px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:4px solid var(--green);border-radius:30px;box-shadow:0 10px 26px #0003;font:900 clamp(22px,4.2vw,38px)/1.6 Cairo,sans-serif;color:var(--dg)}
.t-line.pop{animation:talkPop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes talkPop{from{transform:scale(.88);opacity:.3}}
.t-count{min-height:0;text-align:center;line-height:1}
.t-count b{display:block;font:900 clamp(96px,26vw,210px)/1 Cairo,sans-serif;color:var(--red);text-shadow:0 6px 0 #fff,0 14px 24px #0004;animation:cntPop .5s cubic-bezier(.2,1.6,.4,1)}
.t-count b.go{font-size:clamp(54px,13vw,116px);color:var(--green);line-height:1.2}
@keyframes cntPop{from{transform:scale(.3);opacity:0}}
.talk.counting .t-line{display:none}
.t-dots{display:flex;gap:7px}.t-dots i{width:12px;height:12px;border-radius:50%;background:#fff9;border:2px solid #fff;transition:background .25s,transform .25s}.t-dots i.on{background:var(--green);transform:scale(1.25)}
.t-skip{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;border:2px solid var(--green);background:#fff;color:var(--dg);border-radius:999px;padding:2px 16px;font:800 15px Cairo,sans-serif;cursor:pointer}
.t-skip:focus-visible{outline:4px solid var(--red);outline-offset:2px}
@media (max-width:640px){.t-stage{grid-template-columns:1fr 1fr;grid-template-areas:"mid mid" "m f";gap:10px 14px}.t-av img{width:min(150px,100%)}.t-line{padding:10px 12px;border-radius:24px}}
@media (prefers-reduced-motion:reduce){.talk,.t-av.say img,.t-av.say::after,.t-line.pop,.t-count b{animation:none}}

/* ===== فيديو البداية (بدل حوار الولد والبنت): فيديو واحد متصل مع عبارات مكتوبة ===== */
.ivid{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px 10px;background:radial-gradient(900px 620px at 50% 8%,#fffbe6,#fdeba6 52%,#ecbd52);font-family:Cairo,sans-serif;animation:talkIn .5s ease both;overflow:hidden}
.ivid[hidden]{display:none}
.iv-flag{display:flex;height:11px;width:min(380px,70%);border-radius:8px;overflow:hidden;box-shadow:0 3px 8px #0003}
.iv-flag i{flex:1}.iv-flag i:nth-child(1){background:var(--red)}.iv-flag i:nth-child(2){background:#fff}.iv-flag i:nth-child(3){background:var(--green)}
.iv-box{width:min(96vw,1100px,calc((100vh - 200px)*16/9));aspect-ratio:16/9;border:5px solid var(--green);border-radius:26px;overflow:hidden;background:#000;box-shadow:0 14px 34px #0005}
.iv-box video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.iv-cap{min-height:3.1em;max-width:min(96vw,900px);margin:0;padding:8px 18px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:4px solid var(--green);border-radius:26px;box-shadow:0 8px 22px #0003;font:900 clamp(22px,4.2vw,38px)/1.5 Cairo,sans-serif;color:var(--dg)}
.iv-cap:empty{visibility:hidden}
.iv-skip{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;border:2px solid var(--green);background:#fff;color:var(--dg);border-radius:999px;padding:2px 16px;font:800 15px Cairo,sans-serif;cursor:pointer}
.iv-skip:focus-visible{outline:4px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ivid{animation:none}}

/* The portrait is already in the hall. Opaque doors naturally uncover it. */
.gate .g-wframe{opacity:1;visibility:visible;animation:none;transition:none}
.g-open{z-index:0}.g-wall{z-index:1}.g-leaf{z-index:2}.g-torch{z-index:3}.g-seam{z-index:3}
/* No tiny opening during the idle knocking loop. */
.g-leaf.l,.g-leaf.r{animation:none}
.gate.opening:not(.p2) .g-hand{opacity:1}
.gate.opening .g-handsvg{animation:gHandKnockOnce calc(3.8s*var(--k)) ease-in-out 1 both}
.iv-box video{object-fit:contain}
@keyframes gHandKnockOnce{
  0%{opacity:0;transform:translate(95%,115%) rotate(20deg)}
  13%{opacity:1;transform:translate(0,26%) rotate(-4deg)}
  19%{transform:translate(0,34%) rotate(-9deg)}
  24%{transform:translate(0,-1%) rotate(3deg) scale(.95)}
  29%{transform:translate(0,26%) rotate(-5deg) scale(1)}
  35%{transform:translate(0,-1%) rotate(3deg) scale(.95)}
  40%{transform:translate(0,26%) rotate(-5deg) scale(1)}
  46%{transform:translate(0,-3%) rotate(4deg) scale(.93)}
  53%{transform:translate(0,28%) rotate(-6deg) scale(1)}
  76%{opacity:1;transform:translate(0,24%) rotate(-3deg)}
  90%{opacity:0;transform:translate(80%,105%) rotate(16deg)}
  100%{opacity:0;transform:translate(95%,115%) rotate(20deg)}}

/* Zoomed scenery must not scroll the fixed opening screen when a control receives focus. */
.gate{overflow:clip}

/* The doors open into an unlit hall. The portrait is flush against its wall;
   the room's light rises only after the doors have opened. */
.g-open{background:repeating-linear-gradient(0deg,#31271d 0 12%,#2a2219 12.2% 12.5%,#31271d 12.7% 25%);box-shadow:inset 12px 0 24px #0009,inset -12px 0 24px #0009}
.g-open::after{content:"";position:absolute;inset:0;z-index:3;background:#020304;opacity:.97;pointer-events:none;transition:opacity calc(2.7s*var(--k)) ease-in-out}
.gate.p4 .g-open::after{opacity:.10}
.g-wframe{background:#372719;border:3px solid #6e5333;border-radius:1px;box-shadow:inset 0 0 9px #0009,0 0 0 2px #241b14,0 0 5px #0008!important}
.g-wframe img{margin:2%;width:96%;border-radius:0;filter:brightness(.86) contrast(.98)}
.gate.p3 .g-light{opacity:0}
.gate.p4 .g-light{opacity:.26;transition:opacity calc(2.7s*var(--k)) ease-in-out}
.gate.p4 .g-fort{transform:translateX(-50%) scale(1.75);transition:transform calc(3.0s*var(--k)) ease-in-out}
.gate.p5 .g-wall,.gate.p5 .g-leaf,.gate.p5 .g-torch{opacity:1}
.gate.p5 .g-open{background:repeating-linear-gradient(0deg,#31271d 0 12%,#2a2219 12.2% 12.5%,#31271d 12.7% 25%)}
.gate.p5 .g-light{opacity:.26}
.gate.p5 .g-rays,.gate.p5 .g-dust{opacity:.22}
.g-side{position:absolute;left:50%;bottom:clamp(78px,10vh,110px);transform:translateX(-50%);width:min(96vw,700px);gap:5px}
.g-cap{max-width:100%;padding:6px 12px;background:rgba(32,19,10,.9)}
.g-anthem{background:rgba(32,19,10,.9)}
@media(min-aspect-ratio:12/10) and (min-width:760px){.g-side{max-width:min(35vw,460px);left:auto;right:16px;bottom:clamp(100px,20vh,190px);transform:none}}
@media(max-width:600px){.gate.p4 .g-fort{transform:translateX(-50%) scale(1.36)}.g-side{bottom:78px}.g-cap b,.g-cap span{font-size:14px}}
/* إطار مثبت في عمق الجدار: حافة خشبية مشطوفة وظل اتصال، دون هالة حول الصورة. */
.g-wframe{box-sizing:border-box;padding:4px;border:8px ridge #9b7136;border-radius:2px;background:linear-gradient(135deg,#3d2815,#b78c4a 13%,#513419 28%,#d0a65b 49%,#513419 70%,#b2833d 88%,#33200e);box-shadow:inset 0 0 0 2px #2a1709,inset 0 0 12px #000b,0 2px 0 2px #261a12,0 10px 15px 3px #000b,6px 6px 15px #0008!important}
.g-wframe img{box-sizing:border-box;margin:0;width:100%;height:auto;border:2px solid #3c250f;filter:brightness(.9) saturate(.92)}
.g-shine{display:none}
/* حركة الكاميرا من الباب إلى جدار القاعة ثم انكشاف الصورة بضوء هادئ. */
.gate.p3 .g-fort{transform:translateX(-50%) translateY(-4vh) scale(1.38);transition:transform calc(3.4s*var(--k)) cubic-bezier(.38,0,.24,1)}
.gate.p4 .g-fort,.gate.p5 .g-fort,.gate.p6 .g-fort{transform:translateX(-50%) translateY(-17vh) scale(2.55);transition:transform calc(3.8s*var(--k)) cubic-bezier(.34,0,.2,1)}
.g-open::after{opacity:.995;transition:opacity calc(3.8s*var(--k)) ease-in-out}
.gate.p4 .g-open::after{opacity:.12}
.gate.p3 .g-wframe{filter:brightness(.4)}
.gate.p4 .g-wframe,.gate.p5 .g-wframe,.gate.p6 .g-wframe{filter:brightness(.98);transition:filter calc(3.8s*var(--k)) ease-in-out}
.gate.p4 .g-light,.gate.p5 .g-light,.gate.p6 .g-light{opacity:.18;transition:opacity calc(3.8s*var(--k)) ease-in-out}
.g-wframe .g-spot{display:none}
.gate.p5 .g-rays,.gate.p5 .g-dust{opacity:.1}
@media(max-width:600px){.gate.p4 .g-fort,.gate.p5 .g-fort,.gate.p6 .g-fort{transform:translateX(-50%) translateY(-12vh) scale(2.1)}.g-side{bottom:clamp(80px,11vh,115px)}}
@media(min-aspect-ratio:12/10) and (min-width:760px){.g-side{max-width:min(27vw,380px);right:12px;bottom:clamp(115px,19vh,180px)}.g-cap b,.g-cap span{font-size:clamp(15px,1.35vw,19px)}}