/* سُرى · قالب T-151
   الأساس (بلا كلاس) صفحة عادية كاملة القراءة: هذا ما يراه من بلا JS أو بلا WebGL أو بحركة مخفّضة
   html.js يحوّلها إلى مسرح ثابت يقوده التمرير */
:root{
  --ink:#0B0B0B;--paper:#F4F1EA;--white:#FFFFFF;--saff:#F2A01E;
  --soft:#5C5A55;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:'Readex Pro',sans-serif;color:var(--white);background:var(--ink);overflow-x:clip;line-height:1.7}
h1,h2,h3{font-family:'Alexandria','Readex Pro',sans-serif;font-weight:700;line-height:1.3}
a{color:inherit}
ol,ul{list-style:none}

/* السطر الثابت والعلامة */
.tag,.brand{font-size:12px;line-height:1.5;z-index:40}
.tag{position:absolute;inset-block-start:10px;inset-inline-end:10px;padding:4px 8px;background:var(--ink);color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;max-inline-size:62vw;text-align:end}
.brand{position:absolute;inset-block-start:8px;inset-inline-start:10px;padding:1px 8px;background:var(--ink);color:var(--white)}
.brand b{font:700 17px/1.5 'Alexandria',sans-serif}
.brand span{opacity:.82;margin-inline-start:6px}

/* ---------- الصفحة الثابتة ---------- */
#gl,#hint{display:none}
.sheet{position:relative;overflow:hidden}
.ink{background:var(--ink);color:var(--white)}
.paper{background:var(--paper);color:var(--ink)}
.still{display:block;inline-size:100%;block-size:auto}
#night{padding-block-end:clamp(48px,8vw,110px)}
#night .still{block-size:min(92svh,62vw + 240px);inline-size:100%}
#night .copy{padding-inline:clamp(20px,6vw,88px);margin-block-start:clamp(-280px,-16vw,-60px);position:relative}
#night h1{font-size:clamp(96px,24vw,340px);line-height:1.3}
.lead{font-size:clamp(19px,2.2vw,30px);max-inline-size:26em;margin-block-end:clamp(40px,7vw,96px)}
#night h2,#night2 .copy h2{font-size:clamp(34px,6vw,92px);margin-block-end:.5em}
.evhead{font-size:clamp(19px,2vw,26px);color:var(--saff);margin-block:clamp(36px,6vw,72px) 18px}
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:clamp(20px,4vw,56px)}
.events li{padding-block:14px;border-block-start:1px solid rgb(255 255 255 / .32)}
.events b{display:block;font:700 clamp(21px,2.3vw,30px)/1.35 'Alexandria',sans-serif}
.events span{font-size:15px;opacity:.86}

.daytitle{font-size:clamp(76px,16.6vw,250px);line-height:1.3}
br.m{display:none}
#day{padding:clamp(56px,8vw,110px) clamp(20px,5vw,72px)}
.stairs{--stair:11.4vw;--sw:clamp(110px,13vw,200px);margin-block-start:clamp(28px,5vw,64px)}
.step{display:flex;gap:clamp(18px,2.4vw,36px);align-items:flex-start;margin-inline-start:calc(var(--i)*var(--stair));padding-block-start:clamp(16px,2vw,28px);border-block-start:2px solid var(--ink);margin-block-end:clamp(20px,3vw,44px)}
.snap{flex:none;inline-size:var(--sw);block-size:auto;display:block}
.txt{min-inline-size:0}
.txt p{max-inline-size:27em}
@media (min-width:721px){.step h3{white-space:nowrap}}
.step h3{font-size:clamp(30px,5.4vw,86px)}
.step p{font-size:clamp(16px,1.55vw,23px);color:var(--ink);margin-block-start:6px}

/* اللقطات: كلها مرسومة */
.sb{fill:var(--ink)}
.snap .o{fill:none;stroke:#fff;stroke-width:1.5}
.snap .f{fill:#fff}
.snap .f3{fill:var(--saff)}
.snap .dr{fill:none;stroke:#fff;stroke-width:3}
.snap .dr.z{stroke:var(--saff);stroke-width:5}
.snap .dr.i{stroke:var(--ink);stroke-dasharray:5 6;stroke-width:2}
.snap .pin{fill:#fff}
.snap .pin.p3{fill:var(--saff)}
.s3 .pin.p1,.s3 .pin.p2{fill:#fff}
.snap .tk{fill:#fff}
.snap .st{fill:var(--ink)}
.snap .bar{fill:var(--ink)}
.snap .bar.z{fill:var(--saff)}

#night2{padding-block:clamp(48px,8vw,110px) clamp(24px,4vw,48px);text-align:center;display:flex;flex-direction:column;align-items:center}
#night2 .copy{order:0}
#night2 .still{order:1}
#night2 .endcopy{order:2}
#night2 .copy{padding-inline:20px;margin-block-end:clamp(30px,5vw,60px)}
#night2 .still{inline-size:min(92%,860px);margin-block-end:clamp(24px,4vw,48px)}
.endcopy{position:relative;padding-inline:20px}
.prov{font-size:clamp(16px,1.6vw,22px);color:var(--saff)}
.endt{font-size:clamp(50px,7.4vw,112px);margin-block-end:.22em}

/* الدعوة: عنصر واحد فقط */
#cta{display:block;inline-size:max-content;margin:0 auto clamp(52px,8vw,96px);background:var(--saff);color:var(--ink);font:700 clamp(15px,1.2vw,18px)/1.3 'Alexandria',sans-serif;text-decoration:none;padding:15px 26px;border-radius:999px}
#cta:focus-visible,.tag:focus-visible{outline:2px solid var(--saff);outline-offset:3px}
#theatre{background:var(--ink)}

/* ---------- المسرح ---------- */
html.js body{block-size:1600vh;block-size:1600lvh;overflow-x:clip}
html.js .tag,html.js .brand{position:fixed;transition:color .5s var(--ease),background-color .5s var(--ease)}
html.js #theatre{position:fixed;inset:0;overflow:hidden;perspective:1100px;perspective-origin:50% 50%;background:#0B0B0B;touch-action:pan-y}
html.js .still{display:none}
html.js .sheet{position:absolute;inset:0;padding:0;overflow:hidden;backface-visibility:hidden;will-change:transform}
html.js #gl{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .5s var(--ease)}
html.js #gl.on{opacity:1}
html.js #gl.held{cursor:grabbing}
html.js #night .copy,html.js #night2 .copy{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.js #night{z-index:3}
html.js #day{z-index:2;visibility:hidden}
html.js #night2{z-index:4;background:none;pointer-events:none;text-align:center;display:grid;place-items:center}
html.js .endcopy{opacity:0;padding:0;inline-size:min(86vw,560px);transform:translateY(calc(var(--e,0)*0px))}
html.js #slot{block-size:66px}
html.js .prov{font-size:clamp(14px,1.6vw,20px)}
html.js .endt{font-size:clamp(46px,6.6vw,92px)}

html.js #day{padding:0}
html.js #dayin{position:absolute;inset-inline:0;inset-block-start:0;padding:clamp(70px,9vh,110px) clamp(18px,4.4vw,64px) 16vh;will-change:transform}
html.js .daytitle{font-size:clamp(64px,16.6vw,min(250px,34vh));margin-block-end:4vh}
html.js .stairs{margin:0}
html.js .step{min-block-size:0;margin-block-end:5vh}
/* اللقطة ساكنة درجة فارغة، وتمتلئ حين تصل فقرتها */
html.js .snap .sb{fill:var(--paper);stroke:var(--ink);stroke-width:2;transition:fill .45s var(--ease)}
html.js .step.on .snap .sb{fill:var(--ink)}
html.js .snap>g{opacity:0;transition:opacity .45s var(--ease)}
html.js .step.on .snap>g{opacity:1}
html.js .step .txt h3,html.js .step .txt p{color:var(--soft);transition:color .4s var(--ease)}
html.js .step.on .txt h3,html.js .step.on .txt p{color:var(--ink)}

/* رسم اللقطة مربوط بتقدم الفقرة */
html.js .snap .dr{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
html.js .snap .dr.i{stroke-dasharray:5 6;stroke-dashoffset:0}
html.js .snap .f{opacity:0}
html.js .step .snap .f1{opacity:clamp(0,calc(var(--p,0)*4),1)}
html.js .step .snap .f2{opacity:clamp(0,calc(var(--p,0)*4 - 1),1)}
html.js .step .snap .f3{opacity:clamp(0,calc(var(--p,0)*4 - 2),1)}
html.js .snap .pin{opacity:clamp(.0,calc(var(--p,0)*3),1)}
html.js .snap .pin.p2{opacity:clamp(0,calc(var(--p,0)*3 - .6),1)}
html.js .snap .pin.p3{opacity:clamp(0,calc(var(--p,0)*3 - 1.2),1)}
html.js .snap .pin.p4{opacity:clamp(0,calc(var(--p,0)*3 - 1.8),1)}
html.js .snap .bar.z{opacity:clamp(0,calc(var(--p,0)*2 - .6),1)}

/* حرف الورقة حين تميل: سماكة حقيقية */
html.js #fold{position:absolute;inset:0;z-index:5;pointer-events:none;transform-style:preserve-3d;visibility:hidden;will-change:transform}
html.js #fold i{position:absolute;display:block;background:var(--saff)}

html.js #cta{position:fixed;inset-block-start:0;inset-inline-start:auto;left:0;margin:0;z-index:30;will-change:transform;transform-origin:50% 50%;transition:background-color .5s var(--ease),color .5s var(--ease)}
html.js #cta.flip{background:var(--ink);color:var(--saff)}
html.js #hint{display:block;position:fixed;inset-block-end:24px;inset-inline-start:50%;translate:50% 0;font-size:13px;color:#fff;background:var(--ink);padding:2px 10px;z-index:20;transition:opacity .5s var(--ease)}
html.js body.onpaper .tag,html.js body.onpaper .brand{color:var(--ink);background:var(--paper)}

@media (max-width:720px){
  br.m{display:inline}
  .stairs{--stair:5.2vw;--sw:30vw}
  .step{flex-direction:column;gap:12px}
  .txt{inline-size:min(80vw,24em)}
  .daytitle{font-size:clamp(72px,24vw,180px)}
  html.js .daytitle{font-size:clamp(64px,24vw,min(180px,18vh));margin-block-end:2vh}
  html.js .step{margin-block-end:3vh}
  .step h3{font-size:clamp(28px,8.4vw,54px)}
  .brand span{display:none}
  html.js #hint{inset-inline-start:14px;translate:none;inset-block-end:20px}
  html.js #slot{block-size:60px}
}
@media (max-width:420px){.tag{font-size:11px}}
@media (prefers-reduced-motion:reduce){*{transition:none}}